CSS: font-variant-emoji

By Xah Lee. Date: 2026-09-30.

What is font-variant-emoji property

font-variant-emoji property lets you specify whether emoji is shown as text or emoji.

this solves a long time problem when a unicode character such as speaker icons 🔉 🔊 for keyboard volume decrease/increase label, or arrow ↔ used in math may become emoji.

see Unicode: Emoji vs Text

Values

possible values:

emoji → show as emoji.
text → show as text.
unicode → show depending on Unicode Variation Selector.

Example

✌ 🔉 🔊 ↔

.xemo-d68jk {
 font-variant-emoji: emoji;
 font-size: 30px;
}

.xtext-d68jk {
 font-variant-emoji: text;
 font-size: 30px;
}

<p><span class="xemo-d68jk">✌ 🔉 ↔</span></p>

<p><span class="xtext-d68jk">✌ 🔉 ↔</span></p>

Browser support

new in 2026, not supported by all browsers yet.