Unicode Variation Selectors 15 and 16
Updated  by  nm  2024-August-20

Page contents

News

2024-August-13  As of today, this evolving⁠[1] article has been on the web for 5 years.🕯🕯🕯🕯🕯

2021-December-28  My adventures in desktop Linux inspired me to add the :penguin:[2] emoji to the examples below.

 

About variation selectors

I use a lot of non-⁠ASCII characters — for example emoji[3] — in my writing.⁠✍ While trying to control the appearance of these characters in web browsers, I’ve learned about Unicode Variation Selectors 15 and 16, which are also known as VS15 and VS16.

The table below describes these selectors and gives some examples. Note that whether a character uses emoji style[4] depends on…

  • what, if any, variation selector is specified immediately after the character’s decimal or hexadecimal HTML character entity,

  • the web browser,

  • the fonts specified in the web page’s HTML and CSS,⁠[5]

  • the fonts available to the web browser,

  • and whether the character is emojifiable.⁠[4]

 

Table of variation selector entities, meanings, and 18 examples

 

VARIATION SELECTOR-⁠15
(VS15)

VARIATION SELECTOR-⁠16
(VS16)

no variation selector

HTML entity (hex)

︎

️

HTML entity (decimal)

︎

️

Meaning

if available, use
black & white style

if available, use
emoji style[4]

browser chooses

Example 1
:symbols:[2]
unrendered
rendered

🔣︎
🔣︎

🔣️
🔣️

🔣
🔣

Example 2
:heavy check mark:
unrendered
rendered

✔︎
✔︎

✔️
✔️

✔

Example 3
:new:
unrendered
rendered

🆕︎
🆕︎

🆕️
🆕️

🆕
🆕

Example 4
:interrobang:
unrendered
rendered

⁉︎
⁉︎

⁉️
⁉️

⁉

Example 5
no shortcode
unrendered
rendered

‽︎
‽︎

‽️
‽️

‽

Example 6
:heart:
unrendered
rendered

❤︎
❤︎

❤️
❤️

❤

Example 7
:hearts:
unrendered
rendered

♥︎
♥︎

♥️
♥️

♥

Example 8
:leftwards arrow with hook:
unrendered
rendered

↩︎
↩︎

↩️
↩️

↩

Example 9
:mask:
unrendered
rendered

😷︎
😷︎

😷️
😷️

😷
😷

Example 10
:bulb:
unrendered
rendered

💡︎
💡︎

💡️
💡️

💡
💡

Example 11
:door:
unrendered
rendered

🚪︎
🚪︎

🚪️
🚪️

🚪
🚪

Example 12
:penguin:
unrendered
rendered

🐧︎
🐧︎

🐧️
🐧️

🐧
🐧

Example 13
:8ball:
unrendered
rendered

🎱︎
🎱︎

🎱️
🎱️

🎱
🎱

Example 14
:infinity:
unrendered
rendered

♾︎
♾︎

♾️
♾️

♾

Example 15
:abc:
unrendered
rendered

🔤︎
🔤︎

🔤️
🔤️

🔤
🔤

Example 16
:megaphone:
unrendered
rendered

📣︎
📣︎

📣️
📣️

📣
📣

Example 17
:wave:
unrendered
rendered

👋︎
👋︎

👋️
👋️

👋
👋

Example 18
:compass:
unrendered
rendered

🧭︎
🧭︎

🧭️
🧭️

🧭
🧭

 

Variation selector tips

Hexadecimal HTML entities are case insensitive so you can use any of the following for VS15 and VS16.

  • ︎ and ️

  • ︎ and ️

  • ︎ and ️

In my web writing, I prefer the last option (lower case x and all upper case hexadecimal number).

 

💡
A mnemonic I use to remember these variation selectors is this: The one that ends in F is for Fun and the one that ends in E is for Everyday.✔️✔︎

 

References

See also

Endnotes


1. Many Infinite Ink pages, including this one, are evergreen 🌲 and regularly updated.
2. :penguin: is the emoji shortcode for 🐧 and :symbols: is the emoji shortcode for 🔣. To learn about emoji shortcodes, see emojipedia.org/shortcodes/.
3. The plural of “emoji” can be spelled “emoji” or “emojis.” To learn about pluralizing the word “emoji,” see merriam-webster.com’s definition of emoji and the second Q in emojipedia.org’s FAQ. Also see Infinite Ink’s #emoji Portal.
4. In this article “emojify” is a synonym for “use emoji style.”
5. On this page — other than in this endnote — I use Infinite Ink’s or your browser’s default fonts. If I explicitly specify the Symbola font for the 18 examples in the table, the VS15 variations are rendered as 🔣︎ ✔︎ 🆕︎ ⁉︎ ‽︎ ❤︎ ♥︎ ↩︎ 😷︎ 💡︎ 🚪︎ 🐧︎ 🎱︎ ♾︎ 🔤︎ 📣︎ 👋︎ 🧭︎ and the VS16 variations are rendered as 🔣️ ✔️ 🆕️ ⁉️ ‽️ ❤️ ♥️ ↩️ 😷️ 💡️ 🚪️ 🐧️ 🎱️ ♾️ 🔤️ 📣︎ 👋️ 🧭︎. (What you see here depends on your browser and what fallback fonts are installed on your device.)

Please share & discuss 📝 👎 👍 📯