Icons

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 Icons

Note: 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:

Lastly, this article on different ways of mapping icons to the ideas you want to convey is another useful resource.

Basic Usage


Types of Icons

States

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.

Variations

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.




Edit this page