How do these icons work: ✅️?

Question

I can see these characters as colored icons:

✅️

It only works in Firefox for me. If you can't see the characters in color, it looks like this on my system (it's probably font-dependent):

I can even see them in firebug and tab titles:

And there's full file of them. I also did this document.title animation with them, which demonstrates that they work even outside HTML.

What is that?

Answer 1

These characters are emojis that are recognized by the Unicode standards which defines what each character presents.

The exact look for them is different for each OS, and each application, but all depict the same thing.

The globe () is Unicode character 1F30F and is called EARTH GLOBE ASIA-AUSTRALIA. the 2nd one (✅) is called WHITE HEAVY CHECK MARK and is Unicode 2705.

In that manner, there are thousands of emojis, some that every application supports and some with less support. See complete list here http://www.fileformat.info/info/emoji/browsertest.htm

Answer 2

Firefox is using a special font for these emoji characters. It's employing a relatively new and otherwise rarely used feature of TrueType fonts: layered colour glyphs. Other than that (i.e. having a special font with pre-coloured glyphs) these icons are ordinary Unicode characters.

Windows has native support for these coloured fonts only in versions 8.1 and onwards, thus Firefox installs EmojiOne privately and uses its own font renderer for it in Windows 7. This also explains the absence of colourful emoji icons in most other applications.

Answer 3

In short: Firefox uses a font in which these symbols look the way they do.

These characters are a part of the Unicode Standard.

Unicode is a computing industry standard for the consistent encoding, representation, and handling of text expressed in most of the world's writing systems. Developed in conjunction with the Universal Coded Character Set (UCS) standard and published as The Unicode Standard, the latest version of Unicode contains a repertoire of more than 128,000 characters covering 135 modern and historic scripts, as well as multiple symbol sets. -Wikipedia

Thus, unlike ASCII (which had very few), Unicode contains several symbol sets. Now while it has been standardized on what code should represent what alphabet or symbol, Unicode does not exactly specify how the symbol should look like. Thus, all operating systems have their own sets of symbol graphics to look different. This may include some being colored and some being just outlines or black and white.

Also, it is also possible for fonts to have their own set of art for these symbols so that the characters can go with the feel of the application. Even inside the application, you may have different pages using different sets of images. Thus, you can interact with the character like you would otherwise, but it would just look different.

You can see how exactly emoji (for , skip to #1483) look on various platforms here.

Answer 4

These characters "work" the same way as other characters, such as a, ø, λ, ଶୁ, に and 晨, work. Characters are represented by an abstract number, which is used to select and index an available font to display the character.

On your system, it appears that Firefox does its own rendering, and has access to fonts containing glyphs for, , and ✅️. Other applications will normally use the fonts made available by the X server (or equivalent), so be restricted to fonts you've installed or pointed your server at (e.g. with xset +fp or similar).

Multi-colour fonts are a recent and still fairly experimental development; traditionally, font glyphs are a single colour that can be composed against any background.

Answer 5

It's different on each browser, tho you can add a specific font to your website, which loads in these emojis. For example:

• FontAwesome
• EmojiSymbols
• Fontello
• OpenSansEmoji
• We♥iconFonts
• Emoji Icon Font
• Google Noto Emojis

This post over on Graphics Design Are there any free Emoji fonts? might also be interesting. Without such a custom icon font, you have to keep in mind, that your website will look different in every browser.

---

_{This is just a list intended to guide people to emojis and unicode smileys faster.}

Answer 6

Those are just Unicode characters so any textboxes that support Unicode can display them without problem, provided the font and glyphs are available on the system. However the look and feel for each Unicode character depends on the renderer and font used for them.

Traditionally characters are filled only with a single color. Colored emojis are quite a new thing, hence their support varies from platform to platform. Various techniques have been invented for coloring like embedded PNGs, SVGs or layered masks. But all of them require a new renderer which was not available in older OSes.

As a result since version 50.0 Firefox has embedded its own renderer and font for supporting colored emoji. You can find it in the release notes

Changed

Added a built-in Emoji set for operating systems without native Emoji fonts (Windows 8.0 and lower and Linux)

The font file can be found in %FirefoxInstallDir%\fonts\EmojiOneMozilla.ttf