Icons are used within our design system to represent an object or action visually to our users. Helping customers visually navigate our world. Done well, icons should help provide clarity to users reducing the cognitive load required to complete a task.
They are functional, rather than decorative and should be used sparingly, only within the parameters they were created for.
We use icons in number of different ways to convey meaning:
Signpost and navigate.
Navigational or informational signposts for content.
Illustrates content with a simple and clear visual.
Used by themselves at large size or smaller within a roundel.
If you are using the icon at a very large size to engage and visual impact, consider if an illustration might be better.
Used as a visual aid for some functions, categories or actions. These are not used as a direct element of interaction themselves but can help to signify and support an action. It is recommended that these aren't used in isolation and should be accompanied by copy to add context.
Used to show where an action needs to be taken. This includes components like buttons, controls. For instance a button might include an arrow to give the user an indication of what will happen next or a download icon to show that the user will receive something by pressing it. Functional icons can also be further split into interactive and non-interactive icons.
We can make use of brand logos and marks when we discuss products and companies. Examples of these may include: British Gas, Hive or Dyno.
Start with using BG Cyan or BG Slate
Mix two secondary colours together
Use white icons in coloured roundels
Use BG Slate in coloured roundels
Choose colours to suit the design, as long as it’s not a key part of the information
If it is a crucial element then it needs to meet accessibility and colour contrast
The colour of our interactive functional icons should be in our interaction colour, the mid blue