Icons provide supplementary visual cues that reinforce meaning conveyed through text. They exist to aid recognition, guide attention, and reduce cognitive effort when scanning a page. They do not replace language or carry meaning independently.
Do's
- use icons sparingly, reserving them for moments where a visual cue genuinely reinforces the accompanying label or action
- always select icons that are immediately recognisable and semantically matched to the content they accompany
- maintain consistent sizing, orientation, and alignment with surrounding elements
- systematically apply the same icon for the same concept throughout - users build mental models from repeated associations
- for social media icons specifically, evaluate whether the social media component from Webtools is appropriate
Don'ts
- do not select icons based on visual appeal alone; an icon that is not immediately symbolic in its context adds noise rather than clarity
- do not introduce custom icons outside the ECL icon set - bespoke icons can undermine the shared visual language
- do not omit alternative text - icons rendered without proper accessibility attributes are invisible to assistive technologies
When to use
- use an icon when a label or navigational item benefits from a recognised visual anchor that speeds scanning and understanding
- use when reinforcing the meaning of an action, category, or status where a suitable, unambiguous icon exists in the ECL set
- use when visual differentiation between list items or sections helps users orient themselves
When not to use
- do not use an icon when its meaning is ambiguous. If in doubt, a text label alone is safer and more accessible
- do not reach for icons simply to add visual interest or break up content. Their value is functional, not decorative. Instead, use Labels or structured layout patterns where visual hierarchy is the underlying need