What Icons Are Actually For

The hamburger menu icon was designed in 1981 by Norm Cox for the Xerox Star workstation, three short horizontal lines stacked to suggest the list of options they would reveal. Cox later said the graphic was meant to be very "road sign" simple, functionally memorable, and mimic the look of the resulting displayed menu list, drawn to read at the 16-by-16 pixels he had to work with. The icon appeared briefly in Windows 1.0 in 1985, then disappeared for nearly three decades.

It came back in the smartphone era. This time, it returned without the shared context that makes a road sign work.

What the research found

Nielsen Norman Group's Aurora Harley reviewed decades of icon research and published the finding in 2014: most icons require a text label to reliably communicate their function. The exceptions are small. Home, search, and print are broadly understood because enough interfaces have repeated them consistently enough that the mapping became learned. Most other icons depend on whether a particular user has seen and used that icon in that context before.

The argument that icons are intuitive rests on the assumption that users share a visual vocabulary. Some of that vocabulary is real: a trash can means delete, a floppy disk means save, and most users who grew up with computers can parse both without thinking. But the floppy disk is now a learned symbol from an object most people have never touched, which says something about how these associations actually form. They are not obvious. They are trained.

The hamburger as test case

When Nielsen Norman Group tested hidden navigation against visible navigation, the results were specific. On desktop, people used hidden menus in only 27% of cases, against 48% for visible navigation and 50% for combo navigation, a hamburger plus persistent links. Tasks were at least 39% slower when navigation was hidden. On mobile the gap narrowed but persisted: the combo pattern was used 86% of the time against 57% for hidden navigation. The reason is not that users cannot find the hamburger. Most can. It is that a menu behind a control carries no information scent: nothing visible tells you what is in there.

The interaction itself adds a step. Where a visible link goes directly, a hamburger requires: notice the icon, decide the content is in there, tap, read the options, select. That is several more steps than a link you can see from the start, and each one is a place a user unsure of where to go can stall.

What icon libraries changed about this

Icon libraries made the problem cheaper to encounter. Font Awesome launched in 2012, made originally for use with Bootstrap. It packaged hundreds of icons into a single font file. By 2024 it was used by 25.4% of sites that use third-party font scripts, second only to Google Fonts. The result was a proliferation of icons drawn from a shared vocabulary, which sounds like a solution to the comprehension problem, but shared vocabulary only helps if the vocabulary is genuinely shared.

Many of the icons in a library like Font Awesome are not universally understood. Three vertical dots mean "more options." A bell means notifications. A heart means "like," except when it means "save," except when it means "favorite," which is also what a star means. These distinctions exist in context, but they are not legible from the icon itself. A developer who reaches for the bell or the heart is reaching for a symbol many users will read wrong.

The argument for icons without labels

The case for standalone icons is real and the field takes it seriously. Icons are compact where labels are not, which matters in dense interfaces where every pixel is load-bearing. They work across languages, which labels tied to a single language do not. And in cases where the icon is already well-understood, the label is redundant and adds visual noise.

The problem is that "already well-understood" does less work than designers assume. Aurora Harley's recommendation is precise: comprehension requires not only that a user recognizes what the icon depicts, but that they know what function it triggers in that context. An icon that passes the first test can still fail the second. A magnifying glass clearly depicts a magnifying glass. Whether it searches, zooms, or opens a new panel in a given interface, the shape does not say.

Where the field settled

The practical resolution is context-dependent, and most mature design systems encode it. Tab bars on iOS usually pair icons with labels, because Apple's Human Interface Guidelines tell you to give each tab a concise title and to use an icon alone only for a universally recognized symbol like search or settings. Toolbars are different: a formatting toolbar in a text editor can operate without labels because the users are specialists who have learned the vocabulary through repeated use, and the icons are compact enough that labels would consume most of the available space.

The hamburger endures, and designers keep using it despite the research, because the alternative, showing the full navigation on a small screen, requires collapsing a navigation structure that many products, built before mobile, were never designed to prioritize. The hamburger is often a solution to an earlier design failure rather than an independent choice.