Icon
A card that shows the data of an uploaded document or image that you can download.
Breakdown
Background fill
By default, icons are positioned within a coloured square.
No background fill
Icons may be used without a background fill.
Usage
Icons are used to represent simple actions. Our icons come from an icon library managed by Font Awesome. The primary style for our icons is sharp to match the sharp edges of the brands other assets. Only solid icons are to be used, not stroke icons.
- Use the predetermined icon sizes, this is important to maintain brand consistency across the platform.
- Do not replace text with icons.
- Icons shouldn't be interactive with a click or hover. They should be wrapped with an interactive element such as button or anchor.
Label
Icons should always be accompanied by a text label to so it is clear what the outcome will be if actioned.
Style
The primary style for our icons is sharp to match the sharp edges of the brands other assets. Only solid icons are to be used, not stroke icons.
Colour
Some icons should always be shown in a specific colour when used to indicate a state.
Anatomy
Size
Icons follow multiples of 9 for size. Small is 27px, medium is 36px and large is 54px.
Accessibility
Icons are a great way to help users who have difficulties with reading, focus attention, and low vision impairments.
- Specify if an icon is decorative. Decorative icons don’t add information to the content of a page.
- Pair icons with a text label so that the meaning is clear and not open to interpretation.
- Avoid complex or abstract icons that may be difficult to understand.
- Test the effectiveness of an icon with users to ensure that its easily understood.
- Use simple icons, ensuring the icon choice is easily recognisable and makes sense to the user.
