Icon principles

Icons are powerful visual helpers and should be used with care. An interface overloaded with icons becomes visually overwhelming and distracting.

• Icons must first and foremost communicate meaning. When it’s not clear what the icon represents, it immediately loses its meaning and becomes nothing more than visual noise.
• We use icons to help users understand what something does or what it means.
• Our set of icons use a familiar visual language from across the internet. We’re looking for them to be helpful and recognisable rather than novel.

• Use icons to improve clarity or affordance

  Each icon added to a page increases the overall visual volume. Only add icons where they have meaning.

• Use a consistent visual style

  UCL’s icons are based on the Feather Icons set and extended or redrawn where necessary. They are generally outline-only and drawn with a 2px stroke width.

• Add text labels where possible

  Icons should generally be used in combination with meaningful text to support user navigation.

• Try to use existing icons before designing new ones

  To improve consistency, please check Indigo’s icon set and only introduce new icons where communication would be limited otherwise.

• Keep it simple

  Each icon’s meaning should be immediately recognisable, following convention where appropriate.

• Use filled icons where appropriate

  Most of our icons are outlines with no fill. Consider using a filled version where it improves clarity eg at small sizes or to indicate interactivity.

• Don’t use icons as decoration

  Icons work best when they mark something as noteworthy above standard page content. Using too many icons dilutes their overall effectiveness.

• Don’t mix stroke weights

  To keep the icons clear and consistent, stick with a single stroke weight.

Can’t find the icon you need?

Link copied

Contact our design system team to discuss your requirements. They can help to find or design new icons and ensure they fit our visual style and purpose.

• 

  Name or Department

  Job Title

  name@ucl.ac.uk

  +44 (0)20 8016 7600