Emoji Picker & Unicode Lookup

You need the checkmark emoji for a CLI tool’s success message — but not the green one (✅ U+2705), the plain one (✓ U+2713). You Google “checkmark unicode” and get a list of 8 variations with no visual comparison. Or you need the CSS content value for a custom bullet point and can’t remember if it’s "\2022" or "\2023". You need one place that shows the emoji, its codepoint, HTML entity, CSS value, and JS escape — all at once.

Why This Tool (Not the OS Emoji Picker)

Your OS emoji picker (Win+. or Cmd+Ctrl+Space) copies the emoji but gives you zero technical data. This tool shows the Unicode codepoint, HTML entity, CSS content value, JavaScript escape, and UTF-8 hex bytes for every emoji — exactly what developers need when embedding emojis in code, HTML, or CSS. Everything runs in your browser; no data is sent anywhere.

What Is This Tool?

The Emoji Picker & Unicode Lookup lets you browse and search 210+ carefully curated emojis across 8 categories — Smileys, Animals, Food, Travel, Activities, Objects, Symbols, and Flags. Click any emoji to instantly copy it and inspect its complete Unicode technical information:

• Unicode Codepoint — e.g. U+1F600
• HTML Entity — e.g. 😀
• CSS Content Value — e.g. "\1F600"
• JavaScript ES6 Escape — e.g. \u{1F600}
• UTF-8 Hex Bytes — e.g. F0 9F 98 80

All processing happens in your browser. Nothing is uploaded to any server.

Understanding Unicode Codepoints

Every character in the Unicode standard is assigned a unique number called a codepoint. Codepoints are written as U+ followed by a hexadecimal number:

Emojis can be a single codepoint like 😀 (U+1F600), or a sequence of codepoints joined together. The variation selector U+FE0F tells renderers to display a character as an emoji rather than plain text. Country flags like 🇺🇸 combine two Regional Indicator symbols.

Unicode is organized into planes. The Basic Multilingual Plane (BMP, U+0000–U+FFFF) covers most common characters. Emojis mostly live in the Supplementary Multilingual Plane (SMP, U+10000–U+1FFFF), which requires 4 bytes in UTF-8.

HTML Entities for Emojis

You can embed emojis in HTML using numeric character references in hexadecimal form:

<!-- Grinning face 😀 -->
<span>&#x1F600;</span>

<!-- Red heart ❤️ — includes variation selector for emoji rendering -->
<span>&#x2764;&#xFE0F;</span>

<!-- Coffee ☕ -->
<span>&#x2615;</span>

The format &#xHEXCODE; is supported in all modern browsers. Named HTML entities like ♥ exist only for a small set of characters — emojis require numeric references.

HTML entities are useful when you:

• Need to include an emoji in a file with non-UTF-8 encoding
• Want to avoid copy-paste encoding issues in source code
• Are embedding emoji in XML documents that require escaped characters

CSS Content Property with Emojis

To insert emojis via CSS pseudo-elements, use the content property with the Unicode escape \HEXCODE:

/* Single emoji (😀 U+1F600) */
.icon::before {
  content: "\1F600";
}

/* Multiple codepoints (❤️ = U+2764 + U+FE0F) */
.heart::before {
  content: "\2764\FE0F";
}

/* US flag (🇺🇸 = U+1F1FA + U+1F1F8) */
.us-flag::before {
  content: "\1F1FA\1F1F8";
}

Unlike HTML entities, CSS unicode escapes use a backslash \ prefix with no semicolon. Each codepoint is written as \HEXCODE with a space or the next character automatically terminating it.

Note: Emoji rendering in CSS content depends on the OS and font stack. On most modern systems with emoji fonts (Noto Emoji, Apple Color Emoji, Segoe UI Emoji), this works as expected. Add font-family: "Noto Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif; to guarantee emoji rendering.

JavaScript Strings and Emoji Escapes

JavaScript uses UTF-16 internally. Emojis in the Supplementary Multilingual Plane (U+10000+) are represented as surrogate pairs — two 16-bit code units. This explains why "😀".length === 2 in JavaScript even though it’s one visible character.

The modern \u{HEXCODE} escape (ES2015+) handles any codepoint cleanly:

// ES6 unicode escape — recommended
const grin = "\u{1F600}";      // 😀
const heart = "\u{2764}\u{FE0F}";   // ❤️
const usFlag = "\u{1F1FA}\u{1F1F8}"; // 🇺🇸

