Emoji Search & Usage: Unicode to Cross-Platform Guide

TextText processing tools

Unicode Encoding of Emoji

Encoding Ranges

Range Unicode block Examples
U+1F600 - U+1F64F Emoticons 😀😁😂
U+1F300 - U+1F5FF Misc Symbols & Pictographs 🎨🌟🌀
U+1F680 - U+1F6FF Transport & Map 🚀🚗🚲
U+1F900 - U+1F9FF Supplemental Symbols & Pictographs 🤖🦊🦁
U+1FA00 - U+1FA6F Chess Symbols 🪀🪁🪂
U+1FA70 - U+1FAFF Symbols & Pictographs Extended-A 🪩🪫🪬

Encoding Notation

// Unicode code points
console.log('\u{1F600}');  // 😀
console.log('\u{1F680}');  // 🚀

// Looking up a code point
console.log('😀'.codePointAt(0).toString(16));  // "1f600"

// Creating from a code point
String.fromCodePoint(0x1F600);  // "😀"
String.fromCodePoint(0x1F680);  // "🚀"

UTF-8 Encoding Length

// An Emoji takes 4 bytes in UTF-8
new TextEncoder().encode('😀').length;  // 4

// But .length returns 2 (surrogate pair)
'😀'.length;  // 2

// The correct way to count characters
[...'😀😁😂'].length;  // 3

Skin Tone Modifiers

5 Skin Tones

U+1F3FB  🏻  Light Skin Tone
U+1F3FC  🏼  Medium-Light Skin Tone
U+1F3FD  🏽  Medium Skin Tone
U+1F3FE  🏾  Medium-Dark Skin Tone
U+1F3FF  🏿  Dark Skin Tone

How They Combine

Base Emoji + skin tone modifier = Emoji with skin tone

👨 + 🏽 = 👨🏽
👋 + 🏿 = 👋🏿

// Combining in JavaScript
const base = '\u{1F468}';  // 👨
const modifier = '\u{1F3FD}';  // 🏽
const result = base + modifier;  // 👨🏽

// Splitting apart
[...'👨🏽'];  // ['👨', '🏽']

Zero Width Joiner (ZWJ) Sequences

ZWJ (U+200D) combines multiple Emoji into one:

👨 + ZWJ + 🏭 = 👨‍🏭  (man factory worker)
👩 + ZWJ + 💻 = 👩‍💻  (woman technologist)
👨 + ZWJ + ❤️ + ZWJ + 👨 = 👨‍❤️‍👨  (couple with heart: man, man)

Family Combinations

👨 + ZWJ + 👩 + ZWJ + 👦 = 👨‍👩‍👦  (family of three)
👨 + ZWJ + 👨 + ZWJ + 👧 = 👨‍👨‍👧  (two dads and a daughter)

Flag Combinations

🇨 + 🇭 = 🇨🇭  (Swiss flag)
🇯 + 🇵 = 🇯🇵  (Japanese flag)
🇨 + 🇳 = 🇨🇳  (Chinese flag)

Flag Emoji are composed of two Regional Indicator symbols.

Cross-Platform Display Differences

Emoji Apple Google Microsoft Samsung Twitter
😀 😁-style 😁-style 😁-style 😁-style 😁-style
🔫 Water pistol Water pistol Real gun Water pistol Water pistol

The same Emoji looks different on different platforms, but the Unicode code point is identical.

Tips to Avoid Misunderstandings

  1. Avoid ambiguous Emoji: 🔫 (gun/water pistol), 🍆 (vegetable/innuendo)
  2. Test multi-platform rendering: Use the Emoji Search tool to preview how different platforms render an Emoji
  3. Use sparingly in professional contexts: Avoid them in formal emails/documents
  4. Watch compatibility of combined sequences: ZWJ sequences may show as separate Emoji on older systems

Using Emoji in Code

HTML

<!-- Direct usage -->
<p>Welcome aboard 🚀</p>

<!-- Unicode escape -->
<p>Welcome aboard &#x1F680;</p>

<!-- CSS content -->
<style>
  .icon::before { content: '\1F680'; }
</style>

JavaScript

// Direct usage (recommended)
const rocket = '🚀';

// Unicode escape
const rocket = '\u{1F680}';

// Inside a string
const message = `Deployment successful ${rocket}`;

// As object keys (not recommended, but works)
const icons = { '🚀': 'rocket', '🎨': 'art' };

Python

# Direct usage
rocket = '🚀'

# Unicode escape
rocket = '\U0001F680'

# In an f-string
message = f'Deployment successful {rocket}'

Database Storage

-- MySQL: the utf8mb4 character set is required
CREATE TABLE messages (
  content VARCHAR(500) CHARACTER SET utf8mb4
);

-- ❌ The utf8 character set cannot store Emoji
-- ✅ The utf8mb4 character set can store Emoji

Searching Emoji with ToolsKu

  1. Open the Emoji Search tool
  2. Type a keyword (Chinese or English), e.g. "happy"
  3. Browse the matching Emoji list
  4. Click to copy to the clipboard
  5. Browse by category is also supported

Search Examples

Keyword Results
happy 😄😁😆😊🥰
rocket 🚀🚁🛸
cat 🐱🐈🐈‍⬛
food 🍕🍔🍜🍣🍰
work 💼💻📊📋✏️

Emoji Regular Expressions

Matching All Emoji

// Emoji regex (simplified)
const emojiRegex = /\p{Emoji_Presentation}/gu;

// A more complete version (includes modifiers and ZWJ sequences)
const fullEmojiRegex = /\p{Extended_Pictographic}(\u{FE0F})?(\u{1F3FB}-\u{1F3FF})?(\u{200D}\p{Extended_Pictographic}(\u{FE0F})?(\u{1F3FB}-\u{1F3FF})?)*/gu;

// Usage
const text = 'Hello 😀 World 🚀';
const emojis = text.match(fullEmojiRegex);
// ["😀", "🚀"]

Removing Emoji from Text

function removeEmoji(text: string): string {
  return text.replace(/\p{Emoji_Presentation}/gu, '');
}

removeEmoji('Hello 😀 World 🚀');  // "Hello  World "

Counting Emoji

function countEmoji(text: string): number {
  const matches = text.match(/\p{Emoji_Presentation}/gu);
  return matches ? matches.length : 0;
}

FAQ

Why does an Emoji show as a box □?

  • Font doesn't support it: The system lacks an Emoji font
  • Wrong character set: The database/file uses UTF-8 instead of UTF-8MB4
  • Outdated version: New Emoji require a fairly recent OS version

Why isn't an Emoji's .length equal to 1?

'😀'.length          // 2 (surrogate pair)
'👨🏽'.length         // 4 (base + modifier, 2 each)
'👨‍👩‍👦'.length         // 8 (3 Emoji + 2 ZWJ)
[...'👨‍👩‍👦'].length     // 5 (correctly split)

// Safe string length
function safeLength(str: string): number {
  return [...str].length;
}

How do I get the latest Emoji?

Emoji are updated once a year (with Unicode version releases). New Emoji require:

  • An OS update (iOS/Android/Windows)
  • A browser update
  • A font update (Noto Color Emoji)

Summary

Emoji are part of the Unicode standard. Understanding how they are encoded (code points, modifiers, ZWJ sequences) helps you handle cross-platform compatibility correctly. Key takeaways: store databases with utf8mb4, count characters with [...str], and watch out for cross-platform display differences. The ToolsKu Emoji Search tool helps you find the Emoji you need fast.

#Emoji#表情符号#Unicode#搜索#教程