Web Components

Fluent UI Emoji as a framework-less <fluent-emoji> custom element — 3,145 emojis in flat, high-contrast, and modern styles. Works in any page, any framework, no build required.

Install

pnpm add @fluentui-emoji/web-components

Usage

import {defineFluentEmoji, register} from '@fluentui-emoji/web-components';
import {Rocket} from '@fluentui-emoji/web-components/flat';

defineFluentEmoji();   // defines <fluent-emoji>
register(Rocket);      // makes it available by name

<fluent-emoji name="rocket"></fluent-emoji>
<fluent-emoji name="rocket" variant="modern" label="Rocket"></fluent-emoji>

Or skip the registry and set the icon directly:

document.querySelector('fluent-emoji').icon = Rocket;

Only imported icons end up in your bundle. Without label the svg is aria-hidden.