Icons
Icons are symbols that represent an object or action. They should be used sparingly to provide clarity and reduce cognitive load.
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 below.
Icon library
Here is a library of icons curated from Feather Icons Collection to fit all necessary use cases of your website.
Download
Download the icon library in either .zip or .xd format.
Usage
Always try to use vector formats (.svg) as these load faster for users and infinitely scale with lossless quality.
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 recognisable.
Don't
Add details
Don't add details to icons.
Added details make the icon unrecognisable, especially in standard size (24px). 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 emphasise clarity again: vs
Do
Create linear icons
Ensure that your icons have a fixed-width line stroke.
Don't
Use inconsistent styles
Make sure you do not fill the object or use inconsistent line stroke widths.
Sizes
Icons are 24px by 24px by default and should not be less than 18px.
* Learn about State icons in Usage section
Do
Display icons in sizes not listed within the table
It breaks the pixel-ratio which decreases sharpness.
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.
Black on light
Icon
#1b1d21
Background
#ffffff
White on dark
Icon
#ffffff
Background
#1b1d21
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.
White on light
Icon
#b68a35
Background
#ededed
White on colour
Icon
#ffffff
Background
#b68a35
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.
10 on 70 and above
Icon
#ffffff
Background
#7c5e24
10 on 70 and above
Icon
#7c5e24
Background
#e4d5b6
For information about colour application, see the 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.
Always centre-align same sized icons on the vertical axis. Keep the text centre-aligned with its icon on the horizontal axis.
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:
- Component helpers (e.g. 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.
Outline
Dual Tone
Fill
You can find the above icons in the 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 48px by 48px (larger than standard size) with thicker stroke width and a dual-tone variation.
No result has been found
Try with different keywords
Secure your account
Secure nowTurn on notifications
To make sure you don't miss news and new activities
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.