Iconography

Utility Icons

Icon principles

Icons should represent the subject in its basic form. Through soft lines and curved edges, the style builds on the visual language of the design system as well as complimenting our brand icons.

Our core utility icons use an outlined design however, we do have a selection of filled utility icons for specific use cases, where a simpler design is required.

Scale

All our icons adhere to the 8pt grid system. We have three utility icon sizes, 32px, 24px and 16px. Icons should always work to the full artboard and be aligned to the grid.

Large icon

32px x 32px artboard

Usage

Outlined and filled versions available
Question set
Replay cards
Results
Navigation

Medium icon

24 x 24px artboard

Usage

Outlined and filled versions available
Question set
Replay cards
Results
Navigation

Small icon

16px x 16px artboard

Usage

Outlined and filled versions available
App cards
Replay cards
Inline with text

Types

Outlined

This is our default style for utility icons, they are clicklable, actionable icons, to be used to guide user interaction. The selected state could use either an outlined icon, or the equivalent filled icon version. The default size is 24px.

Outlined icons

Arrow down

Arrow left / back

Arrow right / default

Arrow up

Calendar

Cross

Document

Download

Edit

Equals

Error

External link

Filters

Gallery

Help

Info

Log out

Minus

Notification no

Notification yes

Password / show

Phone

Plus / add

Printer

Refresh

Remove

Save

Settings

Sort

Star empty

Star full

Star half

Switch

Tick

Undo

User

Filled

Filled icons can be used to accompany text, providing a visual cue to help the user navigate. They can also be used as an end state interaction to show an outlined icon has been interacted with.

Filled icons

Car

Credit card

Document

Error

Heart

Info

Log out

Notification no

Notification yes

Paw

Phone

Plane

Printer

Remove

Save

Settings

Star

User

Valid

Warning

Strokes and fills

Icons are drawn using style guides for optical alignment and maintain visual consistency. These can be found in the Sketch Library.

Strokes are set and are defined for each size below. They do not need to follow an alignment, however strokes do need to sit on the grid, to avoid any blurred pixels on non-retina displays.

It is OK to use half and decimal point pixels to achieve vertical and horizontal alignment with grid.

All icon symbols have an invisible container behind the icon so they export at the correct icon size and maintain 8px spacing.

Stroke ends have rounded caps and corners. You can also apply a 1px radius if rounded corners can’t be used.

Colour

Utility icons are mainly used as part of an action, therefore Primary Pink is the default colour used on all utility icons in the functional space.

Pink

Arrow left or back

Arrow up

Arrow right or default

Phone

Plus or add

Printer

Other brand colours

As part of user interface design it may be required to use another colour or gradient from the brand palette. This will be dependent on the message being delivered and the context of use.