Why are my TMP emojis showing as boxes or outlines?

TextMeshPro uses Signed Distance Field font atlases that store monochrome glyphs only. Color emoji aren't supported in the SDF atlas. You need to use a TMP Sprite Asset with prerendered colored sprites and reference them via <sprite> tags.

How do I create a TMP Sprite Asset?

Right-click on a packed atlas texture → Create → TextMeshPro → Sprite Asset. Configure unicode codepoints per glyph in the Sprite Asset's character table so unicode emoji codes route to the right sprites.

Do I have to manually map every emoji?

For a curated set, yes. For full unicode coverage, use TMP's built-in EmojiOne fallback or a third-party packed atlas. Map characters by Unicode Code in the Sprite Asset Character Table to enable inline use without explicit sprite tags.

Fix: Unity TextMeshPro Emoji Not Rendering in Color

Quick answer: Build a TMP Sprite Asset from a packed emoji texture. Map each glyph to its Unicode code in the asset’s Character Table. Assign the asset to your TMP component’s Sprite Asset slot. Inline emojis now render in color.

User chat box renders “hi 🎉”. The hi shows; the emoji shows as a square outline. TMP’s SDF atlas can’t store color, so emoji need a parallel Sprite Asset path.

The Symptom

Emoji characters in TMP text render as empty boxes, fallback monochrome glyphs, or outlines. Plain text renders correctly; only emoji are missing color.

What Causes This

TMP uses Signed Distance Fields. SDF stores grayscale, not color. Color emoji require either a separate Sprite Asset (TMP’s parallel system) or third-party color font support. The base font asset cannot supply color glyphs.

The Fix

Step 1: Pack an emoji atlas. Use a unicode-aware emoji set (Twemoji, OpenMoji) packed into a single texture. Tools like TexturePacker or Unity’s Sprite Atlas can produce this.

Step 2: Create a TMP Sprite Asset. Right-click the texture in Project → Create → TextMeshPro → Sprite Asset. The asset is a Unity asset with a Character Table.

Step 3: Populate the Character Table. Open the Sprite Asset. Sprite Character Table panel: each entry has a Unicode Code (hex), a Name, and an index into the Sprite Glyph Table. Assign Unicode codes to map keyboard emoji to sprites:

Sprite Character Table:
  0x1F389 (party popper)  -> sprite glyph index 0
  0x1F600 (grin)          -> sprite glyph index 1
  0x1F525 (fire)          -> sprite glyph index 2
  ...

Step 4: Assign to TMP component. On any TMP_Text component, set the Sprite Asset slot. Or set the global default in TMP Settings → Default Sprite Asset.

Now "hi 🎉" renders as “hi” followed by the sprite indexed by 0x1F389.

Inline Sprite Tag Alternative

If you don’t want unicode passthrough (or want to mix custom icons), use sprite tags directly:

Pickup: <sprite name="coin"> x 5
Achievement: <sprite=3> First Win!

By name (looking up Sprite Asset Character Table) or by index. More explicit, less typing-friendly.

Color Tinting

TMP color tags don’t affect Sprite Assets unless the sprite atlas is grayscale. For colored emoji you usually want to leave them un-tinted; for monochrome icons (game-specific glyphs), use a grayscale source and tint with TMP’s color system.

Verifying

Type emoji into the TMP component’s Text field. Game view should render in color. If still missing, check: Sprite Asset assigned, Unicode codes set correctly, the input source actually contains the unicode character (not a placeholder image).

Understanding the issue

Render pipelines have ordering: which pass runs when, what state is bound, which targets are written. Bugs at this layer are often invisible in code review and only manifest at runtime.

The specific bug described above is the kind that surfaces during integration rather than unit testing. It depends on a combination of factors: the asset configuration, the runtime state, the platform's specific behavior. In isolation, each piece looks correct; in combination, the bug emerges. This is why thorough integration testing - playing the actual game in realistic conditions - catches things that automated tests miss.

Why this happens

The triage path for this kind of bug is long. The symptom appears in gameplay, but the cause is in a different system. The reporter describes the gameplay effect; the engineer has to translate that into a hypothesis about the underlying cause. Misdirection is common.

At the engine level, the behavior comes from a deliberate design decision in Unity. The engine team chose a particular trade-off - usually performance versus convenience, or generality versus specificity - and that trade-off has consequences when you push against it. Understanding the trade-off is what turns 'this bug is mysterious' into 'this bug is the expected consequence of this design'.

