Icons can make our interfaces clearer, cleaner, and more enjoyable without taking up too much screen space. However, there’s a delicate balance between enhancing the user experience and overwhelming the user with too many icons. It’s important to use icons thoughtfully and make them accessible, rather than simply relying on them as a space-saving shortcut.

Icons Need a Text Label

Only a few icons are universally recognized by users, like the home, print, and magnifying glass icons for search. Most icons, however, are ambiguous because they mean different things on different interfaces. This inconsistency makes it hard for users to rely on an icon’s functionality, which can affect its adoption over time.

Icons such as the heart and the star often represent favorites, bookmarks, featured items, and ratings from other users, but their precise meaning varies between applications. These icons can also compete with each other, adding to the confusion. As a result, it’s hard for users to remember their meanings accurately.

To overcome this ambiguity, it’s best to include a text label alongside an icon to clarify its meaning in a particular context. Even if you use a standard icon, it’s still a good idea to include a label, especially if you’ve modified the icon’s appearance. It’s important to make sure that the label is always visible without requiring any interaction from the user. For navigation icons, labels are particularly important, so don’t rely on hover to reveal text labels as this can increase the interaction cost and doesn’t work well on touch devices.

Metaphors

If you’re designing an icon for a hardware device or file type, such as those for MimeType or Device icons, the shape of the icon is typically a visual representation of its real-world counterpart. For example, the icon for a camera is a stylized camera.

To make new icons easy to recognize and remember, follow these guidelines:

• Keep the design simple and schematic. Focus on the basic characteristics of the object rather than creating a highly detailed and realistic image. Intricate details can be difficult to distinguish at smaller sizes.
• Use the 5-second rule: if it takes you more than 5 seconds to think of an appropriate icon for something, it’s unlikely that an icon can effectively communicate its meaning.
• Test the icons for recognizability by asking people what they expect the icons to represent.
• Test the icons for memorability by asking a group of users to remember the icon’s meaning a few weeks after being told what it represented.

Always include a visible text label to accompany the icon! As Bruce Tognazzini famously said, “a word is worth a thousand pictures.”