Color Emoji in Unity: Flags, Skin Tones and ZWJ Sequences
Last reviewed
Many emoji are not one character but a sequence: a family is several people joined by zero-width joiners, a flag is a pair of regional-indicator letters, and a skin tone is a modifier after the base emoji. TextMesh Pro has no shaping engine, so these sequences render as one glyph only when the emoji font happens to encode them as plain ligatures; otherwise they fall apart into separate pictures, letters or empty boxes.
UniText renders color emoji from the operating system's emoji font with no setup, and flags, ZWJ sequences and skin tones form single glyphs as the Unicode standard requires.
Why some emoji break
Unicode builds a large share of emoji from several code points. A text engine has to recognize the whole sequence and ask the emoji font for the one glyph that represents it.
| Emoji | What it is made of | Without sequence support |
|---|---|---|
| 👨👩👧👦 family | man + ZWJ + woman + ZWJ + girl + ZWJ + boy | four separate people |
| 👍🏽 skin tone | thumbs up + medium skin tone modifier | a yellow thumb and a color swatch |
| 🇯🇵 flag | regional indicator J + regional indicator P | two boxed letters |
| 👩💻 profession | woman + ZWJ + laptop | a woman next to a laptop |
| ❤️ red heart | heart + variation selector 16 | a black text-style heart |
Since com.unity.ugui 2.0, TextMesh Pro can draw color emoji from a color font asset listed under Fallback Emoji Text Assets in the TMP Settings. The same page lists its limits: no single or chained contextual substitution, no SVG or AAT emoji fonts, and no support for the 160 px JPEG strikes of Apple Color Emoji. With no shaping engine, a family, flag or skin-tone sequence becomes one glyph only if the emoji font encodes it as a plain ligature and the ligature feature is on. Operating-system emoji fonts are used only through Dynamic OS font assets created and added to the fallback lists by hand.
UI Toolkit uses the same color-font setup and does not support COLRv1 fonts; its documentation does not describe emoji sequences.
How UniText renders emoji
- Color emoji come from the operating system's emoji font by default: for example Segoe UI Emoji on Windows, Apple Color Emoji on Apple platforms and Noto Color Emoji on Android. Nothing has to be configured or shipped.
- Flags, ZWJ sequences such as families and professions, and skin-tone modifiers each form one glyph cluster.
- Emoji take part in line breaking, selection and editing as single clusters: one arrow-key press crosses a whole family emoji and one backspace deletes it.
- Emoji work inside right-to-left text and next to any script.
- A project can ship its own color font instead:
UniTextColorFontaccepts CBDT and sbix bitmap fonts and COLRv0 and COLRv1 vector fonts. - On WebGL, emoji are drawn through the browser's own emoji rendering.
Color emoji can be turned off for the whole project in Project Settings › LightSide › UniText › Disable Emoji.
Questions
Do emoji add to the build size?
Can players type emoji in input fields?
Will emoji look the same on every platform?
Check it in your project
Run the browser demo, follow the setup guide, or compare the free version with the licenses.
Related problems
- Arabic Text in Unity: Fix Disconnected and Reversed LettersTextMesh Pro has no Arabic shaping or bidirectional ordering, so letters render isolated and reversed. UniText shapes Arabic, Persian and Urdu with HarfBuzz and runs the Unicode Bidirectional Algorithm.
- Unity Text Shows Squares Instead of Characters: Font Fallback That Just WorksSquares appear when no font in the fallback chain has the character. UniText falls back to the operating system’s fonts per language automatically, so any language renders without shipping a font for it.
- TextMeshPro Alternative for Unity: UniText vs TMP vs UI ToolkitUniText replaces TextMesh Pro with a HarfBuzz-based text engine: shaping for Arabic and Indic scripts, Unicode BiDi, emoji sequences, variable fonts and system-font fallback on uGUI and in world space.