Icons

Nucleus icon suite.

Why we use icons

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.

How we use icons

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.

Categories

Clarifying

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.

Nucleus icons

Functional

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.

Nucleus functional icons

Logos/marks

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.

Nucleus logo icons

Colour

πŸ’š Do's

πŸ’” Don'ts

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

​