Emoji & Symbol Font Support

How Emoji Fonts Work

Standard OpenType fonts store glyph outlines as monochrome vector paths in the glyf or CFF table. Color emoji fonts extend this model by embedding color data through one of four additional tables, each representing a different approach to storing full-color glyph imagery.

Emoji as a formal Unicode category emerged from Japanese mobile carrier characters standardized around 2010 in Unicode 6.0. At that point, operating system vendors already had proprietary emoji implementations and needed a way to extend the OpenType format without breaking existing font rendering pipelines. Each major vendor developed its own color font table independently, resulting in the fragmented landscape that persists today. The W3C and OpenType working groups have since standardized COLRv1 as a forward-looking format, but the installed base of older OS versions means all four formats remain relevant.

Platform-Specific Emoji Rendering

Each major platform maintains its own emoji design language. The differences go beyond superficial color choices — expressions, proportions, and interpretations of the same Unicode character can vary enough to change emotional tone. Designs update with OS releases, which means a user on iOS 16 may see a different face than a user on iOS 17, even on the same device family.

Achieving Cross-Platform Consistency

If visual consistency matters for your application — a product listing where the rocket emoji should look the same in A/B test screenshots, or a marketing campaign where a specific emoji expression is part of brand voice — the only reliable solution is image replacement. This means substituting native emoji characters with images from a standardized open-source emoji set, bypassing the OS font entirely.

Three open-source emoji libraries dominate this space:

<!-- CDN: Load Twemoji via jsDelivr -->
<script
  src="https://cdn.jsdelivr.net/npm/@twemoji/api@latest/dist/twemoji.min.js"
  crossorigin="anonymous"
></script>

<script>
  // Replace all emoji in the document body
  twemoji.parse(document.body, {
    folder: 'svg',
    ext: '.svg',
    base: 'https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/'
  });

  // Or target a specific element
  const container = document.getElementById('emoji-container');
  twemoji.parse(container);
</script>

CSS Emoji Font-Family Stack

Even without JavaScript image replacement, you can improve emoji rendering by explicitly listing system emoji fonts in your CSS font-family stack. The order matters: the browser walks the stack from left to right, using the first font that contains a given character. Emoji fonts must typically appear near the end, after your primary typeface.

/* Full emoji-inclusive font-family stack */
body {
  font-family:
    'Inter',                /* Primary web font */
    system-ui,              /* OS default UI font */
    -apple-system,          /* Apple legacy alias */
    'Segoe UI',             /* Windows */
    'Segoe UI Emoji',       /* Windows emoji */
    'Noto Color Emoji',     /* Android / Linux */
    'Apple Color Emoji',    /* macOS / iOS */
    'EmojiOne Color',       /* Linux fallback */
    sans-serif;
}

/* Or as a utility class for emoji-heavy content */
.emoji-text {
  font-family:
    'Apple Color Emoji',
    'Noto Color Emoji',
    'Segoe UI Emoji',
    'Twemoji Mozilla',
    sans-serif;
}

Custom Emoji Implementation

For production applications, the two most practical implementation approaches are Twemoji via CDN script tag and npm package integration for build-time control.

# Install the maintained fork
npm install @twemoji/api

# Or for React-specific component
npm install react-twemoji

import Twemoji from 'react-twemoji';

// Wrap any text containing emoji
export function ProductDescription({ text }: { text: string }) {
  return (
    <Twemoji options={{ className: 'emoji-inline' }}>
      <p>{text}</p>
    </Twemoji>
  );
}

/* CSS: Size emoji to match surrounding text */
.emoji-inline {
  height: 1.2em;
  width: 1.2em;
  margin: 0 0.05em 0 0.1em;
  vertical-align: -0.1em;
  display: inline-block;
}

// Manual OpenMoji implementation
// OpenMoji filenames are Unicode codepoints in uppercase hex

function getOpenMojiUrl(emoji: string): string {
  const codePoint = emoji.codePointAt(0)?.toString(16).toUpperCase();
  return `https://cdn.jsdelivr.net/npm/[email protected]/color/svg/${codePoint}.svg`;
}

// Usage
const src = getOpenMojiUrl('😀'); // → .../1F600.svg

// As an accessible img element
<img
  src={src}
  alt="Grinning face"
  role="img"
  aria-label="Grinning face"
  width="24"
  height="24"
/>

Symbol Fonts vs. SVG Icons

Emoji are a subset of a broader category: symbol fonts. Before SVG icons became practical, developers used symbol fonts like Font Awesome, Material Icons, and IcoMoon to render scalable icons via CSS — mapping arbitrary symbols to Private Use Area Unicode codepoints and rendering them through custom font files.

This approach has significant drawbacks compared to modern SVG, but symbol fonts still appear in legacy codebases. Knowing when each is appropriate remains a practical skill.

Emoji Accessibility

Screen readers announce emoji by their Unicode standard name. The Unicode character U+1F600 (Grinning Face) is announced as "grinning face" by VoiceOver and NVDA. Most of the time this is adequate — but when emoji convey specific meaning, or when they are used decoratively and clutter the audio experience, explicit accessibility markup is warranted.

<!-- Emoji with contextual meaning -->
<span role="img" aria-label="Task completed">✅</span>

<!-- Screen reader announces: "Task completed, image"
     instead of the generic: "check mark button, image" -->

<!-- Status indicator in a table cell -->
<td>
  <span role="img" aria-label="Payment failed">❌</span>
  Order #4821
</td>

<!-- Decorative emoji hidden from screen readers -->
<h2>
  <span aria-hidden="true">✨ </span>
  New Features This Week
  <span aria-hidden="true"> ✨</span>
</h2>

<!-- Screen reader announces: "New Features This Week, heading level 2"
     The sparkles are ignored entirely -->

<!-- Emoji decoration in a greeting paragraph -->
<p>
  Welcome back! <span aria-hidden="true">👋</span>
  Your dashboard is ready.
</p>

<!-- Family emoji (ZWJ sequence) — screen reader behavior varies -->
<span role="img" aria-label="Family with two parents and child">👨‍👩‍👧</span>

<!-- Skin-tone modifier — always provide explicit label -->
<span role="img" aria-label="Thumbs up, medium skin tone">👍🏽</span>

<!-- Flag emoji (regional indicator sequence) -->
<span role="img" aria-label="Japan flag">🇯🇵</span>

// Twemoji generates <img> with auto alt text:
// <img src="1f600.svg" alt="😀" class="emoji" ...>

// Override alt text per emoji in your own implementation:
function emojiToImg(char: string, altText: string): string {
  const codepoint = char.codePointAt(0)?.toString(16);
  return `<img
    src="https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/${codepoint}.svg"
    alt="${altText}"
    width="20"
    height="20"
    loading="lazy"
  />`;
}

// Usage: precise alt text for context
emojiToImg('✅', 'Step completed');