Free SVG Emoji Icons — Twemoji, Noto, Fluent Emoji & More

Twemoji (Twitter/X) uses a bold, rounded cartoon style with CC-BY 4.0 license — widely recognised and battle-tested at scale. Noto Emoji (Google) is more literal and detailed, Apache 2.0 licensed, designed to cover every Unicode character consistently. Fluent Emoji (Microsoft) is the most modern of the three — a rich 3D-style set available in colored, flat, and high-contrast variants, MIT licensed. OpenMoji is community-made and CC-BY-SA 4.0, meaning derivative works must share the same license. For most projects Twemoji or Noto are the safest defaults; Fluent Emoji if you want a more contemporary look.

All three are from Microsoft and MIT licensed. Fluent Emoji is the full colored 3D style with gradients and depth. Fluent Emoji Flat uses the same shapes simplified to solid flat colors — better for smaller sizes and dark backgrounds. Fluent Emoji High Contrast is a monochrome version designed for accessibility and WCAG compliance. Use Flat or High Contrast when you need the emoji to work in constrained color environments.

Twemoji: CC-BY 4.0 — free for commercial use, credit Twitter/X in your attribution. Noto and Firefox OS Emoji (fxemoji): Apache 2.0 — free commercially, include the license file. Fluent Emoji and Fluent Emoji Flat: MIT — free commercially, include the license notice. EmojiOne: CC-BY 4.0 — credit EmojiOne. OpenMoji: CC-BY-SA 4.0 — any modified version must be published under the same license (ShareAlike). If you need a set with no attribution requirement at all, none of these qualify — but MIT and Apache sets require only a license file inclusion, not visible on-screen credit.

Unicode emoji are characters — rendered by the operating system using the system font (Apple Color Emoji on iOS/macOS, Noto Emoji on Android, Segoe UI Emoji on Windows). They look different on every platform and you cannot control their size precisely. SVG emoji are image files. They render identically everywhere, scale to any size without blurring, and can be styled with CSS. Use SVG emoji when visual consistency across platforms matters.

The fastest path is the Iconify React package: install @iconify/react, then use with any emoji from any of these sets. For self-hosted use, download the SVG from the pack page and import it as a React component using your bundler's SVG import transform (SVGR for Vite/webpack). Both approaches give you a fully typed, accessible component.

Inline SVG is not reliably supported in email clients. The recommended approach is to export the SVG to a PNG at 2x the display size (e.g. 64px PNG for a 32px display emoji), host the PNG on a CDN, and use a standard tag with a descriptive alt attribute. Set width and height attributes on the img tag so the layout holds when images are blocked.

Noto Emoji (Google) is the most complete at over 3,700 glyphs — it was specifically designed to cover every Unicode emoji with no tofu (missing glyph boxes). Twemoji and Fluent Emoji each cover 3,100–3,700 and are updated regularly with new Unicode releases. OpenMoji also aims for full coverage. All four are sufficient for standard emoji use.

When an emoji conveys meaning, add role="img" and aria-label="[description]" to the img or svg element — for example aria-label="Thumbs up". When the emoji is decorative and adjacent text carries the meaning, set aria-hidden="true" to hide it from screen readers. Never use an emoji as the sole label for an interactive element like a button.

CC-BY-SA 4.0 (ShareAlike) means two things: you must credit OpenMoji visibly (e.g. "Emoji by OpenMoji — CC BY-SA 4.0"), and if you distribute a modified version of their artwork, that derivative must also be published under CC-BY-SA. Using unmodified OpenMoji SVGs in a website or app is fine as long as you include the attribution. If copyleft is a concern, use Twemoji (CC-BY, no ShareAlike) or Fluent Emoji / Noto (MIT / Apache, no ShareAlike).

Load the emoji SVG on demand using the Iconify API or self-hosted pack files. Store the emoji identifier (e.g. "twemoji:heart") in your database rather than the SVG itself to keep storage small. Render the SVG client-side at 20–24px for inline reactions, 32–40px for reaction pickers. Group emoji by Unicode category (smileys, people, animals, food, travel, objects, symbols, flags) to build a standard picker layout.