twitter/twemoji

★ 17,642HTMLAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((twemoji))
    What it does
      Replace system emoji
      Cross-platform images
      DOM safe parsing
    Tech Stack
      JavaScript
      PNG images
      SVG images
    Use Cases
      Chat apps
      Social feeds
      Older devices
    Options
      Custom base URL
      Image size
      CSS class

mindmap root((twemoji)) What it does Replace system emoji Cross-platform images DOM safe parsing Tech Stack JavaScript PNG images SVG images Use Cases Chat apps Social feeds Older devices Options Custom base URL Image size CSS class

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add consistent emoji to a chat app so all users see identical images regardless of iPhone, Android, or Windows.

USE CASE 2

Replace system emoji in a social feed or comment thread to prevent visual mismatch between users.

USE CASE 3

Display emoji on older browsers or devices that lack a built-in emoji font.

Tech stack

JavaScriptHTMLPNGSVG

Getting it running

Difficulty · easy Time to first run · 5min

The graphics require CC-BY 4.0 attribution to Twitter wherever they are displayed.

The emoji artwork is licensed under CC-BY 4.0, which requires you to credit Twitter when displaying the images.

In plain English

Twemoji is a JavaScript library that swaps the emoji characters in a webpage for image versions, so every visitor sees the same picture no matter what device or browser they are using. Normally emoji are rendered by the operating system's own font, which means a smiley face on an iPhone looks different from the same code point on Android, Windows, or an older device that has no emoji font at all. Twemoji solves that by scanning your text, finding the emoji, and replacing each one with a small image tag pointing at Twitter's emoji artwork. You drop the library into a page with a single script tag and call its main function, twemoji.parse. If you hand it an HTML element it walks the DOM, replaces emoji inside text nodes with image tags, and leaves the surrounding nodes and event listeners untouched, this DOM-based mode is recommended because it avoids the safety pitfalls of rewriting raw HTML. There is also a string-parsing mode for legacy use. An options object lets you change the base URL, the file extension (PNG by default, SVG via a folder option), the image size, and the CSS class applied to each tag, or pass a callback that builds the image URL itself. Small helper functions convert between hexadecimal code points and JavaScript surrogate pairs. You would use Twemoji when consistent emoji appearance matters: a chat app, a social feed, a comment thread, anywhere visual mismatch between users would feel broken. The library targets the Unicode emoji set recommended for general interchange and does not support custom emoji. The graphics are licensed under CC-BY 4.0 and require attribution. It is distributed as static assets plus a JavaScript file.

Copy-paste prompts

Prompt 1

Add Twemoji to my web chat app so all users see the same emoji. Show me the script tag setup and how to call twemoji.parse on a message container div.

Prompt 2

Configure Twemoji to serve SVG images instead of the default PNG format and set a custom base URL for self-hosted assets.

Prompt 3

Write a React component that wraps user-generated text and uses Twemoji's DOM parsing mode to replace emoji with images safely.

Prompt 4

How do I limit Twemoji to only replace emoji inside a specific section of the page, not the whole document?

Open on GitHub → Explain another repo

← twitter on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.