Emoji picker

Copy and paste emojis easily and get the unicode and code points value of each emoji.

Enable JavaScript to use the interactive tool. The guide below explains how it works.

Emoji Picker

1. What the tool does

The Emoji Picker is a comprehensive, searchable database of the entire Unicode emoji library. Unlike standard OS-level emoji pickers, which are often limited to basic insertion, this tool is designed for developers, designers, and content creators who need both the visual emoji and its underlying technical metadata.

It provides a rich interface to browse emojis by category (Smileys, Animals, Food, Activities, etc.) and offers powerful fuzzy search capabilities. For every emoji, the tool exposes critical technical information including the raw Unicode character, the hexadecimal code point, and the JavaScript-compatible Unicode escape sequence (e.g., \uD83D\uDE00).

2. Why someone uses it

While emojis are ubiquitous, working with them programmatically or in professional design workflows can be challenging.

Users turn to this tool to:

• Simplify Development: Quickly find the correct Unicode escape sequence for use in CSS, JavaScript, or C# codebases where raw emoji characters might cause encoding issues.
• Enhance UI/UX Design: Designers use it to copy-paste symbols into design tools like Figma or Sketch without needing to remember complex keyboard shortcuts.
• Cross-Platform Compatibility: By seeing the code point, developers can ensure they are using emojis that are widely supported across different operating systems and Unicode versions.
• Discover Content: The keyword-based search allows users to find emojis based on concepts (e.g., searching "sad" brings up various frowning and crying faces) rather than just names.
• Technical Debugging: Identifying exactly which Unicode version or code point a specific character belongs to when troubleshooting rendering issues on different devices.

3. Step-by-step instructions

The Emoji Picker is designed for speed and technical utility:

1. Browse by Category: Scroll through the main view to see emojis grouped by their official Unicode categories. Each section header (e.g., "Food & Drink") helps you navigate the vast library.
2. Search: Use the search bar at the top for instant filtering.
   • Type a name (e.g., "fire").
   • Type a keyword (e.g., "hot").
   • Type a group name (e.g., "flags").
   • The search uses "fuzzy matching," so it will show relevant results even if you don't have the exact name.
3. Inspect an Emoji: Click on any emoji card in the grid to open the detailed view (if applicable) or to see the expanded information.
4. Extract Information:
   • Visual: Click the emoji itself to copy the raw character to your clipboard.
   • Unicode: Copy the \uXXXX format for use in programming strings.
   • Code Point: Copy the 0xXXXX format for low-level character processing or documentation.
5. Reactive Updates: The search is debounced to 500ms to ensure smooth performance even when searching through the thousands of available emojis.

4. Examples

Searching for "Rocket"

• Search Query: rocket
• Result: 🚀
• Name: Rocket
• Keywords: ["launch", "nasa", "outer space", "rocket", "ship", "space"]
• Unicode Escape: \uD83D\uDE80
• Code Point: 0x1f680

Technical Escape Sequences

If you are writing CSS and want to use an emoji in a content property:

• Emoji: 💡 (Light Bulb)
• Escape sequence found via tool: \ud83d\udca1
• CSS Usage: content: "\d83d\dca1"; (Note: CSS requires slightly different formatting, but the hex values from the tool are the source of truth).

5. FAQs

Q: Is this list up to date with the latest Unicode version? A: The tool uses the unicode-emoji-json library, which is regularly updated to match the latest Unicode Consortium releases (e.g., Unicode 14.0, 15.0).

Q: Why do some emojis look different on my screen? A: Emojis are rendered using the system fonts of your operating system (Windows, macOS, Android, iOS). While the meaning and code point are the same, the artwork varies by platform.

Q: Can I search for emojis in other languages? A: Currently, the search index and keywords are based on the English definitions provided by the Unicode standard and emojilib.

Q: What is a "Fuzzy Search"? A: It means the tool calculates the "distance" between your search query and the emoji's metadata. This allows it to show "Grinning Face" when you search for "Smile."

6. Common mistakes

• Encoding Errors: Copying raw emojis into source code files that are not saved with UTF-8 encoding can lead to corrupted characters (e.g., the dreaded ``). Use the Unicode escape sequence provided by the tool to avoid this.
• Assuming Universal Support: Just because an emoji appears in this picker doesn't mean it will render on an old iPhone or an outdated version of Windows. Always check the code point's introduction version if targeting older systems.
• Confusion between Code Points and Escapes: 0x1f600 is the numerical value; \uD83D\uDE00 is the string representation for JavaScript. Make sure you use the one your specific language requires.

7. Use cases

• Social Media Management: Quickly finding the perfect symbols for captions and bios without using a mobile phone.
• Git Commit Messages: Using "Gitmoji" conventions (e.g., 🐛 for bugs, ✨ for new features) to make commit histories more readable.
• Web Development: Implementing custom emoji pickers or reactions within a web application.
• Markdown Documentation: Finding the right characters to use in README files or technical documentation to highlight sections.

9. Technical Deep Dive: The Unicode Emoji Pipeline

Understanding how emojis are represented in memory is key to using them effectively in technical environments.

UTF-16 and Surrogate Pairs

Most modern programming environments (like JavaScript and C#) use UTF-16 encoding. While basic characters fit into 16 bits, most emojis are in the "Supplementary Planes" of Unicode, requiring 32 bits. In UTF-16, these are represented as Surrogate Pairs—two 16-bit code units. For example, the "Grinning Face" (U+1F600) is represented in JavaScript strings as \uD83D\uDE00. Our tool provides these exact sequences so you don't have to calculate the high and low surrogates manually.

Zero Width Joiners (ZWJ)

Many complex emojis are actually sequences of multiple emojis joined by a hidden character called a "Zero Width Joiner" (U+200D). For example, the "Family: Man, Woman, Girl" emoji is actually: Man + ZWJ + Woman + ZWJ + Girl. The Emoji Picker recognizes these sequences and provides the full Unicode representation, ensuring that when you copy a complex emoji, you get the entire functional sequence, not just the first component.

Skin Tone Modifiers

Emojis supporting different skin tones use the "Fitzpatrick Scale" modifiers (U+1F3FB through U+1F3FF). These are appended to the base emoji. When browsing our picker, you are seeing the base "neutral" versions, but the Unicode technical data provided is the foundation upon which these modifiers are applied in your own application logic.

10. Performance Optimization

Loading and searching through thousands of high-resolution emoji glyphs can be resource-intensive for a browser.

Fuzzy Search Implementation

The tool uses a weighted fuzzy search algorithm. Each emoji has a "weight" assigned to different metadata fields. The name field has the highest weight, followed by keywords, and finally the group. This ensures that a search for "heart" prioritizes the actual ❤️ emoji over an emoji that simply has "heart" in its long-form technical description.

Debouncing and Virtualization

To keep the UI responsive, the search input is "debounced." This means the search doesn't trigger on every keystroke, but waits until you've stopped typing for 500ms. Furthermore, the grid uses efficient rendering techniques to ensure that only the emojis currently visible on your screen are being processed by the DOM at any given time, allowing for smooth scrolling through the thousands of available symbols.