An Icon Without a Label Is a Guess

Icons are appealing to designers. They're compact, they look tidy in a row and they seem to work in any language. A toolbar of neat symbols looks cleaner than a toolbar of words. The trouble is that most icons don't mean what their designer thinks they mean, at least not to everyone.

When an icon appears without a label, the visitor has to guess. Sometimes they guess right. Often they hover, hoping for a tooltip, or tap it to find out, or ignore it altogether.

Few icons are universal

Very few icons are understood by nearly everyone. A magnifying glass for search, a house for home, a cross to close and a basket in a shop are about as close as it gets. Even the three-line menu icon took years of widespread use before most people recognised it, and it's still common to see it paired with the word "Menu" for good reason.

Beyond that short list, meaning gets shaky. A heart might mean favourite, like or save. A star might mean favourite, rating or featured. A cog might be settings, preferences or tools. Arrows can mean share, export, reply, forward or download. People familiar with one app bring its meanings to yours.

Labels cost less than you think

The argument against labels is usually space. In practice, a short word next to an icon rarely causes problems on desktop, and on mobile, a small label under each bottom navigation icon fits comfortably. The label makes the button bigger, which also makes it easier to tap.

Labels help people decide faster. They don't need to interpret the symbol, they just read. They also help people who use voice control, who need a visible word to say in order to activate a button.

When an icon can stand alone

We do use icons on their own in a few specific situations. When the meaning is universal, like the close cross on a dialog. When the context makes it obvious, such as play and pause on a video player. And in dense tools where people use the same controls every day and learn them quickly, as long as there's a tooltip and the full set is explained somewhere.

Even then, every icon-only button has an accessible name in the code, so screen readers can announce what it does. An unlabelled icon is a guess for sighted users. For screen reader users, without that name, it's announced simply as "button", with no clue at all.

Icons as support

The best use of icons is often alongside words rather than instead of them. An icon next to a label helps people scan a long menu, recognise a section they've visited before or spot a category quickly. The word carries the meaning and the icon helps with finding it.

We also keep icons consistent. One icon means one thing throughout the product, and each action has one icon. Using a pencil for edit in one place and a pen in another makes people wonder whether they're different actions.

Testing the guess

A simple test we use is to show people a set of icons without labels and ask what each one does. The results are usually humbling. Icons that seemed obvious in the design file get three or four different answers. That's often enough to settle the debate about whether labels are needed.

Clear labelling is a big part of how we approach app development and site navigation. If your interface relies on symbols and you're not sure people understand them, we're happy to help you find out.