UX Design Tips

Icons

They Are Not Universal

In addition to conveying brand personality through color and style, icons must first and foremost communicate meaning in a graphical user interface.

A user’s understanding of an icon is based on previous experience. Familiarize yourself with icons used by competitors and with icons commonly used on platforms that you target.

There are a few icons that enjoy mostly universal recognition from users, i.e., icons for home, print, and the magnifying glass for search. However, universal icons are rare. To help the ambiguity that almost all icons face, a text label should be present alongside the icon to clarify its meaning in that particular context. Even if you’re using a standard icon, it’s a good idea to include a label.

6 icons

Use Icon Fonts

Icon fonts are just fonts. But, instead of containing letters or numbers, they contain symbols and glyphs. They can be styled with CSS in the same way you style regular text. They can be used to make buttons, navigation, and more.

Check out Font Awesome Icons or Material Icons.

Simplicity is the ultimate sophistication

~Leonardo da Vinci
Compass and map

Designing Your Own Icons

If you must design your own icons, do it carefully. Keep the design simple and schematic. Reduce the amount of graphic details by focusing on the basic characteristics of the object rather than creating a highly realistic image in order to speed up recognition. Intricate details are difficult to distinguish at smaller sizes.

When designing icons, keep in mind these 3 easy rules:

  • The 5-second rule: if it takes you more than 5 seconds to think of an appropriate icon for something, it is unlikely that an icon can effectively communicate that meaning.
  • Test the icons for recognizability: ask people what they expect the icons to stand for.
  • Test the icons for memorability: ask a repeat set of users if they can remember the icon’s meaning after being told what it represented a couple weeks earlier.

The best products don’t focus on features, they focus on clarity

~Jon Bolt
Road signs