Maria Kuhn: April 1, 2017

They Are (not) Universal

icons 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.

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! Font Awesome is an icon font designed to work perfectly with Bootstrap. Learn more about it here...

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.)

Use 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.