Emoji Skin Tone Modifiers — Fitzpatrick Scale in Unicode
Learn how Unicode emoji skin tone modifiers (U+1F3FB to U+1F3FF) work — their code points, how they combine with base emoji, and encoding considerations.
Detailed Explanation
Emoji Skin Tone Modifiers
Unicode supports five skin tone modifiers based on the Fitzpatrick scale, allowing human emoji to be rendered with different skin colors. These modifiers are code points U+1F3FB through U+1F3FF.
The Five Modifiers
| Code Point | Name | Fitzpatrick Type |
|---|---|---|
| U+1F3FB | EMOJI MODIFIER FITZPATRICK TYPE-1-2 | Light skin tone |
| U+1F3FC | EMOJI MODIFIER FITZPATRICK TYPE-3 | Medium-light skin tone |
| U+1F3FD | EMOJI MODIFIER FITZPATRICK TYPE-4 | Medium skin tone |
| U+1F3FE | EMOJI MODIFIER FITZPATRICK TYPE-5 | Medium-dark skin tone |
| U+1F3FF | EMOJI MODIFIER FITZPATRICK TYPE-6 | Dark skin tone |
How Modifiers Work
A skin tone modifier immediately follows a base human emoji to change its appearance:
Base Emoji + Skin Tone Modifier = Modified Emoji
U+1F44D + U+1F3FD = Thumbs up (medium skin tone)
Encoding Details
Each modifier is a supplementary-plane character requiring 4 bytes in UTF-8 (F0 9F 8F BB through F0 9F 8F BF) and a surrogate pair in UTF-16. Combined with the base emoji:
- Unmodified thumbs up: 4 bytes UTF-8 (1 code point)
- Modified thumbs up: 8 bytes UTF-8 (2 code points)
- Modified person with ZWJ profession: 15+ bytes UTF-8 (4+ code points)
JavaScript String Length
A skin-tone-modified emoji like "thumbs up medium" has a .length of 4 in JavaScript (2 surrogate pairs), even though it appears as a single character. This makes accurate character counting challenging without grapheme-cluster-aware APIs.
Compatibility Considerations
Not all emoji support skin tone modifiers. Only emoji depicting human body parts (hands, faces, people) accept modifiers. When a modifier follows a non-human emoji, they render as two separate characters. The Unicode Inspector helps you verify whether a specific combination produces a single glyph or separate ones by showing the exact code point sequence.
Grapheme Cluster Counting
To count modified emoji as single visual units, you need grapheme-cluster segmentation (using Intl.Segmenter in JavaScript or equivalent). The raw code point count will always show 2+ for modified emoji. The Unicode Inspector's character-by-character display helps you understand this distinction.
Use Case
Use this when building inclusive emoji pickers, implementing grapheme-cluster-aware text truncation, calculating accurate character counts for social media post length limits, or debugging rendering issues with skin-tone-modified emoji across platforms.