State
Last modified:
TODO: update!
Style
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.
Sizing
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.
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:
