Spelling varies between primary language: emoji, emoticon, emotie. If I have some plain text in a webpage, I can use CSS to give it any colour I can describe. With “normal” systems, I can embed emojis in this text; and at least one system font (i.e. a font that is always available) will be able to render them. Emoji often have awkward width compared to latin charsets, as they are double chars in utf8.
The full range of emojis is listed 1. In the past I have been importing fontawesome. However this is a better / lighter solution, if you have no need of business logos. This is a row of emojis that are relevant for B2B software (in each basic system font, other fonts may or may not support the relevant UTF8 planes):

☑ ✓ ✔ ✅ √ ✗ ✘ ✖ ✔ ❌ 🆗 ℹ🔠 🔡 🔢 🔤 ™ ® ® ♻ ⚕💲 💱 ➗ ✖ 🔆 🔅 ⏏ ⏸ ⏹ 🔽 🔼 🔀 ↔ ↕ 🚫 ⛔ ⚠ 🚾 🏧 🧯 🧰 🔗 ⚙ 🔑 🔐 🗑✂ 📎 📍 📌 📋 📅 🗂 📂 📝 📬 📦 📥 📤 🧾 💳 💶 💡 📷 🎥 📀 💾 🖨💻 🔋 📞 🎛 🎚🎵 🔕 🔊 🔉 🔇 👚 🧤 🥼 👓 🎯 🥅 🏅 🎫 ⚡ ☁🕦 ⌛ 🧭

☑ ✓ ✔ ✅ √ ✗ ✘ ✖ ✔ ❌ 🆗 ℹ🔠 🔡 🔢 🔤 ™ ® ® ♻ ⚕💲 💱 ➗ ✖ 🔆 🔅 ⏏ ⏸ ⏹ 🔽 🔼 🔀 ↔ ↕ 🚫 ⛔ ⚠ 🚾 🏧 🧯 🧰 🔗 ⚙ 🔑 🔐 🗑✂ 📎 📍 📌 📋 📅 🗂 📂 📝 📬 📦 📥 📤 🧾 💳 💶 💡 📷 🎥 📀 💾 🖨💻 🔋 📞 🎛 🎚🎵 🔕 🔊 🔉 🔇 👚 🧤 🥼 👓 🎯 🥅 🏅 🎫 ⚡ ☁🕦 ⌛ 🧭

☑ ✓ ✔ ✅ √ ✗ ✘ ✖ ✔ ❌ 🆗 ℹ🔠 🔡 🔢 🔤 ™ ® ® ♻ ⚕💲 💱 ➗ ✖ 🔆 🔅 ⏏ ⏸ ⏹ 🔽 🔼 🔀 ↔ ↕ 🚫 ⛔ ⚠ 🚾 🏧 🧯 🧰 🔗 ⚙ 🔑 🔐 🗑✂ 📎 📍 📌 📋 📅 🗂 📂 📝 📬 📦 📥 📤 🧾 💳 💶 💡 📷 🎥 📀 💾 🖨💻 🔋 📞 🎛 🎚🎵 🔕 🔊 🔉 🔇 👚 🧤 🥼 👓 🎯 🥅 🏅 🎫 ⚡ ☁🕦 ⌛ 🧭

The other reason for my historic use of FontAwesome? is that the two tone glyths will not clash with any colour scheme. Quite a few Emoji are many coloured, making them less useful as icons. This is some emoji with CSS colouring applied (recipe derived from 1). As emoji are “letters”, they are vector images; and should be renderable at any scale with no jaggies. For a random icon, I think the monospace is best, as you don't want an icon to merge into surrounding text.
NOTE: This list does not include the heaven trigram, as I didn't scroll past it in the UTF8 char list. On slightly more reading, I don't think the unicode consortium thinks trigrams are emoji. Secondly I have a custom symbol, which looks more closely like a menu (see top right of page on big screen layouts). That symbol is my creation, it is released for general use under a collective commons licence; I don't see value in a big publication process, it didn't take long to make.

Some people ~ not in the least FontAwesome ~ put these non-words in CSS :after content, which pulls them out of the selectable text. If you where using them for random decorations, this is smart. With :after content, you would need to set the values in CSS for every bit of text (voluminous, not DRY and hard to manage), or define pseudo letters as FontAwesome does (steep costings at start). As my typical use of the symbols is for button labels, I think this is less important. If I had a regular “OK” and “cancel” type symbols, I would define a widget, hiding the problem in a better level of abstraction... (I normally use a check and cross)

Light glyph for darkmode
Please note the solid square should have a check/ tick in the middle, but flattening the colour space has made it invisible

™ ® ® ♻ ⚕ 💲 ✔ ✅ 🔗 ⚙ 🔑

Dark glyph for palemode

™ ® ® ♻ ⚕ 💲 ✔ ✅ 🔗 ⚙ 🔑

NOTE separate process needed for SAFARI 2. Note to get the chars to render, I needed to use different symbols (see 3 ), and encode them 4; rather than pasting them. (use view source),
Encoded as entities:

™ ® ® ♻ ⚕ 💲︎ ✔ ✅︎ 🔗 ⚙ 🔑︎

Written as symbols:

™ ® ® ♻ ⚕ 💲 ✔ ✅ 🔗 ⚙ 🔑

This has been tested on Chrome/win32, FF/win32, MSIE11/win32, edge?/win32, chrome/linux, chromium/linux, safari/mac desktop, chrome/mac. chrome/droid version; TODO: iphone

As my work normally deploys for mobile, I will need to support droid (most typically a version of chrome); and apple (typically a version of safari) as core objectives. From this testing page; there will need to be a dual render of “chrome symbol encoding”, and then “safari symbol encoding”. *Strongly probably* the second one can be magic translation via JS, see 5. In a situation with known clients, this can be done statically in advance. Conclusion: If a solution text where both patforms could use the same source text, and skip the rewriting step was found, this technology may be viable.
.
...
.

The reason for this article, is that I wanted to do:

(not in safari)
🤝

Some similar articles in research

Some similar articles in images