Icons are everywhere, both in software and outside of it. The power of an image helps users identify things quickly and accurately.
The KDE visual design group calls icons “a shorthand for conveying meaning that users perceive almost instantaneously.” They can be also useful for internationalization and when concepts are hard to describe in words.
When to Use Icons
It is rare that icon use is actively discouraged. The biggest danger when using icons is the use of ambiguous or unclear icons, which can either mislead the user or conflict with their adjacent label, resulting in a slower and/or more frustrating experience with your product. In short, bad icons are costly.
The GNOME developer guidelines state that choosing the correct icon for each purpose is “vital to making sure that your application is usable.” They go on to encourage their use, though, calling them “an essential part of any application” and “a crucial part of its identity.”
Icons are also a great way to provide redundancy, especially for important messages. In the following example, there are three ways that the error state is conveyed: the text itself, the color, and the icon. The icon reinforces the severity of the message.
When used correctly, icons can speed up a user’s interaction with your product, enhance its usability, and reinforce your brand identity.
How to Use IconsNote: The Google Material Design Guidelines differentiate between product icons and system icons. Product icons are primarily for branding and visual identity purposes. An example of a product icon is an application icon on the task bar or home screen. The guidelines below apply mostly to system icons, which are identifiers for actions or commands.
The KDE Human Interface Guidelines have some good rules for icon design. Here are a few:
- Adjust the degree of abstractness according to familiarity of the metaphor.
- Apply metaphors only once (e.g. do not use a brush twice for different options).
- Use arrows only if they can easily be related to spatial features such as Previous/Next in a sequence or Up/Down in a hierarchy. Avoid using arrows metaphorically (such as for Reply/Forward or Undo/Redo).
- Use consistent rules for placing text next to icons (see examples here).
- Icons that lose details when shrunk may need a special version that preserves meaning even at smaller sizes. Critical details may become unrecognizable when scaled down.
- Avoid using text in icon designs; it may not scale well to smaller sizes.
Here are a few other recommended best practices:
- Follow conventions. Don’t create new metaphors when familiar ones exist. (GNOME Human Interface Guidelines)
- Always accompany icons with text labels unless the icon metaphors are nearly universally recognized (e.g., home, print, search), which is rare. (Nielsen Norman Group), (Axess Lab)
- Don’t use icons that are commonly associated with a different meaning. (Nielsen Norman Group)
- Establish color and design rules for icons and apply them consistently. See the Google Material Design guidelines for a good example.
- Apply tooltips for additional information or when labels aren’t used.
Lastly, this article on different ways of mapping icons to the ideas you want to convey is another useful resource.
Types of Icons
Icons often have “on” and “off” variants that are used to indicate those respective states. Clicking or tapping will toggle them. A common example is switching between “liking” and “unliking” something. Badges can also be overlaid on top of icons to indicate a more complex state.
Aside from a simpler version of icons, called badges, most variations in icons come from their look and feel. Some are monochromatic and simple, others are bright and intricate. They can use a “filled” or “outline/hollow” style. The most important thing is that they are consistently styled and quick to grasp.