An icon is not a drawing

Of all the habits a graphic designer brings to the web, drawing the thing yourself is the one that costs the most. With icons it is almost always the wrong move, and the reason has nothing to do with how well you draw.

Geert Valère Allegaert · October 2026

As long as people understand what function a symbol represents, it doesn’t matter if they don’t know what the object is.

Aurora Harley, Usability Testing of Icons, Nielsen Norman Group, 2016

An icon looks like a drawing problem, which is why designers treat it as one. It is a vocabulary problem. A magnifying glass means search, not because a lens resembles the act of searching, but because thirty years of software has put that shape next to a search field. A floppy disk still means save to people who have never held one. The shape is arbitrary. What makes it work is that it was there before, in the same place, doing the same job. Draw a new one, however much better it looks, and you have removed the only part that was doing the work.

This is the opposite of how a graphic designer is trained to think, which is why it keeps happening. A bespoke icon set reads as care. On a web page it mostly reads as a puzzle.

What recognition is actually made of

Aurora Harley, testing icons at the Nielsen Norman Group, found the genuinely recognised set to be tiny: home, print, and the magnifying glass for search. Almost everything else shifts meaning from one product to the next. A heart is a favourite here, a like there, a save-for-later somewhere else. A star is a rating, a bookmark or a flag. Even the hamburger, three stacked lines and about as close to a standard as web iconography gets, does not always open the same kind of thing.

Her test is worth stealing because it costs nothing. Show the icon on its own, with no interface around it, and ask somebody what it does. Not what it is — what it does. Those are different questions, and the second is the one that matters: nobody needs to identify a floppy disk to know that the strange square means save. Then come back a day later and ask again, because an icon that has to be learned twice has not been learned.

She also offers a rule that doubles as a warning. If it takes you more than about five seconds to think of a suitable icon for a function, that function probably cannot be drawn. The honest response at that point is a word, not a longer search for a picture.

Every icon needs words

This is not a style preference, it is the first rule in the accessibility guidelines. WCAG success criterion 1.1.1 asks that all non-text content presented to the user have a text alternative serving the equivalent purpose. It is level A, the lowest bar in the document. There is an exception, and it is the useful part: content that is pure decoration must be implemented so that assistive technology can ignore it altogether.

So every icon on a page is one of two things, and each has its own markup. A decorative one — the little shape next to a heading that repeats what the heading says — gets aria-hidden="true" and, on an inline SVG, focusable="false". One that carries meaning on its own gets role="img" and either a <title> inside the SVG or an aria-label on it. Scott O’Hara has written the clearest version of this; the whole of it fits on a postcard. The common mistake is not choosing the wrong one of the two. It is doing neither, and shipping a button that a screen reader announces as nothing at all.

But the text alternative that matters most is not the invisible one. It is the visible label beside the icon, and it should be visible rather than waiting behind a hover — a hover does not exist on a phone, and it does not help the person who is already unsure what the icon means. An icon with a word next to it is faster for the people who recognise it and possible for everybody else. An icon alone is a quiz.

I used Font Awesome for years, on a lot of sites, and it says all of this in its own documentation: a meaningful icon gets aria-hidden="true" plus a text alternative in a sibling element. The set I was leaning on had written the rule down since its first release in 2012.

The part that only shows at sixteen pixels

An icon is not a small drawing. It is a drawing with almost no room, and the decisions are different ones. Stroke weight that holds at sixteen pixels and does not go spindly at forty-eight. Shapes that land on the pixel grid instead of straddling it. Optical alignment, because a circle and a square of the same height do not look the same height. Then the same shape again in a dark colour scheme, where a hairline that was elegant on white disappears.

And the real cost is not the first icon, it is the twelfth. A set has to agree with itself: the same stroke, the same corner radius, the same amount of air inside the box, the same level of abstraction. Drawing one good icon is an afternoon. Drawing fourteen that look like siblings is a project, and it is a project you will do again the next time the brand changes. That is a lot of work spent on the one element of a page nobody is meant to notice.

Font or SVG

Tyler Sticka made the case against icon fonts in 2015 and it has held up. A screen reader may read out the Unicode character sitting behind the glyph, which produces nonsense. A reader who swaps the font for a dyslexia-friendly one loses every icon on the page. The private-use code points collide with emoji, which is how Etsy once showed a review as four stars and a horse. A glyph that fails to load leaves a box rather than nothing. And font hinting was built for letters, not for a shape that has to sit square on a grid. His conclusion was SVG, and Font Awesome itself now ships both a webfont and an SVG build.

There is a plainer argument underneath it. A small site uses six icons. A set is a thousand or more. Loading the set means a request to somebody else’s server, a dependency that can change under you, and a file in which 994 glyphs are dead weight. Six inline SVGs in the theme cost one request — none, really, since they travel inside the page — and they are still there in ten years, whatever happens to the project they came from.

Which is the same argument as the one about plugins, arriving from a different direction.

What follows is the whole procedure, as short as I can make it.

And the little drawings

Icons are the narrow case. The wider one is the illustration that goes in because the page looks empty: the figure gesturing at a chart, the outlined person beside the contact form, the swooping arrow that points at nothing in particular. Edward Tufte named this in 1983, about graphs rather than web pages, and the word still fits. Chartjunk is the decoration that generates ink without telling the reader anything new.

The test is the same one, and it is not about taste. Does this carry information? A diagram that shows how something is put together carries information, and is worth the weight and the alt text and the hour of drawing. A figure holding a magnifying glass over a graph carries none; it is there to cover a gap in the layout, and a reader on a slow connection pays for it in seconds.

None of which says that the drawing instinct is wrong. It says it is aimed at the wrong target. The skill that would have gone into fourteen bespoke icons is the skill that makes a diagram somebody actually understands, and there is far too little of that on the web. Spend it on the thing that explains, and let the button say what it does in a word.

Read the originals

• Aurora Harley, Icon Usability — Nielsen Norman Group, 2014. The one to read if you read one: which icons are actually recognised, and why the rest are not.
• Aurora Harley, Usability Testing of Icons — Nielsen Norman Group, 2016. The method, including the distinction between recognising the object and inferring the function.
• WCAG 2.2, success criterion 1.1.1 Non-text Content — W3C. The text-alternative rule itself, and the decoration exception.
• Scott O’Hara, Contextually Marking up accessible images and SVGs — 2019. The markup for both cases, with the edge cases.
• Tyler Sticka, Seriously, Don’t Use Icon Fonts — Cloud Four, 2015. Why the font is the wrong container, in six concrete failures.
• Accessibility — Font Awesome documentation. The set’s own instructions, which say to label every meaningful icon.
• Edward Tufte, The Visual Display of Quantitative Information, 1983 — where chartjunk gets its name. Not online; worth owning.