Last modified:

The Design system currently features a limited number of icons.

These are encoded as SVGs, in the CSS.


Last modified:

TODO: update!


Last modified:

The application has used various third-party icons:

  • FontAwesome icons
  • Material icons
  • various bespoke icons included in third-party React features

Our icons follow Material icon styles.

Stroke weight should maintain a minimum of 2 pixels.


Last modified:

Viewport size

Our icons are designed as SVGs and optically optimized on a 24×24 pixel viewBox or grid.

Icons must be placed in square viewports.

Some bespoke icons may be optimized for larger viewBox.

24 by 24 grid diagram

Note some icons are placed inside blocks with reduced font sizes. This often sees the icon reduced from a 24× to 16× viewBox. Despite being optimized for the larger size, we test legibility by down-scaling our icons.

Optical size

The optical size within the viewBox is nominally 20×20 [pixels].

Optical sizing diagram

Whitespace and exceptions

Most icons will fall within the 20×20 optical size region to maintain breathable padding.

Optical sizing diagram

There are some exceptions, usually for legibility reasons:

3 further examples of icons that optical region