Navigation
Menu (Hamburger)
Three stacked lines mean “open the menu.” Born on early mobile, now understood almost everywhere — though on a wide screen a visible nav is usually better than hiding it behind this icon.
The Universal Set
Action
Search
The magnifying glass is the most universally recognized icon in software. It reliably means “find” or “search” — one of the few glyphs that needs no label to be understood.
Action
Settings (Gear)
The cog signals “settings” or “configure.” Widely understood, though it can blur with system status or advanced options — a label removes any doubt about exactly what it opens.
Navigation
Home
The house means “back to the start.” Strong on mobile apps; on the web the logo top-left often does the same job, so the two can compete if you show both.
Utility
Account (Person)
A head-and-shoulders silhouette means “you” — your profile, account, or sign-in. Conventionally sits top-right, often doubling as the entry to settings and sign-out.
Commerce
Cart
The shopping cart (or basket) means “items you intend to buy.” One of the most stable icons on the web — users expect it top-right, often with a count badge.
Ambiguous
Favorite (Heart)
A heart means “like” or “save” — but which? Platforms split between favoriting, bookmarking, and reacting. Because the meaning isn’t fixed, this is an icon that genuinely needs a label or tooltip.
Ambiguous
Share
“Share” has no single glyph — the connected-nodes mark, the iOS box-and-arrow, and others all compete. Recognition is good but the symbol varies by platform, so confirm it matches your users’ expectations.
Destructive
Delete (Trash)
The trash can means “remove.” Strongly understood, but because it’s destructive it deserves extra care — a confirmation, an undo, or both — and never as the only place an important action lives.
Utility
Notifications (Bell)
The bell means “something happened while you were away.” Universally recognized in apps, almost always paired with a count or dot badge — and easily the most abused icon in software.
Navigation
Back (Arrow)
The left arrow means “go back one step.” On mobile it lives top-left of the title bar; on the web the browser owns it — an in-page back arrow should only appear inside stepped flows.
Action
Close (X)
The X dismisses whatever it sits on — a modal, a banner, a chip. It belongs in the top-right corner of the thing it closes, and it should never be the only way out of an important flow.
Action
Add (Plus)
The plus creates something new. As a floating action button it anchors the bottom-right of mobile screens — one per screen, reserved for the single most important creative action.
Utility
More (Kebab)
Three vertical dots mean “more actions for this item.” It sits at the right end of a row or card and opens a small menu — a safe home for secondary actions, never for the primary one.
Action
Edit (Pencil)
The pencil means “change this.” It appears next to the thing it edits — a field, a row, a profile block — and switches the surface into an editable state.
Action
Download
An arrow into a tray means “save a copy to your device.” Its mirror — the arrow out of the tray — means upload. Keep the pair consistent and users never mix them up.
Action
Filter (Funnel)
The funnel narrows a list. It lives beside search at the top of results, often with a badge showing how many filters are active — and it should never silently hide everything.
Utility
Location (Pin)
The teardrop pin means “a place.” Dropped on maps, prefixed to addresses, and used for “near me” features — one of the few icons whose meaning survives every platform.
Utility
Lock (Padlock)
The padlock means “secure” or “private.” Inside a field it marks protected input; on content it means restricted access. Closed reads as safe — open as exposed — so never decorate with it.
Designing with Icons
Principle
Pair Icons with Labels
Outside the tiny universal set, an icon alone is a guessing game. A text label removes ambiguity, aids accessibility, and barely costs space — when in doubt, label it.
Principle
Use Familiar Metaphors
Icons work by borrowing meaning users already hold. A clever, novel symbol resets that to zero. Reach for the established metaphor before inventing your own — recognition beats originality.
Principle
Keep One Consistent Set
Mixing icon families — different weights, corners, and fill styles — reads as sloppy and slows recognition. Pick a single set (or design to one spec) and use it everywhere.
Principle
Size for the Tap
A 16px glyph can still need a 44px touch target. Keep icon buttons comfortably tappable and give them breathing room — small, crowded icons are slow and error-prone (see Fitts’s Law).
✦
Icons in the Age of AI
A brand-new glyph is entering the universal set — and AI is also making it tempting to generate icons whose meaning users don’t yet share.
✦ AI Era
The Sparkle Is the New Icon
Almost overnight, the four-point sparkle has come to mean “AI” — generate, summarize, assist. It’s the fastest-forming icon convention in years, and users now expect it to mark anything powered by a model.
✦ AI Era
Don’t Auto-Generate Meaning
AI can spit out an infinite supply of unique icons — but an icon only works if its meaning is already shared. A freshly generated glyph carries none. Keep generated art on the established metaphor, and label anything new.