Overview

Clear, minimal and consistent Feather icons are selected for the Design System. They follow focused and rational principles of our design system in both metaphor and style. Icons can be viewed and downloaded from the Download page.

Format to use

Always use vector formats (SVG) for optimal performance and a refined look.

Guide

By understanding the icon set, you can create a new icon and still maintain consistency. Our icons are linear with fixed-line stroke size, minimal with less detail, curve and sharp edges.

Do

Keep it Minimal

Remove unnecessary details and only keep what makes the icon recognizable

Don't

Add Details

Don’t add details to icons

Added details make the icon unrecognisable, especially in standard size (20px). For example, you clearly see this, but what about this ? ?

Do

Use Geometric shapes

Make icon form geometric and consistent with the icon set

Don't

Use unpolished forms

Pack the overall form as icons should be close to square in shape

Geometric forms help emphasize clarity again: vs.

Do

Create linear icons with fixed-line stroke

Don't

Use inconsistent line stroke or fill the object

Size

Icons are 20px (height and width) by default and should not be less than the actual size (20px). You can increase the icon size to 24 or 32 px.

Colour

We recommend limiting icon colours to black on light backgrounds or white on dark backgrounds. You can still use colour for specific icons in isolated frames or sections such as Services and Initiatives. The target contrast ratio for icon colour and its background should be at least 1:12

As the contrast ratio is higher in these two recommended colours, the clarity and the overall impact of the icons are higher than other colours.

Since accessibility (contrast ratio) is the main concern, using high contrast combinations within the colour guidelines is allowed. You can also apply core (or secondary) colours 10 on the same for icons and core (or secondary) colours 70 and above for backgrounds.

For information about colour application, see Colour System

Alignment

Not all icons are circular or square – correct alignment helps keep the layout clean when icons are placed next to each other within a grid.

When to Use

Use icons when they help with communication only. In some scenarios, they might effectively communicate the message, while in others, they might misrepresent your intention, or worse, not convey it at all. The key to avoiding this is to pick the correct icon for the right use (not similar use cases) and pair it with a helper text or visual aid for text.

Overuse of iconography leads to distracting and visually overwhelming interfaces.

Icons are used for:

- Components helper (Like Buttons)

- Navigation

- Page Headers

- Sections (Optional)

- Accessibility features

- Inline with text

Variation

To aid the overall look of your design, the icons come in three variations: solid outline (standard); dual-tone (with a shade fill) and fill. Some of the icons will not be available in two secondary variations.

You can find the above icons in the Icon Library provided. Icon Library provided

State Icons

State icons are visual placeholders for different states such as empty states, messages (e.g. nothing found, turn on notifications, etc.), attachments and so on.

These icons are 56X56 px (larger than standard size) with thicker stroke width and a dual-tone variation

Universal Icons

Icons help reduce the time required for communication (e.g. icon of a happy face instead of text). Some icons are known by their primary function (e.g. search icons) and should never replace them. If there is no universally known icon for your need, make sure the icon communicates the message. Test your proposed icon with a few users (5-7) and then support it with the right text. Please do not leave them without text, as they most likely will not be understood.

Icon Shapes

You can use icons on specific shapes and forms. Do not apply shapes inspired by your identity elements.

Icon Badge

You can add badges to some of the icons for notifications. For maximum visual clarity, limit your icons that fit under the direct, utility purpose of it.