Icons work when they reinforce a label, and fail when they replace one. Recognition of unlabelled icons is far lower than designers assume for everything except a small handful that decades of use have made universal, and the ones businesses invent are not among them.

The recognition problem

Very few icons are genuinely understood without text. A magnifying glass for search, a house for home, an envelope for email, a telephone for calling, and a shopping basket. That list is close to complete.

Everything else is learned in context or guessed. An icon meaning services on one site means settings on another. A gear, three dots, and three lines all appear on different sites meaning different things.

The designer knows what it means because they chose it. The visitor does not, and the ones who guess wrong end up somewhere they did not intend, which on a small business site is usually the end of the visit.

The rule

Icon plus label. The icon speeds recognition for people who already know it; the label works for everyone else.

That combination costs a few words and removes the guessing entirely. It is also better for search and for assistive software, since text is readable and an icon is not.

The exception is a small set of controls where a label is genuinely impractical and the convention is strong, such as a close button on a dialogue. Even there, the control needs a text alternative in the markup for anyone using a screen reader.

Where unlabelled icons cost the most

The menu

Three lines is now widely recognised, and adding the word menu beside it still measurably improves how many people open it, particularly among older visitors who are frequently the ones with the budget.

A small change that costs nothing and increases the number of people who reach anything beyond the homepage.

Contact controls

A phone icon on its own in a header is ambiguous, since it might dial or might scroll to a contact section. The number itself, as text, works better and is also the thing people want to see.

Service tiles

A grid of abstract icons above service names is common and harmless when the names are there. The same grid without names, relying on the icon to convey the service, is a puzzle.

Social links

Platform logos are the one case where the icon genuinely is the label, since the mark is the brand. These are fine unlabelled, and they belong in the footer rather than the header for a business site.

Decorative icons

Icons used purely as visual texture beside a heading or in a feature list are legitimate and require one thing: they should be hidden from assistive software rather than announced.

An icon with no meaning, announced as an image with a filename, is noise for a screen reader user. Marking it decorative removes it cleanly.

The test is whether removing the icon changes what the reader understands. If not, it is decoration and should be marked as such.

The practical mistakes

The library weight one is worth a specific check. Loading a full font or library for a handful of icons can cost more than every image on the page, and using individual files instead removes it entirely.

Where icons genuinely help

Three cases, and they are narrower than the usual use.

Repeated scanning. In a list where the same categories recur, an icon gives the eye an anchor and speeds finding the right row.

Status. A tick, a warning, or a cross alongside text conveys state faster than reading, provided the text is there too.

Universally understood actions. Phone, email, search, and location, where the convention is genuinely settled.

Outside those, the icon is usually decoration, which is fine as long as nobody is relying on it to communicate.

The check

Cover the text on your own site and look at the icons alone.

Ask what each one means. Then ask somebody who did not build the site the same question. The gap between the two answers is the size of the problem, and on most small business sites it is larger than expected.

It is the same question as whether an image is doing work or filling space, which is covered in choosing images that are not just decoration.

Frequently asked questions

Do icons need labels?

Almost always. Only a handful are genuinely understood without text: search, home, email, phone, and a shopping basket. Everything else is guessed.

Should the menu icon have the word menu beside it?

Yes. Three lines is widely recognised, and adding the label still measurably increases how many people open it, particularly among older visitors.

When are unlabelled icons acceptable?

Platform logos, where the mark is the brand, and a small set of controls with strong conventions such as a close button. Even those need a text alternative in the markup.

How should decorative icons be handled?

Marked as decorative so assistive software ignores them. An icon with no meaning announced by its filename is noise for a screen reader user.

What is the most common technical mistake with icons?

Loading an entire icon library for six icons, which can cost more weight than every image on the page. Individual files remove the problem.

How do I test my own icons?

Cover the text and ask what each icon means, then ask someone who did not build the site the same question. The gap between the answers is the problem.

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.

Icons on your site that only you can read?

We add the labels, cut the library weight, and make sure nothing important is being communicated by a symbol alone.

Start a Conversation