When to Use Icons Instead of Text and How to Balance Both in Web Design

Use an icon without a visible label only for the very few symbols nearly everyone recognizes, and pair every other icon with text. Nielsen Norman Group’s research on icon usability says only a few icons enjoy mostly universal recognition and gives home, print, and the magnifying glass for search as examples. Even those need an accessible name in the code, and any icon you are unsure about is a candidate for testing with your own users.

Which icons can stand alone

Aurora Harley’s Nielsen Norman Group article on icon usability is specific: “The icons for home, print, and the magnifying glass for search are such instances.” Outside a few cases like these, the article says, “most icons continue to be ambiguous to users.” Icons that feel standard to designers, such as the cart, the gear, the envelope, or the floppy disk for “save,” are safer with a label until testing shows your users know them. Even the hamburger menu, which a 2025 Nielsen Norman Group review found most users now recognize, is not universally understood; how to handle it on mobile is covered in is the hamburger menu the best mobile navigation solution.

Situation	Icon alone	Icon with label	Text alone
Search, home, or print in a space-constrained header	Acceptable, with an accessible name in the code	Better if space allows	Works
Navigation items	Not recommended	Recommended	Works
Complex or abstract actions such as "Export as CSV" or "Compare"	Not recommended	Acceptable	Clearest option
Repeated actions in a dense toolbar used daily	Acceptable once users have learned them	Better for new users	Takes space

Labels: visible, always

NN/g’s guidance on labels leaves little room: “a text label must be present alongside an icon to clarify its meaning in that particular context”, and “Icon labels should be visible at all times, without any interaction from the user.” A tooltip that appears on hover is not a label: it adds a step, and touch screens have no hover. If users need the tooltip to understand the icon, the icon is not doing its job.

The accessible name is not optional

A visible label and an accessible name are different things, and every icon button needs the second even when it skips the first. WCAG 2.2 success criterion 4.1.2, Name, Role, Value (Level A), requires that for user interface components “the name and role can be programmatically determined”. Apple’s Human Interface Guidelines for icons make the same point for apps: “Provide alternative text labels for custom interface icons.” A search button that shows only a magnifying glass on screen still needs the name “Search” in the markup.

When icons fail

Complex actions. “Export as CSV” or “Compare products” do not reduce to a simple picture; arrows, document shapes, and scales can leave users guessing.
Abstract concepts. Concrete objects such as a house or a cart have a visual form; actions such as “configure” or “integrate” do not.
Novel icons. A new symbol, however well drawn, can need repeated exposure before people learn it. Make users learn a custom icon vocabulary only when the benefit is clear.

Size, detail, and touch targets

Icons appear at small sizes, so fine detail disappears and simple shapes survive. Use vector formats so icons stay sharp; Apple’s guidance says to “use a vector format like PDF or SVG” for custom interface icons. A small visual icon can sit inside a larger tap area: WCAG 2.2 success criterion 2.5.8, Target Size (Minimum), sets 24 by 24 CSS pixels as the floor at Level AA, with a spacing alternative and listed exceptions. When to choose SVG over raster formats is covered in when to use SVG instead of PNG.

Consistency across the set

One style. Mixing outlined and filled icons without a rule looks accidental.
Matched weights. Apple advises keeping interface icons consistent in size, level of detail, and stroke thickness, and matching icon weight to adjacent text.
One meaning per icon. If a trash can means delete in one place, it means delete everywhere.
A shared library. Using one set, such as Font Awesome or Google’s Material Symbols, which Google describes as “our newest icons”, keeps the design language consistent; custom icons added to a library set need careful matching.

Color and meaning

Single-color icons adapt to backgrounds and dark mode. Color can mark state, such as selected versus available, but never on its own: pair it with a change in shape, position, or label so people who cannot tell red from green still see the difference. Designing for color vision differences is covered in designing for color blindness and visual impairments.

Animated icons

Motion can show a change of state, such as a menu icon turning into a close icon, and a spinner signals that something is in progress. Continuous motion needs an off switch: under WCAG 2.2 success criterion 2.2.2, Pause, Stop, Hide (Level A), moving content that starts automatically, lasts more than five seconds, and runs alongside other content must offer a way to pause, stop, or hide it. Apple’s accessibility guidance asks apps to respond to the Reduce Motion setting “by reducing automatic and repetitive animations”; on the web, the equivalent is honoring the reduced-motion preference.

Testing what users understand

Recognition tests: show icons without labels and ask what each means. NN/g recommends testing icons “for recognizability” and for memorability.
First-click tests: give a task and record which icon people click first.
Task-based comparisons: compare icon-only and labeled versions on task success, not just on preference; a preference test shows what people like, a task test shows what works. Trust the task data when the two disagree.

Recruit participants who match your audience, including less experienced technology users, because people who design interfaces every day can overestimate how recognizable icons are.

Questions teams ask

Point to NN/g’s guidance that labels must be visible, to WCAG 4.1.2 for accessible names, and propose a task-based test of icon-only against labeled navigation with your own users. Let the results decide.

Icon library or custom icons?

A library gives speed, consistency, and symbols users may already know. Custom icons make sense for brand distinction or for concepts no library covers, provided they match the library’s style and get tested.

Can we use emoji as icons?

Emoji render differently across platforms and carry a casual tone. They can work in informal products; for professional tools, purpose-designed icons give a consistent result.

Our icons tested well, but some customers are still confused. Why?

Research participants may not match your full audience, and lab conditions can be calmer than real use. Widen recruitment, watch real usage in analytics and recordings, and add labels where confusion shows up.

Let only the few near-universal icons stand alone, give every icon an accessible name, keep visible labels on navigation and on any icon your users have not proven they know, and test recognition with your own audience before removing a label.