Summary

Guidance on using icons to enhance user experience.


Icons

We use the suite of Material Design icons developed by Google which are published under an Apache licence making them free to use, modify and circulate. Material Design icons have a consistent style and clean, simple design with an extensive range that is regularly updated.

The icons come in a range of flexible formats including:

  • SVG files
  • A Github repository
  • A web font glyph set

SVG files

The full back catalogue of icon formats including svg files in a range of pre-set sizes can be downloaded from the Material Design website.


Github Repository

The complete set of icons including all formats available can be accessed in the Material Design website.


Material Design Icon Web Font

Icons are also available in glyph form via the custom webfont which is available to download through the Material Design website.

Examples of Material Design icons that we commonly use:

Icons

Design theory

Icons draw attention but they also quickly convey information for users and help to signpost and structure designs. They also bring points of interest to web pages in the same way that images do, breaking up text and aiding a visual hierarchy of content.

Icons also have practical advantages as they are universally understood and do not require translation for international audiences, they also help to save valuable screen estate on mobile devices.

Usage

We use icons as a form of visual language, helping users to quickly understand content and navigate our sites and services. Icons are currently used in combination with text on buttons and to indicate particular types of content such as guides or topics.

Using the same icons throughout resources helps to build a consistent user experience.

How to choose the right icon for what you need

Icons selected to illustrate text should always be relevant to the content. We actively avoid invention in the use of icons where a universally understood design convention is currently in place, for example using a pencil icon for edit buttons, the plus symbol for adding information and directional arrows for back and next.

If you are unsure of the right icon to use there are various guides available on the internet, an example is included for you here

Accessibility

The use of icons can aid the delivery of content to certain groups of users such as those with learning disabilities by providing visual clues to the associated content. Colourblind users will also gain more insight through the use of icons than colour coding error and validation feedback on forms.

There are important considerations which must be undertaken when using icons to ensure they are accessible to users who require assistive technology such as screen readers. Action required depends on whether icons are used for decorative or interactive purpose.

Icons which are used solely for decoration and repeat content already presented in the HTML do not require the icons to be announced by screen readers. Where icons are used in place of content, e.g. a burger icon instead of a menu or a directional arrow instead of a next or back button, it is essential that the icon is tagged to announce its purpose and coded so that any interactive features or actions can be triggered by a keyboard as well as a mouse.