Skin Tones

Try It

@emoji-mart/dataemojibase

Skin tone

DefaultLightMed-LightMediumMed-DarkDark

👋 👍 👏

Default Skin Tone

Set a default skin tone on the provider or per-instance. Values range from 1 (default yellow) to 6.

@emoji-mart/data

import emojiMartData from '@emoji-mart/data';
import { fromEmojiMart } from 'react-emoji-text/adapters/emoji-mart';

const data = fromEmojiMart(emojiMartData);

<EmojiProvider data={data} defaultSkin={3}>
  <EmojiText>:wave:</EmojiText> {/* renders 👋🏼 */}
</EmojiProvider>

emojibase

import emojis from 'emojibase-data/en/data.json';
import shortcodes from 'emojibase-data/en/shortcodes/emojibase.json';
import { fromEmojibase } from 'react-emoji-text/adapters/emojibase';

const data = fromEmojibase(emojis, { shortcodes });

<EmojiProvider data={data} defaultSkin={3}>
  <EmojiText>:wave:</EmojiText> {/* renders 👋🏼 */}
</EmojiProvider>

Shortcode Skin Tone Suffix

Append :skin-tone-N: to a shortcode to override the skin tone for that emoji:

<EmojiText>:wave::skin-tone-5:</EmojiText> {/* renders 👋🏾 */}

The skin tone suffix is consumed as part of the match — it won’t appear in the rendered output.

Unicode Preservation

Unicode skin tone modifiers embedded in the source text are always preserved. If the input already contains a skin-toned emoji like 👋🏾, the library detects and keeps the original modifier regardless of the defaultSkin setting.