Style Icons
Overview
An icon can help explain the function of an element, such as a call to action.
When to use icons
Icons can make scanning a page quicker, as well as making target areas larger and easier to select. They can also help users with accessibility needs.
You can use an icon with a:
How to use icons
Use recognisable icons
Always consider if an icon is necessary, and only use icons that are universally understood. An icon that means different things to different people will make your product harder to use.
Our icons are supported by user research and are available from our icon set.
A selection of icons are labelled as suitable for use with web user interfaces, with the Nunjucks code available on the individual icon pages. This guidance details how to use these icons as part of a Design System component.
There is further guidance available on how we design our icons.
Use a label
Always use an icon with a text label. Using icons on their own means the user must think more, especially if the icon is not familiar to them.
Place icons before text to show function
Place an icon before the text to help the user understand the function of the element.
For example, a user can quickly see the printer icon first on the print button.
Use navigation icons to show direction
A directional icon should be used with a button label or link to show the user the direction it will take them.
Use a forward navigation icon after the text and a backward navigation icon before the text.
For example, the arrow-next
icon after the call to action button shows the button will move forward to the next page.
The chevron
icon before the back link shows the link will move back to the previous page.
Icon type
Use the parameter iconType
to set the type of icon. The value will be the name of the “Web UI” icon, which you will need to choose from our icon set.
Icon position
You can set an icon’s position to before or after the text on a button or list.
Use the parameter iconPosition
and give it a value of either “before” or ”after”.
Icon size
You can change the size of an icon on a list or panel – from the default size of regular text – to match the size of the text, as detailed in the type scale.
Use the parameter iconSize
and give it a value of either: “s”, “m”, “l”, “xl”, “xxl” or “xxxl”.
Help improve this page
Let us know how we could improve this page, or share your user research findings. Discuss this page on GitHub (opens in a new tab)