# Iconography
Icons serve as a common visual language that helps guide our users through an experience without having to read everything word for word.
They are an important and useful visual aid but shouldn’t be relied on solely to communicate, if you're questioning whether you need an icon, you probably don't need one at all.
An icon should be accompanied by a label where possible; if not, you might need to conduct user research to understand whether the icon can be identified for its purpose.
Icons should be used sparingly, they are meant to grab the users attention so using too many icons could have a negative effect and could cause confusion.
# Design
The NBUX icon library has been designed to be familiar to users and representative of common actions with consistency throughout. We have icons for each of our brands which helps keep brand consistency across site.
Although no icon is universal, through user and competitor research, we have a good understanding of what is commonly used and if that icon is functional for its purpose. Some of our universal icons are:
- Search
- Bin
- Kebab menu
- Close
Each of our icons must have all 4 of the quality criteria:
Findability: It's easy to find on the page.
Recognition: The users understand what it represents.
Attractiveness: Is the icon aesthetically pleasing.
Harley, A., 2016. Usability Testing of Icons. Nielsen Norman Group
# System icons
System icons are designed in minimal form and represent common actions. For example, account, bag, menu, search, etc.
System icons are designed at 24x24px and is recommended they be used at this size. These icons are common interface icons designed with a 2px stroke weight.
# Hero icons
Hero icons are used to support content to make it easier for the user to find information on the page. For example: credit, card payments, delivery, etc.
They are bigger than system icons so can include more detail, not too much though as they still need to be recognisable in a compact form.
Hero icons can be used at multiple sizes and it is at the designer discretion what size they choose to use.
# Usage
Where possible, NBUX icons should be used as a supporting visual aid alongside descriptive text. Some icons can also stand-alone without labels, such as icons within the navigation bar.
# Accessibility
- Decorative labels do not need alt text as they are there to support the content and not convey an action, it also means the icon will not be read out twice by screen readers.
aria-labelshould be used on non decorative icons. E.g. If the user wants to edit items in their bag, the kebab menu needs to an aria-label to give context to the user.