Icons

Clear purpose

• Use icons to offer additional context to interface elements
• Avoid cluttering the view with decorative icons

Accessible

• Select clear metaphors to display objects
• Ensure sufficient contrast between text and background¹
• Avoid using icons as standalone interactive elements
• Use colours from the Light theme colour palette when designing for the default colour mode
• Use colours from the Dark mode colour palette when designing for Dark mode

Consistent shapes

1. Rounded corners or edges of objects range from a radius of 0-8px/dp
2. Use rounded edges for stroke terminals for 1 and 2 px/dp lines

Consistent sizing

Use 32×32 dp/px icons with the 24×24 icon but allow for padding as they are to be used for clickable icons with padding that require user interaction. Ensure they are large enough to be easily clickable with appropriate padding for accessibility
Examples – Buttons with icons, interactive elements with clickable icons

Use medium (24×24 dp/px) icons for most views. The thicker (2 px/dp) stroke outlines the general shape of an icon. The 1 px/dp stroke adds details within the metaphor. Use for general icons that may or may not be interactive, maintaining clarity and usability at smaller size

Examples – Navigations icons, incline icons in text

Use small (16×16 dp/px) icons as decoration in warnings, errors and informational content. Avoid using small icons as interactive elements². They should enhance the visual comprehension without requiring user interaction. The message should be accompanied by a label for accessibility

Follow these guidelines when using icons in your design:

• Colour principles
• Validation errors
• Accessibility principles

1. Web Content Accessibility Guidelines (WCAG) 2.1: Success Criterion 1.4.3 Contrast (Minimum)
2. Web Content Accessibility Guidelines (WCAG) 2.1: Success Criterion 2.5.5: Target Size