Learn about icons, emoji & Unicode
106 free, no-nonsense guides — how icons and emoji actually work, and how to use them in real projects.
😄 Emoji meanings 28
What popular emojis mean, where they come from, and how to use them well.
Fire emoji 🔥: meaning and how to use it
What the 🔥 fire emoji means, how it's used to say something is 'lit' or excellent, plus Unicode details and copy-paste.
💀Emoji meaningsSkull emoji 💀: meaning and how to use it
What the 💀 skull emoji means — 'I'm dead' from laughing — plus its darker literal uses and Unicode details.
😂Emoji meaningsFace with Tears of Joy emoji 😂: meaning and how to use it
The 😂 face with tears of joy emoji means laughing so hard you cry. Meaning, usage and Unicode facts.
🥺Emoji meaningsPleading Face emoji 🥺: meaning and how to use it
The 🥺 pleading face emoji means begging, puppy-dog eyes or 'so cute'. Meaning, usage and Unicode facts.
😭Emoji meaningsLoudly Crying Face emoji 😭: meaning and how to use it
The 😭 loudly crying emoji means sobbing — from sadness or, often, from laughing or overwhelming emotion. Meaning and usage.
✨Emoji meaningsSparkles emoji ✨: meaning and how to use it
The ✨ sparkles emoji adds shine, excitement or ironic emphasis. Meaning, usage and Unicode facts.
💯Emoji meaningsHundred Points emoji 💯: meaning and how to use it
The 💯 hundred emoji means 100% — total agreement, authenticity or a perfect score. Meaning and usage.
🙏Emoji meaningsFolded Hands emoji 🙏: meaning and how to use it
The 🙏 folded hands emoji means please, thank you, prayer or hope — and some read it as a high five. Meaning and usage.
👀Emoji meaningsEyes emoji 👀: meaning and how to use it
The 👀 eyes emoji means 'I'm watching', intrigue, or calling attention to something juicy. Meaning and usage.
🤡Emoji meaningsClown Face emoji 🤡: meaning and how to use it
The 🤡 clown emoji means someone is foolish or a 'clown' — often self-deprecating. Meaning, usage and Unicode facts.
🫶Emoji meaningsHeart Hands emoji 🫶: meaning and how to use it
The 🫶 heart hands emoji means love, appreciation and support — hands forming a heart. Meaning and usage.
😅Emoji meaningsGrinning Face with Sweat emoji 😅: meaning and how to use it
The 😅 emoji means a nervous or relieved laugh — smiling through awkwardness or a close call. Meaning and usage.
🫠Emoji meaningsMelting Face emoji 🫠: meaning and how to use it
The 🫠 melting face emoji means melting from embarrassment, heat, stress or affection. Meaning and usage.
🫡Emoji meaningsSaluting Face emoji 🫡: meaning and how to use it
The 🫡 saluting face emoji means respect, acknowledgement or 'yes, on it' — sometimes ironically. Meaning and usage.
😩Emoji meaningsWeary Face emoji 😩: meaning and how to use it
The 😩 weary face emoji means exhaustion, frustration or dramatic longing. Meaning, usage and Unicode facts.
🙃Emoji meaningsUpside-Down Face emoji 🙃: meaning and how to use it
The 🙃 upside-down face emoji signals irony, sarcasm or 'this is fine' resignation. Meaning and usage.
🥰Emoji meaningsSmiling Face with Hearts emoji 🥰: meaning and how to use it
The 🥰 emoji means feeling loved, adoring or grateful — a smiling face surrounded by hearts. Meaning and usage.
😍Emoji meaningsSmiling Face with Heart-Eyes emoji 😍: meaning and how to use it
The 😍 heart eyes emoji means love, desire or being wowed by something you find gorgeous. Meaning and usage.
😎Emoji meaningsSmiling Face with Sunglasses emoji 😎: meaning and how to use it
The 😎 sunglasses emoji means cool, confident or 'no worries'. Meaning, usage and Unicode facts.
🤔Emoji meaningsThinking Face emoji 🤔: meaning and how to use it
The 🤔 thinking face emoji means pondering, doubt or skeptical 'hmm'. Meaning, usage and Unicode facts.
🙄Emoji meaningsFace with Rolling Eyes emoji 🙄: meaning and how to use it
The 🙄 rolling eyes emoji means annoyance, disdain or sarcasm. Meaning, usage and Unicode facts.
💅Emoji meaningsNail Polish emoji 💅: meaning and how to use it
The 💅 nail polish emoji means sassy confidence, being unbothered or 'and that's that'. Meaning and usage.
🤏Emoji meaningsPinching Hand emoji 🤏: meaning and how to use it
The 🤏 pinching hand emoji means a small amount, 'just a little', or something tiny. Meaning and usage.
🤝Emoji meaningsHandshake emoji 🤝: meaning and how to use it
The 🤝 handshake emoji means agreement, a deal, partnership or mutual respect. Meaning and usage.
🥲Emoji meaningsSmiling Face with Tear emoji 🥲: meaning and how to use it
The 🥲 emoji means smiling through tears — bittersweet happiness, gratitude or holding it together. Meaning and usage.
🥵Emoji meaningsHot Face emoji 🥵: meaning and how to use it
The 🥵 hot face emoji means overheating from heat, exertion — or finding someone extremely attractive. Meaning and usage.
🧠Emoji meaningsBrain emoji 🧠: meaning and how to use it
The 🧠 brain emoji means intelligence, big-brain ideas, or (ironically) being smart. Meaning and usage.
🫥Emoji meaningsDotted Line Face emoji 🫥: meaning and how to use it
The 🫥 dotted line face emoji means feeling invisible, absent or wanting to disappear. Meaning and usage.
🔤 Unicode & encoding 20
How text, code points and emoji actually work under the hood.
What is Unicode?
Unicode is the universal standard that gives every character a unique number, from Latin letters to emoji. Learn what it is and why it matters.
Unicode & encodingWhat is a code point?
A code point is the unique number Unicode assigns to a character, like U+1F525 for 🔥. Learn the notation and how code points differ from bytes.
Unicode & encodingUTF-8 vs UTF-16 vs UTF-32
The three main Unicode encodings compared — how they store code points, their trade-offs, and why UTF-8 dominates the web.
Unicode & encodingWhat is UTF-8?
UTF-8 is the variable-width encoding that stores Unicode as 1–4 bytes and powers most of the web. Learn how it works and why it won.
Unicode & encodingHow emoji are encoded
Emoji are Unicode characters — sometimes single code points, sometimes sequences joined by special characters. Here's how it works.
Unicode & encodingEmoji ZWJ sequences explained
The Zero Width Joiner glues emoji together into families, professions and more. Learn how ZWJ sequences work and why they sometimes break.
Unicode & encodingHow emoji skin tone modifiers work
Skin tone emoji use Fitzpatrick modifier characters added after a base emoji. Learn the five tones and how they combine.
Unicode & encodingVariation selectors: emoji vs text presentation
Some characters can render as a colorful emoji or a plain glyph. Variation selectors U+FE0E and U+FE0F decide which. Here's how.
Unicode & encodingCombining characters explained
Some accents attach to the letter before them as separate 'combining' code points. Learn how é can be one character or two.
Unicode & encodingWhat are surrogate pairs?
Why emoji take two 'characters' in JavaScript. Surrogate pairs let UTF-16 encode code points beyond U+FFFF. Here's the mechanism.
Unicode & encodingGrapheme clusters explained
A 'grapheme cluster' is what a person perceives as a single character — which may be many code points. Key for correct string handling.
Unicode & encodingUnicode normalization explained
Normalization converts equivalent text to a canonical form so it compares and sorts correctly. Learn NFC vs NFD vs NFKC vs NFKD.
Unicode & encodingWhat is a byte order mark (BOM)?
The BOM is an invisible character at the start of some files that signals encoding and byte order. Learn when it helps and when it breaks things.
Unicode & encodingThe Private Use Area and icon fonts
The Private Use Area is Unicode space reserved for custom characters — the trick that made icon fonts possible. Learn how it works.
Unicode & encodingEmoji vs emoticon vs kaomoji
Emoji, emoticons and kaomoji are often confused. Learn what each is, where they came from, and how they differ technically.
Unicode & encodingHow flag emoji work
Flag emoji aren't single characters — they're pairs of 'regional indicator' letters. Learn the clever system and its quirks.
Unicode & encodingHow keycap emoji work
Keycap emoji like 1️⃣ are three code points stacked together. Learn the combining enclosing keycap and how the sequence forms.
Unicode & encodingHow color emoji fonts work
Emoji are text, but color needs special font formats. Learn the four color-font technologies: COLR/CPAL, sbix, CBDT/CBLC and SVG-in-OpenType.
Unicode & encodingCounting emoji correctly in JavaScript
'😀'.length is 2 and '👍🏽'.length is 4. Learn why, and how to count and slice strings with emoji correctly using code points and graphemes.
Unicode & encodingWhat is ASCII?
ASCII is the 1960s 7-bit code that mapped English letters, digits and symbols to numbers — and the foundation Unicode built on.
💻 Icons for developers 26
Using SVG, icon fonts and icon libraries in real projects.
What is an SVG? A plain-English guide
SVG is a text-based, infinitely scalable image format built from XML. Learn what SVG is, why it's perfect for icons, and how to use it.
Icons for developersSVG vs PNG for icons: which should you use?
A practical comparison of SVG and PNG for icons — quality, file size, color control, accessibility and when each format wins.
Icons for developersSVG icons vs icon fonts: which should you use?
Icon fonts were the standard for years, but SVG icons have largely replaced them. Compare accessibility, rendering, performance and flexibility.
Icons for developersHow to change SVG icon color with CSS
Recolor SVG icons with CSS using fill, stroke and the currentColor keyword. Works for inline SVG and, with a mask, even for background images.
Icons for developersInline SVG vs <img> vs background-image
Three ways to put an SVG on a page — inline, in an img tag, or as a CSS background. Learn the trade-offs for styling, caching and accessibility.
Icons for developersSVG sprite sheets with <symbol> and <use>
Bundle many icons into one cached SVG sprite and reference them with <use>. Learn how sprites work and when they still make sense.
Icons for developersFavicon guide: sizes, formats and the modern setup
A no-nonsense favicon setup for 2020s browsers — the handful of files and tags you actually need, including SVG favicons and Apple touch icons.
Icons for developersPWA icon sizes and the web app manifest
Which icon sizes a Progressive Web App needs, what maskable icons are, and how to wire them up in manifest.json.
Icons for developersapple-touch-icon explained
The apple-touch-icon is the icon iOS uses when someone adds your site to the Home Screen. Here's the size, the tag, and common gotchas.
Icons for developersHow to make icons accessible
Decorative vs meaningful icons, aria-hidden, aria-label, role=img and SVG title — the complete pattern for accessible icons.
Icons for developersMaking icon-only buttons accessible
Icon-only buttons look clean but confuse screen readers and new users. Give them accessible names, tooltips and big-enough tap targets.
Icons for developersHow to use icons in React
The cleanest ways to use icons in React — SVG-as-component, popular icon libraries, and on-demand loading with Iconify.
Icons for developersHow to use icons in Vue
Add icons to Vue with SVG components, icon-set packages, or the on-demand Iconify component. Simple patterns with code.
Icons for developersHow to use icons with Tailwind CSS
Style SVG icons with Tailwind utilities — sizing with w-/h-, coloring with text- and fill-current, and the mask-image approach.
Icons for developersWhat is Iconify and how do you use it?
Iconify unifies 200+ open-source icon sets behind one API and framework components. Learn how it works and how to use it anywhere.
Icons for developersHow to optimize SVG files (with SVGO)
Raw exported SVGs are full of cruft. Learn what to strip, how SVGO helps, and which settings keep your icons safe.
Icons for developersWhat are icon fonts?
Icon fonts pack glyphs into a typeface and map them to characters. Learn how they work, their pros and cons, and why SVG replaced them.
Icons for developersHow to animate SVG icons
Three ways to bring SVG icons to life — CSS transitions/keyframes, SMIL animation, and JavaScript libraries — with trade-offs.
Icons for developersIcon licenses explained (MIT, Apache, CC, OFL)
What the common open-source icon licenses mean for your project — what's free, what needs attribution, and what to check before shipping.
Icons for developersHow to attribute icons properly
Some icon licenses require credit. Learn when attribution is needed and clean ways to give it in websites, apps and documents.
Icons for developersHow to embed an SVG in HTML
Five ways to put an SVG on a web page — inline, img, object, background, and data URI — with when to use each.
Icons for developersSVG <title> and <desc> for accessibility
How to use the SVG title and desc elements with role and aria to make inline SVGs readable by screen readers.
Icons for developersLazy-loading icons: when it helps
When lazy-loading icons speeds up your page and when it just adds complexity. Practical performance guidance for icon-heavy UIs.
Icons for developersColoring icons with CSS mask-image
Use an SVG as a CSS mask so you can recolor even an external icon file with background-color. The technique, code and gotchas.
Icons for developersThe SVG viewBox, explained
viewBox is the single most misunderstood SVG attribute. Learn what its four numbers mean and why it's the key to scalable icons.
Icons for developersHow to add icons to a website
A beginner-friendly walkthrough: find an icon, choose a method (SVG, img, web component), color it, and make it accessible.
🎨 Icon design 15
Designing clear, consistent icons and using them well in interfaces.
The anatomy of an icon
Every good icon sits on a grid with consistent padding and keyline shapes. Learn the building blocks that make an icon set feel cohesive.
Icon designIcon grids and keyline shapes
How pixel grids and keyline shapes keep an icon set balanced and aligned. A practical look at the system behind Material and other sets.
Icon designGetting icon stroke width right
Stroke width makes or breaks a line-icon set. Learn how to pick a weight, keep it consistent, and handle optical sizing.
Icon designOptical alignment for icons
Mathematically centered icons often look off-center. Learn optical alignment — the small nudges that make icons feel right.
Icon designOutline vs filled icons
Outline, filled and duotone icons each send a different signal. Learn when to use which — and the classic active/inactive pattern.
Icon designChoosing icon sizes in UI design
Which pixel sizes to use for interface icons, how they pair with text, and why 16/20/24 dominate.
Icon designTouch target size for icon buttons
A 24px icon needs a bigger tappable area. Learn the recommended touch target sizes and how to pad icons without changing their look.
Icon designHow to design a cohesive icon set
A practical process for designing an icon set that feels unified — grid, stroke, corners, metaphors and naming.
Icon designIcon naming conventions that scale
Good icon names make a set searchable and maintainable. Learn naming patterns, aliases and pitfalls to avoid.
Icon designMonochrome vs multicolor icons
Single-color icons keep UIs calm and themeable; multicolor icons add warmth and delight. Learn where each fits.
Icon designHow to make pixel-perfect icons
Why icons look blurry at small sizes and how to fix it — pixel snapping, whole-pixel strokes and aligning to the grid.
Icon designWhy icon + label beats icon-only
Icon-only UIs look clean but hurt usability. Learn why pairing icons with labels is clearer, and when icon-only is acceptable.
Icon designUsing icons in empty states
Empty states are a chance to guide and delight. Learn how to use an icon or illustration to make “nothing here yet” feel helpful.
Icon designWhat are duotone icons?
Duotone icons use two shades of one hue to add depth without full color. Learn how they work and when to use them.
Icon designLoading spinners and progress icons
When to show a spinner vs a progress bar vs a skeleton, and how to build accessible, non-annoying loading icons.
🛠️ How-to guides 11
Practical guides for typing, copying and using icons and emoji.
How to copy and paste emoji
The fastest ways to copy and paste emoji on Windows, Mac, iPhone, Android and the web — plus why pasted emoji sometimes look different.
How-to guidesHow to type emoji on Windows
Open the Windows emoji panel with Win + period, search by name, and insert emoji, kaomoji and symbols into any app.
How-to guidesHow to type emoji on a Mac
Open the macOS Character Viewer with Control + Command + Space to search and insert emoji and symbols anywhere.
How-to guidesHow to type emoji on an iPhone
Switch to the emoji keyboard, search emoji by name, and use predictive emoji suggestions on iOS.
How-to guidesHow to type emoji on Android
Find the emoji key on Gboard and other Android keyboards, search by name, and use emoji suggestions.
How-to guidesHow to add emoji in HTML
Put emoji in a web page by pasting the character, using an HTML entity, or a CSS unicode-range. Plus accessibility tips.
How-to guidesHow to add emoji in CSS
Insert emoji with the CSS content property using the character or its unicode escape. Great for ::before/::after decorations.
How-to guidesHow to add custom emoji to Slack
Upload custom emoji to a Slack workspace, size and format them correctly, and use aliases. A quick admin-friendly guide.
How-to guidesHow to add custom emoji to Discord
Upload custom and animated emoji to a Discord server, meet the size limits, and understand emoji slots.
How-to guidesEmoji in domain names (and Punycode)
Emoji domains exist but are risky. Learn how Punycode encodes them, why registrars limit them, and the security concerns.
How-to guidesHow to add emoji and icons in Google Docs
Insert emoji with @ shortcuts or the special-characters tool, and add crisp icons as images in Google Docs and Slides.
📜 Icon culture & history 6
The stories and conventions behind the icons we use every day.
The hamburger menu icon: where ☰ came from
The three-line hamburger menu dates back to the very first graphical interfaces. Learn its origin, its critics, and why it endures.
Icon culture & historyKebab, meatball and bento menus explained
The food-nicknamed menu icons — kebab (⋮), meatball (⋯), bento (▦) and döner — and what each one typically does.
Icon culture & historyWhy the save icon is still a floppy disk
Most people who tap the save icon have never seen a floppy disk. Here's why this “dead metaphor” survives — and whether it should.
Icon culture & historyWhy settings is a gear (⚙️)
The cog icon has meant “settings” for decades. Learn where the mechanical metaphor came from and why it works.
Icon culture & historyThe magnifying glass: the universal search icon
Why 🔍 means search everywhere, which way it should face, and why it's one of the few truly universal icons.
Icon culture & historySkeuomorphism, flat design and icons
How icon style swung from glossy real-world imitation to flat minimalism — and where things have settled.