When Icons Replace Words That Should Stay
Most icons are not a universal language, and replacing labels with them trades a little elegance for a lot of confusion.
There’s a moment in the life of many websites when a designer looks at a row of labeled buttons and decides the labels are clutter. The words come off, the icons stay, and the page looks cleaner. Everyone on the team agrees it looks cleaner, because everyone on the team already knows what the icons mean. Then real visitors arrive, hover over a pictogram of three sliders, and quietly fail to find the filters.
The mistake rests on a flattering theory: that icons are a universal language, faster than words, understood by everyone. It’s mostly false. A handful of icons have earned true universality, and the list is shorter than people think. The magnifying glass means search. The house means home. The shopping cart means cart. The play triangle means play. The X means close. Beyond that small vocabulary, comprehension falls off a cliff. The three stacked lines of a hamburger menu took years of ubiquity to become recognizable, and plenty of visitors still don’t open it. The gear might mean settings. The funnel might mean filter, unless the visitor has never used a funnel or thinks it’s a martini glass. A heart might save, favorite, or like, and those are three different actions with three different consequences.
Words don’t have this problem. The word “Filter” means filter. It means filter to a first-time visitor, to a seventy-year-old, to someone reading in their second language, to someone in a hurry on a phone. A label is self-explaining in a way no drawing of an abstract concept can be, because most of what software does is abstract. You can draw a printer. You cannot really draw “export,” “sync,” or “manage subscription,” which is why the icons for those things are arbitrary shapes that each product invents differently. An icon that varies across products isn’t a language. It’s a puzzle.
The costs of the puzzle are unevenly distributed, which is part of why teams miss them. Power users learn the icons within a week and never think about them again. New visitors, the exact people a marketing site exists for, bear the whole burden. So does anyone using a screen reader, if the icon shipped without an accessible name, which unlabeled icons often do. When an icon is just an image or a glyph with no text and no alternative text, a screen reader announces something like “button” and nothing else. The sighted visitor gets a riddle; the blind visitor gets silence. Keeping the visible word solves both problems at once, because the label is right there for eyes and assistive software alike.
There’s also a subtler cost: hesitation. Even when a visitor eventually decodes an icon, the decoding takes a beat, and a page full of small decodings is tiring in a way nobody consciously notices. People don’t say “this site’s icons are ambiguous.” They say “this site is confusing” or just feel a vague friction and leave sooner. Reading a word is faster than interpreting a picture for anything that isn’t in that tiny universal set, which inverts the whole premise. The icons weren’t a shortcut. The words were.
None of this means icons are bad. Icons are excellent companions to words. An icon next to a label makes a button easier to spot at a glance, easier to remember, and easier to find again, because shape and color are scannable in a way text alone isn’t. The winning pattern in nearly every case is icon plus label, and the honest test for dropping the label is strict: would a stranger, seeing this icon for the first time, with no tooltip and no exploration, know exactly what happens when they tap it? Search passes. Cart passes. Your custom pictogram for “compare plans” does not pass and never will.
The pressure to strip labels is strongest on mobile, where space is tight, and that’s exactly where stripping them does the most damage, because mobile visitors are the most rushed and there’s no hover to reveal a tooltip. A tooltip is a confession anyway. If an icon needs one, the design already knows the icon isn’t enough; it’s just hiding the answer behind a gesture phones don’t have.
I build GazeSite, which audits websites for readability among other things, and unlabeled icon navigation is one of the most common findings on otherwise polished sites. Polished is the operative word. The bare-icon look reads as sophistication to the people who made the page. To the people using it, a word is not clutter. A word is the interface working. When in doubt, keep the words. When not in doubt, check whether the doubt is just familiarity, and keep the words anyway.
More articles
People abandon checkouts not because they changed their minds about the product but because the final step gave them a new reason to worry.
Read →If you fix only one thing, make your forms work: label every field and announce every error.
Read →Most readability scores measure the wrong thing; a few simple checks measure the right one.
Read →