Emoji Complete Guide [2026] - Encoding and Application of Emoticons

In the era of digital communication, Emoji has become an indispensable part of our daily interactions. From simple smiley faces 😊 to complex family combinations 👨‍👩‍👧‍👦, these small icons carry rich emotional expressions. This article delves into the history, technical principles, and development applications of Emoji.

The Origin and Evolution of Emoji

From Emoticons to Emoji

Before Emoji was born, people used ASCII character combinations to express emotions, known as "emoticons":

The Birth of Emoji (1999)

The word "Emoji" comes from Japanese, where "絵" (e) means picture and "文字" (moji) means character. In 1999, Shigetaka Kurita, an engineer at Japanese mobile carrier NTT DoCoMo, designed the first set of Emoji—176 icons at 12×12 pixels for the i-mode mobile internet platform.

Characteristics of Early Emoji:

• Only 12×12 pixels in size
• Primarily targeted at Japanese users
• Included basic icons for weather, transportation, emotions, etc.
• Each carrier had its own proprietary implementation

Unicode Standardization (2010)

In 2010, Unicode 6.0 officially incorporated Emoji into the standard, marking a milestone in Emoji history. From then on, Emoji was no longer a proprietary implementation of various platforms but had a unified encoding standard.

Unicode Emoji Development Timeline:

Unicode Encoding Principles of Emoji

Code Points and Representation

Each Emoji has a unique Unicode code point. For example:

Most Emoji are located in Unicode's Supplementary Multilingual Plane (SMP, U+10000-U+1FFFF) and require 4-byte UTF-8 encoding.

Combining Emoji: Zero Width Joiner (ZWJ)

The Zero Width Joiner (U+200D) is the "magic glue" in the Emoji world, capable of combining multiple Emoji into a new graphic:

ZWJ Sequence Encoding Example:

Taking "👨‍👩‍👧‍👦" (family) as an example, its complete encoding is:

👨 (U+1F468) + ZWJ (U+200D) + 👩 (U+1F469) + ZWJ (U+200D) + 👧 (U+1F467) + ZWJ (U+200D) + 👦 (U+1F466)

This seemingly single Emoji is actually composed of 7 code points!

Skin Tone Modifiers

Unicode 8.0 introduced 5 skin tone modifiers (Fitzpatrick skin type classification), allowing users to choose different skin tones for human Emoji:

Usage: Base Emoji + Skin Tone Modifier = Emoji with Skin Tone

👋 (U+1F44B) + 🏽 (U+1F3FD) = 👋🏽

Flag Emoji: Regional Indicator Symbols

Flag Emoji are implemented using Regional Indicator Symbols, where each letter corresponds to a special Unicode character:

Flags are formed by combining two regional indicators:

🇨 (U+1F1E8) + 🇳 (U+1F1F3) = 🇨🇳 (China)
🇺 (U+1F1FA) + 🇸 (U+1F1F8) = 🇺🇸 (USA)
🇯 (U+1F1EF) + 🇵 (U+1F1F5) = 🇯🇵 (Japan)

Emoji Categories and Common Expressions

Official Classification System

The Unicode Consortium categorizes Emoji into the following main categories:

Commonly Used Emoji in Development

In technical documentation and development scenarios, the following Emoji are frequently used:

Want to quickly find and copy Emoji? Use the Emoji Picker, which supports category browsing and keyword search.

Cross-Platform Display Differences

Why Does the Same Emoji Look Different on Different Platforms?

Unicode only defines the semantics of Emoji (e.g., U+1F600 represents "grinning face") but does not specify the visual design. Each platform is free to implement its own Emoji style:

Real-World Impact of Display Differences

These differences can sometimes lead to communication misunderstandings:

Solutions for Ensuring Consistency

1. Use Twemoji: Twitter's open-source Emoji library providing unified SVG/PNG resources
2. Use Emoji Fonts: Such as Noto Color Emoji
3. Use Image Replacements: Convert Emoji to image resources

Emoji Development Tips

Handling Emoji in JavaScript

Getting the Code Point of an Emoji:

const emoji = '😀';
const codePoint = emoji.codePointAt(0).toString(16).toUpperCase();
console.log(`U+${codePoint}`);

Correctly Calculating String Length with Emoji:

const str = 'Hello😀World';

str.length;
[...str].length;

const segmenter = new Intl.Segmenter('en', { granularity: 'grapheme' });
[...segmenter.segment(str)].length;

Detecting if a String Contains Emoji:

function containsEmoji(str) {
  const emojiRegex = /\p{Emoji}/u;
  return emojiRegex.test(str);
}

Styling Emoji in CSS

.emoji {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 1.5em;
}

.emoji-grayscale {
  filter: grayscale(100%);
}

Database Storage Considerations

Storing Emoji requires a character set that supports 4-byte UTF-8:

MySQL Configuration:

ALTER DATABASE mydb CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
ALTER TABLE mytable CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

Connection String Setting:

mysql://user:pass@host/db?charset=utf8mb4

Using Emoji in React

function EmojiButton({ emoji, label, onClick }) {
  return (
    <button 
      onClick={onClick}
      aria-label={label}
      role="img"
    >
      {emoji}
    </button>
  );
}

Accessibility Considerations for Emoji

Screen Reader Support

Add appropriate ARIA labels to Emoji to ensure visually impaired users can understand the content:

<span role="img" aria-label="thumbs up">👍</span>

Avoid Overuse

• Don't replace critical information with Emoji
• Use cautiously in formal documentation
• Consider cultural differences (some Emoji have different meanings in different cultures)

Color Contrast

Some Emoji may not be clear enough on light or dark backgrounds, so pay attention to contrast issues.

Recommended Tools

The following tools can help you use Emoji more efficiently in your daily work:

• Emoji Picker - Quickly browse, search, and copy Emoji with category filtering and recent usage history
• ASCII & Unicode Converter - View Unicode code points and convert between ASCII and Unicode characters

Summary

Emoji has evolved from simple emoticons to an essential part of digital communication. Understanding the underlying Unicode encoding principles and technical implementation is crucial for developers:

1. Historical Evolution: From proprietary implementations by Japanese mobile carriers to international Unicode standards
2. Encoding Principles: Based on Unicode code points, supporting ZWJ combinations, skin tone modifiers, and regional indicators
3. Platform Differences: Each platform has its own visual implementation, requiring consistency solutions
4. Development Practices: Properly handle string length, database storage, and accessibility

Mastering this knowledge will enable you to use Emoji more confidently in your projects and provide users with richer interactive experiences. Whether in chat applications, social platforms, or technical documentation, Emoji can make your content more vivid and engaging.