Icons are helpful complementary visual cues that communicate meaning through the use of symbolic pictographs.
Do's
- use icons scarcely, only to complement already existing information, direct attention or offer visual cues
- always use the icons that are symbolic and representative to the items they accompany
- make sure the color, size, orientation and alignment are homogeneous with the other elements present on a particular page
- ensure consistency is maintained (color, size and orientation) - users form mental models and thus having the same icon associated with a concept consistently helps create a robust and predictable system
- place the icon at the left of the label (exceptions only apply to Arabic pages - where it will be placed to the right - and for Chinese, Japanese and Korean - placed above the label)
- for social media icons, consider whether it is suitable to use Webtools social bookmarking or share buttons
Don'ts
- don't create new icons
- don't use icons on their own without a label
- don't use icons without an ALT tag
- don't select icons that aren't symbolic or easily identifiable and recognisable
When to use
- use to add a visual cue to content and supplement understanding of labels
When not to use
- don't use icons to replace labels or navigation items
- don't use when there are many elements on a page for which you want to use icons - leads to visual clutter, impedes scannability
- if an icon is ambiguous in the context of your page then a text label is better