Icons
Similar to an image, an icon can be added to various other components to add a visual element to content and to convey additional meaning.
Icon example
How to use icons
Icons can be added to a panel on their own, or to a number of components, including:
- Stats
- Cards
- 50:50
Make sure the icon you’re using is relevant to the content it’s representing, and only use our own branded icons. If you need a new icon, speak to Sarah Cross who will work with the graphic design team.
Adding icons in the CMS
Some templates will already include icons, such as ‘Card icon x3' or ‘Stat x1'. To add a component to another template, panel or component, just select ‘Create’ and add a new ‘Icon Component’. Then choose or upload an icon and select what size it should be. We use extra large in most cases.
Icon modifier rules
Icons are usually used within larger components like a card, stat or 50:50. Follow the modifier rules for those components.
Accessibility
You don’t need to include alt text for icons that are purely decorative. Icons only need alt text if they convey information that a user needs to know, or if that icon represents a link or action. Examples include:
- Social icons that link to our social pages
- A cog icon that takes users to the ‘settings’ page of their account
- A European flag to indicate a grant contains European funding
The alt text you use should convey the same information or let the user know what will happen if they click the icon.
You don’t need to include alt text if the icon is already associated with written text or already contains sr-only code. Examples include:
- The envelop icon next to ‘Sign up to email updates’. Aria code is used to hide this icon, because the text link gives enough information
- The new window icon on external links. External links contain sr-only text alerting the user that the link will open in a new tab. Aria code is used to hide the icon from screen readers
Evidence and research
In testing and research, users told us that icons added to their experience, but only if the icon used was relevant to the content.