console.log(grin.length);           // 2 (surrogate pair, but renders correctly)
console.log([...grin].length);      // 1 (spread iterates by codepoint)
console.log(grin.codePointAt(0));   // 128512 (0x1F600)

The older \uXXXX syntax only handles the BMP (U+0000–U+FFFF). For supplementary characters you’d need surrogate pairs like "\uD83D\uDE00" for 😀 — the \u{1F600} form is far cleaner.

Iterating Over Emojis Correctly

const text = "Hello 😀!";

// Wrong — splits surrogate pairs
for (let i = 0; i < text.length; i++) {
  console.log(text[i]); // Outputs garbage for 😀
}

// Correct — iterates by Unicode codepoint
for (const char of text) {
  console.log(char); // 'H', 'e', 'l', 'l', 'o', ' ', '😀', '!'
}

// Also correct — spread into array
const chars = [...text]; // ['H', 'e', 'l', 'l', 'o', ' ', '😀', '!']

UTF-8 Byte Encoding

UTF-8 is the dominant encoding for web content. It’s variable-width: each Unicode codepoint uses 1–4 bytes.

Most emojis are in the Supplementary Multilingual Plane (U+10000+) and require 4 bytes. For example, 😀 (U+1F600):

U+1F600 = 0001 1111 0110 0000 0000 (21 bits)

Byte 1: 11110_000 = F0  (top 3 bits: 000)
Byte 2: 10_011111 = 9F  (next 6 bits: 011111)
Byte 3: 10_011000 = 98  (next 6 bits: 011000)
Byte 4: 10_000000 = 80  (bottom 6 bits: 000000)

UTF-8: F0 9F 98 80

Some simpler characters use fewer bytes — ☕ (U+2615) uses 3 bytes: E2 98 95.

The UTF-8 bytes shown by this tool are useful for:

• Debugging encoding issues in databases, APIs, or file systems
• Writing binary protocols that embed emoji
• Verifying character encoding in byte buffers
• Understanding why Buffer.byteLength("😀") returns 4 in Node.js

Variation Selectors and ZWJ Sequences

Many emojis consist of multiple codepoints:

Variation Selector-16 (U+FE0F): Appended to certain characters to force emoji-style rendering. For example, ✈ (U+2708) renders as text in some contexts; ✈️ (U+2708 + U+FE0F) always renders as a colorful emoji.

Zero Width Joiner (ZWJ, U+200D): Combines emojis into a single glyph on supported platforms. For example, 👨‍💻 is 👨 + ZWJ + 💻 (man + zero width joiner + laptop).

Regional Indicator Symbols: Flag emojis like 🇯🇵 are two Regional Indicator letters: 🇯 (U+1F1EF) + 🇵 (U+1F1F5).

When this tool shows multiple codepoints (e.g., U+2708 U+FE0F), each one is listed individually so you can use them independently or together in your HTML, CSS, or JavaScript.

Emoji in URLs and HTTP

Emojis must be percent-encoded in URLs. The emoji 😀 (UTF-8: F0 9F 98 80) becomes %F0%9F%98%80:

https://example.com/search?q=%F0%9F%98%80

In modern APIs, you can typically use the raw emoji in JSON bodies (UTF-8 encoded), but URL query parameters and path segments require percent-encoding.

Frequently Asked Questions

Why does "😀".length equal 2 in JavaScript? JavaScript strings are UTF-16. Emojis above U+FFFF (most modern emojis) are encoded as surrogate pairs — two 16-bit code units — so .length counts code units, not visible characters. Use [...str].length or the Intl.Segmenter API to count actual grapheme clusters.

What is the difference between \u{1F600} and \uD83D\uDE00 in JavaScript? Both represent 😀 (U+1F600). \u{XXXX} (ES6+) is the clean, readable form that takes the actual codepoint. \uD83D\uDE00 is the older surrogate pair encoding in UTF-16 — \uD83D is the high surrogate and \uDE00 is the low surrogate. Always use \u{XXXX} in new code.

Can I use emojis in CSS class names or IDs? While technically valid in CSS selectors if properly escaped, it’s not recommended. Stick to ASCII for class names and IDs to avoid encoding issues across different tools.

Why do emojis look different on different platforms? Each platform (Apple, Google, Microsoft, etc.) designs its own emoji glyphs. The Unicode standard only specifies the character’s name and codepoint, not its visual appearance. U+1F600 is always “GRINNING FACE” but how it’s drawn is up to the vendor.

Does this tool work offline? Yes. The entire emoji dataset is embedded in the JavaScript bundle. After the initial page load, no network requests are made.