Unicode Variation Selectors 15 and 16
Updated  23-January-23

Page contents

News

2023-January-18  While deciding on a new title for Infinite Ink’s Connect with Infinite Ink via Mastodon and Other Messaging Systems📣, I added the :megaphone:[1] emoji to the examples below.

2022-August-13  As of today, this evolving⁠[2] article has been on the web for 3 years.🎂🎂🎂

2021-December-28  In honor of my adventures in desktop Linux, I added the :penguin: emoji to the examples below.

 

About variation selectors

I use a lot of non-⁠ASCII characters, for example emoji,⁠[3] in my writing and in the process of trying to control their appearance 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 is emojified[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.

 

Table of variation selector entities, meanings, and 16 examples

 

Name

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:[6]
unrendered
rendered

🔣︎
🔣︎

🔣️
🔣️

🔣
🔣

Example 2
:heavy check mark:
unrendered
rendered

✔︎
✔︎

✔️
✔️

✔

Example 3
:new:
unrendered
rendered

🆕︎
🆕︎

🆕️
🆕️

🆕
🆕

Example 4
:interrobang:
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

📣︎
📣︎

📣️
📣️

📣
📣

 

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 that 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. In some markup languages, a string like :something: is an emoji shortcode (also known as a CLDR short name). To view a list of emoji shortcodes, see ikatyang’s emoji-⁠cheat-⁠sheet.
2. Many Infinite Ink articles, including this one, are evergreen and regularly updated.
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 16 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.)
6. :symbols: is the emoji shortcode for 🔣.

Discuss or share 📝 🤔 🐘