Iconography

Style

Our icon style is simple, rounded, featuring thin line strokes, or filled shapes. They are designed to scale proportionally, ensuring that they integrate seamlessly into various interface sizes. They are divided into three categories: Core, Extended and Logo icon set.

Core icon set

Our core icon set is the main icon library in the design system, helping you maintain visual consistency across all our digital products.

Explore the core icon set and its properties on the component page.

Extended icon set

Ionicons

We use the open-source icon library, Ionicons, which provides a wide variety of high-quality icons. Use these icons when you need options beyond the core icon set.

Logo icons

Our Figma component library contains popular brand logos and are kept in accordance with their respective logo usage guidelines. When using any of these brand logos, please make sure to refer to their brand guideline to ensure compliance with their usage standards.

Icon size

Example	Icon size	Description
	Small: icon-size-s	Used in compact spaces
	Medium: icon-size-m	Suitable for slightly larger spaces
	Large: icon-size-l	Used in dense spaces where an icon is required

You can access the design tokens for icon sizes here.

When icons are interactive, it's best to make them 24 x 24 CSS pixels to meet WCAG guidelines.

Best practices

• Whenever possible, combine icons with text for clear communication.
• When placing icons next to text elements, ensure they are vertically aligned to create visual balance.
• Do not create icons that are overly complex.
• Apply color to an icon using our design tokens. Ensure color combinations meet WCAG standards of at least a 3:1 contrast ratio between foreground and background.

Creating icons

Before creating an icon, check if it already exists in the icon library. If not, you can follow these steps:

• Consult the do's and don'ts section in best practices.
• Ensure the icon aligns to the style of our icon sets.
• Choose a clear and descriptive name.