Emoji Picker

Examples

Browse categories or search, and click an emoji to select it. Category switches, hover, and press are animated (reduced-motion aware).

😀👋🐶🍎🚗⚽💻❤🏁⭐

Smileys & Emotion

Uniform rendering (the render seam)

Native emoji look different on every OS. By default the picker renders uniform Twemoji SVGs (lazily loaded, one small file per glyph) so everyone sees the same set — WhatsApp's approach. Rendering flows through a single emojiRenderer seam (codepoint → ReactNode), so you can swap to native glyphs, a self-hosted mirror, or another set (Noto/Fluent/Lottie) with one prop — the data and the picker are untouched.

Uniform Twemoji (default) — uncheck for OS-native glyphs

😀👋🐶🍎🚗⚽💻❤🏁⭐

Smileys & Emotion

import { EmojiPicker, nativeEmojiRenderer } from '@refraction-ui/react-emoji-picker'

// Swap the uniform Twemoji default for OS-native glyphs — data + picker unchanged.
<EmojiPicker emojiRenderer={nativeEmojiRenderer} />

// Or self-host the uniform assets (no public CDN):
<EmojiPicker twemojiBaseUrl="/emoji" />

Attribution: Twemoji graphics are © Twitter and the Twemoji contributors, licensed CC-BY 4.0. Apps shipping the default Twemoji renderer must preserve this attribution.

Stickers

The ⭐ tab renders stickerSets. A small bundled starter pack ships by default (one sticker self-animates via SMIL to prove the animated path); host or future packs plug in through the same prop, and the stickerRenderer seam supports svg, image (static or animated WebP), and lottie (supply a player). Pass stickerSets={[]} to hide the tab.

😀👋🐶🍎🚗⚽💻❤🏁⭐

Smileys & Emotion

Open the ⭐ tab. The starter pack ships bundled; the pulsing heart proves the animated (SMIL) render path. Host packs plug in via the stickerSets prop.

Installation

Usage

import { EmojiPicker } from '@refraction-ui/react-emoji-picker'

export function MyComponent() {
  // Uniform Twemoji glyphs by default; onSelect gives the full entry.
  return <EmojiPicker onSelect={(e) => console.log(e.emoji, e.shortcode)} />
}

Props