Emoji Components

Understanding Emoji Components

Some emoji are represented by a single Unicode character, while others are created by combining multiple Unicode characters into an emoji sequence.

Emoji components help build these sequences. They can control presentation, join characters together, create flags and keycaps, or add characteristics such as hair style and skin tone.

Single Character Emoji

Many emoji are represented by one Unicode code point. For example, the grinning face emoji 😀 uses the Unicode code point U+1F600.

😀

In this case, a single Unicode character is enough to produce the complete emoji.

Emoji Sequences

Other emoji are created from two or more Unicode characters. These characters form an emoji sequence that a supporting system can display as one combined emoji.

Sequences are used to create several kinds of emoji, including:

• Emoji with presentation selectors.
• People with skin tone modifiers.
• People with different hair styles.
• Family and profession emoji.
• Country flags.
• Keycap emoji.

Although the result may look like one symbol on the screen, the underlying text can contain several separate Unicode characters.

Variation Selectors

Some Unicode characters can be displayed either as ordinary text symbols or with an emoji-style appearance. A variation selector can request a particular presentation.

The character U+FE0F, known as Variation Selector-16, requests emoji presentation when it is supported.

For example, the heart character uses:

U+2764

An emoji-style heart can use this sequence:

U+2764 U+FE0F

In HTML hexadecimal character references:

❤️

The result is:

❤️

Zero Width Joiner

The Zero Width Joiner, usually abbreviated as ZWJ, is a Unicode character used in many complex emoji sequences. Its code point is U+200D.

A simplified sequence looks like:

emoji + ZWJ + emoji

The ZWJ tells a supporting system that the surrounding characters should be presented together when a combined emoji is available.

ZWJ sequences are commonly found in family, profession, relationship, and other person-based emoji.

Regional Indicator Symbols

Most country flag emoji are created from pairs of Unicode characters called Regional Indicator Symbols. Each regional indicator represents a letter from A through Z.

For example, the United States flag 🇺🇸 combines the regional indicators for U and S:

U+1F1FA U+1F1F8

In HTML:

🇺🇸

Browsers and operating systems that support the sequence can display the two characters together as the corresponding flag.

Keycap Sequences

Digits and certain symbols can be combined with additional Unicode characters to create keycap emoji such as 1️⃣, #️⃣, and *️⃣.

For example, the keycap number one can be represented by this sequence:

U+0031 U+FE0F U+20E3

In HTML:

1️⃣

The sequence contains the number character, an emoji variation selector, and the combining enclosing keycap character.

Hair Components

Unicode includes emoji components representing different hair styles. These components can participate in supported emoji sequences rather than always being used as independent pictographs.

This is also the table format we can reuse on the remaining Emoji pages for samples, decimal and hexadecimal references, and CLDR short names.

Emoji Modifiers

Emoji modifiers are another type of Unicode character that can change the appearance of certain supported emoji. Skin tone modifiers are the most familiar example.

A modifier follows the emoji that it modifies and becomes part of the complete emoji sequence.

base emoji + modifier

Because modifiers have their own behavior and many possible sequences, they are covered separately on the Emoji Modifiers page.

Emoji Component Example

The following example shows several emoji that use more than one Unicode character. Compare the rendered emoji with the hexadecimal character references used to create them.

Emoji Component Best Practices

• Remember that one displayed emoji may contain several Unicode characters.
• Keep all characters in an emoji sequence together and in the correct order.
• Use UTF-8 encoding when storing emoji directly in HTML documents.
• Do not insert spaces between characters that are intended to form one sequence.
• Remember that support for newer or complex emoji sequences can vary between systems.
• Use established Unicode sequences rather than creating arbitrary character combinations.

Summary

Emoji components allow Unicode characters to work together to create emoji that cannot be represented by a single character. Variation selectors, Zero Width Joiners, regional indicators, keycap components, hair components, and modifiers all participate in different kinds of emoji sequences.

Understanding these components helps explain why an emoji that appears to be one symbol may actually contain several Unicode code points. The next tutorial looks more closely at emoji modifiers and the variations they create.