Guidelines
An icon is a visual metaphor: a compact symbol representing a discreet object, action, or idea. Icons are meant to be quickly and universally understood, bridging language and cultures (where possible).
We use Font Awesome 6 Pro icons (available by default in Figma) with outlined style and regular weight. Where a specific feature-related icon is unavailable, we design our own, modelled on the same styling as Font Awesome.
Usage
Usage guidelines outline how the icons should and shouldn’t be used in different user interface contexts.
Icon spacing
When using icons, it is important to maintain balance with surrounding elements such as text and other graphics and sufficient padding so that they do not appear too condensed.
Icon sizing
Maintaining icon legibility and consistent sizing throughout the interface is essential. Therefore, the design system permits specific icon sizes: 16px, 20px, and 24px.
Adding or editing icons
If you can’t find a suitable icon for your use case, you can propose an icon addition to the design system. This contribution guide includes information about differentiating icons from other components, naming conventions and a step-by-step process to follow. We also have design-specific guidelines for icon creation available in Figma to guide you.