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).

“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.