There is a scourge taking over digital design: icons without labels.

You can help put an end to this deceptive practice.

Add a label to your icon. Add labels to all your icons.

Icons without labels

Google Sheets toolbar showing 32 icons without labels.

Google Sheets has a toolbar containing 25 icons without labels with a submenu containing 7 more icons without labels.

VSCO app showing 6 icons without labels in the navbar and 1 icon without a label in the main area.

The VSCO app navbar has 6 icons and no labels.

Navbars

Navbars are a common source of icons without labels. Learn more about navbar icons without labels.

Slack’s app with 3 icons without labels, search, and 3 more icons without labels.

Slack uses a search bar to separate its 6 icons without labels.

Toolbars

Toolbars are rife with icons. They rarely have labels. Learn more about the myth of icon usability.

Gmail’s email actions.

Gmail uses icons without labels for actions you can take on an email only when you hover over it.

Actions

You can often see icons without labels for inline editing actions. Learn more about designing for icon usability.

A paragraph containing 4 linked words side by side.

This paragraph has 4 links in a row to non-descriptive places like the word “who”.

Mystery meat navigation

Mystery meat navigation” describes links that do not have a clear destination. You need to hover over the link to uncover its destination or follow it with wild abandon. Like mystery meat—processed meats with unidentified sources—mystery meat navigation is clear to the creator but not to the consumer.

Icons are not the only kind of mystery meat navigation. Poor link text also confuses readers.

What designers and developers say

Di.

The symptoms of mystery meat navigation include decreased click confidence, wayfinding challenges, longer task completion times, and abandonment.

You have to give icons alt text anyway. You may as well give them labels.

—Diana MacDonald, Practical UI Patterns for Design Systems

Jack’s avatar.

Interacting with modern software involves poring over inscrutable hieroglyphs trying to find the one button that might do what you want. This button may be buried in a settings menu (which "cog" button is it?), or stuffed into a drawer behind a hamburger button that looks like nothing at all. And you won't find out if it's the right thing until you try.

—Jack, developer and speaker

What can you do?

Use meaningful icons

Icons establish visual language and create visual interest.

Use icons with physical resemblance to signified objects. Reserve outline icons for actionable icon buttons.

Write informative labels

A label is a classifying name that adds clarity and aids navigation.

Write labels that identify objects. Use plain language. Test the readability score of your labels. Use consistent naming conventions. Use the same label for an icon every time.

Label your icons

When you add a text label to an icon, you immediately make the interface more understandable and less bewildering to new users.

If you really must have an icon button without a label, show a tooltip on hover and focus (for people using touch devices, keyboards, or screen readers).

Conduct usability tests

Only use icons without labels when you have rigorous usability testing to back you up.

Learn more about conducting usability tests on icons.

Make the world a clearer place.

You can make the web a more accessible, inclusive space.

Share the love. When you add a label, tell the Twitter community and spread the good vibes.

This site uses Google Analytics to track usage data for improving the site using cookies. Label Your Icons anonymises IP addresses before sending them to Google and Google Analytics retains cookie data for 26 months.

© 2022 Diana MacDonald.

Built with Gatsby.

GitHub