Guidance last updated:
Sep 4, 2023
We do not yet have a single, systematic approach to custom iconography (internal ticket ref. BC-10889
).
Besides bespoke usage (eg certain Buttons, Page alerts or the Navbar) see:
Guidance last updated:
Sep 4, 2023
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.
Guidance last updated:
Sep 12, 2023
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
.

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].

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

There are some exceptions, usually for legibility reasons:
