Icons and illustrations

Most icons are not as obvious as they feel

A handful are genuinely universal: a magnifying glass, an envelope, a telephone, a cart. Almost everything else is a convention somebody learned somewhere, and a reader who did not learn it sees a shape.

The designer knows what it means, which is what makes this hard to notice. The icon reads as obvious to the person who chose it and as decoration to a share of everybody else.

So the test is not whether it looks right. It is whether somebody unfamiliar with your site could name the action without being told, and for most icons the honest answer is no.

Label anything that does something

An icon that performs an action needs a visible text label beside it. That single rule removes almost every problem icons cause and costs a few words of space.

Where space genuinely does not allow a visible label, the icon still needs an accessible name in the markup so a screen reader announces something other than the file name.

Our page on buttons and controls covers the mechanics. An unlabelled icon button is one of the most common accessibility faults on small business sites.

Decorative icons should be invisible to assistive technology

An icon beside a heading that repeats what the heading says adds nothing for a screen reader user and makes the page noisier. Those should be marked so they are skipped entirely.

Our page on alt text covers the distinction between an image that carries meaning and one that decorates. Icons fall on both sides and are usually treated as one.

The rule of thumb: if removing the icon loses nothing from the sentence, it is decoration and should be hidden from assistive technology rather than described.

Where icons earn their place

The list below is where an icon genuinely helps a reader rather than filling a space. Outside these, a plain heading almost always does the job better.

• A universally understood action, labelled
• Marking a repeated item in a long list
• Indicating state, alongside a word
• Showing a file type or a format
• Breaking up a list so it can be scanned
• Never as the only signal of anything
• Never as a substitute for a heading

Keep the set consistent

Icons from several different sets on one page read as assembled, because line weights, corner treatments and proportions differ in ways that are felt rather than noticed.

Pick one set and use only it, in one size and one weight unless there is a reason. This is the same discipline that applies to typefaces and it produces the same improvement.

Check them at the size they are actually displayed. Detailed icons turn into smudges when small, which is where a set designed for large use fails on a phone.

Illustration is atmosphere, not information

An illustrated scene can set a tone and is a legitimate thing to want. What it must not do is carry information, because a reader who cannot see it gets nothing and it is unsearchable.

It also ages faster than photography. An illustration style strongly associated with a period dates a site in a way a plain photograph of real work does not.

Our page on which images belong covers the test. Illustration passes when it is doing a job, and it frequently exists because a page felt empty.

Weight and format

Icons should be shape-based files rather than images, so they stay crisp at any size and weigh almost nothing. A page carrying icons as photographs is paying for something a few lines of markup would do better.

Avoid loading a whole icon library for six icons. That is a common and invisible cost, and most sites use a small fraction of what they download.

Our page on page speed covers the budget. Icons are rarely the largest item and they are among the easiest to get wrong for no benefit.