Universal Icons

A handful of glyphs the whole world already reads.

A small set of glyphs has become a near-universal language. Use them as they're understood, pair them with labels, and keep one consistent set.

The Universal Set
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.

Means: open the menu
Means
Open navigation
Recognition
Very high
Watch for
Hiding nav on desktop
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.

Means: find / search
Means
Find / search
Recognition
Near-universal
Safe to
Use without a label
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.

Means: settings / configure
Means
Settings · configure
Recognition
High
Watch for
Confusing with status
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.

Means: go to start
Means
Home / start
Recognition
High
Watch for
Competing with the logo
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.

Means: your account
Means
Profile · account
Lives
Top-right, usually
Often opens
Settings · 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.

Means: your basket
Means
Cart / basket
Lives
Top-right
Pairs with
Item-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.

Means: like — or save?
Means
Like · save · react
Recognition
High shape, fuzzy meaning
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.

Means: share / send
Means
Share / send
Recognition
Good, glyph varies
Watch for
Platform mismatch
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.

Means: remove / delete
Means
Delete / remove
Recognition
High
Pair with
Confirm & undo
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.

Icon + label beats icon alone ? guess Search unambiguous
Default to
Icon + label
Helps
Clarity & a11y
Icon-only
Only the universal set
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.

Borrow meaning, don't invent it FAMILIAR envelope = mail INVENTED = ???
Lean on
Known metaphors
Cost of novelty
Recognition resets
Test
Can users name it?
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.

One family, one weight same stroke · same corners
Pick
One icon set
Match
Weight · corners · fill
Avoid
Mixing families
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).

Glyph small · target large 44px target · 22px glyph
Target
≥ 44px tappable
Spacing
Room between icons
See also
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.

Means: AI / generate
Means
AI · generate · assist
Set by
ChatGPT · Gemini · Copilot
Status
Fast-forming convention
✦ 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.

Novel glyph = zero recognition generated · ??? Search known + labeled
Risk
Meaningless novelty
Keep
Shared metaphors
Always
Label the new
Further Reading