Verifying the fix

For shipping games, the safest verification is a staged rollout. Apply the fix to 1% of players for 24 hours; watch the affected metric; expand if green. Skipping the staged rollout means the verification is the entire player base, which is too high a stakes for most fixes.

Reproducibility is the prerequisite for verification. If you can't reliably reproduce the bug pre-fix, you can't reliably verify it post-fix. Spend time getting a clean reproduction before you write any fix code. The fix is fast once you understand the reproduction; the reproduction is the slow part.

Variations to watch for

Related bug classes often share the same root cause. If you find yourself fixing this issue, look for cousins: similar symptoms in adjacent systems, the same data flow but a different value, or the same fix pattern in another module. The catalog of 'we've seen this before' becomes valuable institutional knowledge.

Adjacent bugs often share a root cause. After fixing the case you've found, spend an hour searching the codebase for similar patterns. What's the same call with different arguments? The same data flow with a different entity type? The same lifecycle issue in a sibling system? Each match is a candidate for the same fix, or a related fix that prevents future bugs of the same class.

In production

Live games surface this bug class at scale. What's a rare edge case in development becomes a daily occurrence once you have a few thousand concurrent players. The class isn't 'this player has a unique setup'; it's 'one in N thousand sessions will trigger this exact combination'.

When triaging a similar issue in production, prioritize gathering data over hypothesizing causes. A player report describes a symptom; what you need is a build SHA, a session timestamp, and ideally a screen recording or session replay. With those, the bug becomes tractable. Without them, you're guessing at hypothetical reproductions that may not match what the player actually hit.

Performance considerations

Performance implications matter when this bug class scales with player count or asset count. A bug that fires once per session is annoying; a bug that fires once per frame compounds. After fixing, profile the affected code path under realistic load. The fix that's correct for one entity may be too slow for ten thousand.

Diagnostic approach

The diagnostic tools available depend on your engine and platform. Use the engine's native profilers and debug overlays before reaching for external tools. The native tools have context that external tools lack - they know which subsystem owns the code, which assets are loaded, and what state the engine is in.

For Unity-specific diagnostics, the editor's profiler is the canonical starting point. Capture a representative frame with the symptom present; compare against a frame without the symptom; the diff often points directly at the cause. If the symptom is non-deterministic, capture multiple frames and look for the pattern - the cause is usually a state transition or a specific input value rather than a continuous effect.

Tooling and ecosystem

Modern engine versions ship better tooling for this kind of issue than older versions. If you're on an older release, the diagnostic step may take significantly longer because the tools you'd want don't exist yet. Sometimes the right answer is upgrading rather than fighting through limited tooling.

Within Unity, the relevant diagnostic surfaces include the standard frame debugger, memory profiler, and engine-specific debug overlays. Each one shows a different facet of what's happening. The frame debugger reveals draw call ordering and state transitions; the memory profiler shows allocation patterns; the debug overlay reveals per-system state. Bugs that resist one tool usually surrender to another - the trick is knowing which tool to reach for first.

Edge cases and pitfalls

Edge cases for this class of issue often involve specific timing: the first frame after a state change, the last frame before a transition, frames where multiple subsystems update simultaneously. Reproducing these reliably is part of what makes the bug class hard to test.

When writing a regression test for this fix, focus on the boundary conditions that surfaced the original bug. Tests that exercise the happy path catch obvious regressions; tests that exercise the boundary catch the subtler regressions that look like new bugs but are really the original returning. The latter are the tests that earn their keep over the long life of the project.

Team communication

When this bug class affects multiple teams (often the case for cross-system issues), early communication prevents duplicate work. The team that owns the symptom may not own the cause. A 15-minute conversation at the start of triage often saves hours of independent investigation.

If this fix touches a system several engineers work in, a short writeup in the team's engineering channel helps. Not a full design doc - a paragraph explaining what was wrong, what's fixed, and what to watch for. Future engineers encountering similar symptoms will search for the fix; making it findable is a small investment that pays back later.

“Sprite Asset. Unicode mapped. Assigned to TMP. Emoji render in color.”

Related Issues

For TMP text blurry on high DPI, see Canvas scaler. For TMP canvas batching, see TMP batching.

Sprite Asset. Map by Unicode. The party emoji parties.