Styles - Icons
Use this small set of icons that we know our users need and understand to help them identify and navigate content more quickly.
| Icon | Label | Used in | |
|---|---|---|---|
|
Search | Header | |
|
Chevron left | Breadcrumbs (on mobile screens) | |
|
Chevron right | Mobile menu and breadcrumb on desktop | |
|
Close | Mobile menu | |
|
Cross (don't) | Do and Don't lists | |
|
Tick (do) | Do and Don't lists | |
|
Arrow right | Action link | |
|
Arrow right | Next page (pagination) | |
|
Arrow left | Previous page (pagination) | |
|
Arrow up | ||
|
Arrow down | ||
|
Plus | Expander | |
|
Minus | Expander |
|
Chevron left - small |
|
Chevron right - small |
|
Chevron up - small |
|
Chevron down - small |
|
Plus - circle |
|
Minus - circle |
When to use these icons
Use these icons to mark important parts of the page and highlight things you want users to do.
How to use these icons
Use icons sparingly, and not for decoration.
Using text with icons
Some of our icons can be used on their own. Users recognise them easily. They include:
- search
- chevron right
- plus and minus (for reveals)
- close
Other icons needs an explanation. They include:
- action links - tell the user what the link will help them do
- right and left arrows for pagination - add "Previous" or "Next"
- cross and tick - use the words Do and Don't at the top of Do and Don't lists
Using SVG classes for icons
We use scalable vector graphics (SVG) for icons, rather than images such as PNG. SVG are code snippets that you can drop directly into the HTML.
SVG icons are sharp, flexible, and load quickly - and you can control how they appear, for example their colour, with style sheets (CSS).
If you're using a server side or templating language, you can include the icons with include 'partials/icons/icon-search.svg'.
SVG icons have the class .hs2-icon, which sets a default size for the icon. Each icon also has a specific class, such as .hs2-icon__search. The specific class allows you to modify the icon with styles, such as fill. This means you can change the colour of the SVG for states such as hover, focus and active.
Some older browsers like Internet Explorer 8 can't display SVG. So every SVG icon has a PNG fallback. The fallback images have a class, such as .hs2-icon__search—fallback, which you can use to modify their sizing and spacing.
Accessibility
SVG icons must be accessible. For example, they need to meet accessible colour contrast standards. Our recommended tool to test colour combinations is the WebAIM contrast checker. Read more about accessible SVGs on CSS Tricks website.
Icons for applications
Icons for applications are visual representations used to represent a specific task or function. These icons are for use in applications where appropriate. We've selected Feather icons as these are visually appealing, distinctive, and easy to recognise.
You can download them direct from the Feather icons website, or from Github.
Please follow guidance for usage.
These icons seem to be universally recognisable. When we tested them, we found that people understood them. We tested them in context - not on their own, but in components on a full page.
Get in touch to share your research findings if you've used these icons or want to explore other icons.
Research
Read more about the benefits of SVG icons:
