Icons (ONS Design System)
The UK Office for National Statistics design system’s icon foundations page: when an icon helps, how to label and position it, and the component parameters for adding one.
License: Open Government Licence v3.0 — https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/ (stated in the page’s own footer).
Key points
- An icon can help explain an element’s function, such as a call to action. Icons can also make a page quicker to scan and enlarge a target area, which helps users with some accessibility needs.
- Always consider whether an icon is necessary, and use only icons that are universally understood. An icon that means different things to different people makes a product harder to use.
- Always use an icon with a text label. An icon on its own makes the user think more, especially when it’s unfamiliar.
- Place an icon before its text to help the user understand the element’s function; for example, a printer icon at the start of a print button.
- A directional icon shows where a button or link will take the user. Put a forward icon after the text (“Next” with a right arrow) and a backward icon before it (a left chevron on a back link).