Icons

Icons are visual symbols that help users navigate and understand actions within our digital spaces. Our icon system provides clear, accessible visual communication.

Overview

Icons are an essential element of any interface, packing an informative punch into a small form factor. To ensure consistency and readability, their limited size means that each icon must strictly adhere to guidance while still expressing essential characteristics.

The icon library includes essential interface elements organized into functional categories:

Navigation

For wayfinding and directional cues

Information

For messaging and feedback

Playback

For interactive controls

Social

For social media

Contact

For connecting

Icon design

Icons follow these design guidelines to create a cohesive system:

Readability: Icons use clean, geometric shapes that are easily recognisable and avoid unnecessary detail.

Style: Icons share the same visual weight, stroke width, and straight corner edges with no corner radius.

Scalability: Icons scale seamlessly, remaining legible at the smallest sizes on various screen resolutions.

Colour: Icons use one colour as a ‘content-default’ from the colour tokens to allow the right colour token to be chosen for the respective theme.
The icon colour must always match the font colour.

Size and spacing: Icons fit within a 24 x 24 pixel bounding box. This is broken down into a live area for each icon of 18 x 18 pixels, surrounded by padding of 3 x 3 pixels.

Icon showing live area and padding

There are occasional exceptions where an irregular shaped icon may use some of the padding outside of the live area, but icons must never exceed the bounding box.

Interaction: Icons inherit links from their parent container.

Accessibility

Our standardized industry icons are extracted from the Google Material Design collection which adhers to WCAG guidelines.

Icons are designed to meet accessibility standards and work effectively alongside text labels. When used alone, icons include appropriate ARIA labels to support screen readers.

When icons are used without accompanying text, always include descriptive alt text or ARIA labels to ensure screen reader accessibility.

Usage guidelines

Icons should be used consistently throughout the interface to maintain visual coherence and user understanding.

When to use

• Use icons to support quick recognition of common actions, objects, or statuses.
• Use icons when space is limited, and visual scanning needs to be faster than reading text.
• Use icons to reinforce labels and improve navigation clarity across interfaces.
• Use icons consistently to create familiar patterns and reduce cognitive load.

When not to use

• Do not use icons that rely on cultural, ambiguous, or unclear interpretations.
• Do not use icons without labels when the meaning may not be immediately obvious.
• Do not use decorative icons that add visual noise without functional value.
• Do not use too many icons in one area, as they can reduce hierarchy and readability.