Guidance
Icons are a visual representation of an action, idea, or object. But, if their intended meaning is not immediately clear to users, they can become confusing, frustrating distractions that prevent people from completing tasks.
A user’s understanding of an icon is based on previous experience. Due to the absence of a standard usage for most icons, text labels are necessary to communicate the meaning and reduce ambiguity.
Do
- Choose icons that are familiar and conventional.
- Use icons that look the most like the thing they represent.
- Always include a visible text label with your icon to reduce ambiguity, unless it is a universal icon (most icons aren’t) or a social media brand icon (Twitter, Facebook, etc.).
- Test your icon choices by showing them to people and asking them what they think they represent. It’s important to ask people not involved with your project. It’s even better to test with users.
Don’t
- Don’t use icons for decorative purposes only.
- Don’t use icons without labels - especially for critical functions.
- Don’t link icons and text labels to different actions or locations.
- Don’t overuse icons- too many icons on a page reduces them all to noise.
“Use a 5-second rule: if it takes you more than 5 seconds to think of an appropriate icon for something, it is unlikely that an icon can effectively communicate that meaning.” Aurora Harley, NN/g
Icon library
The GNB Design System uses Font Awesome icons. Font Awesome is an icon library and toolkit used by millions of designers, developers, and content creators worldwide. The library and toolkit are available as a self-hosted or SaaS solution, with a variety of tiers and options, including "free forever". Except in special circumstances, no other icon libraries should be used. Please contact the Design System team to review icons for use outside the approved library.
Request the pro kitIcon reference table
Lookup common icons by symbol or meaning and see examples of how they are used.
| Icon | Meaning | Class name | Unicode | Example |
|---|---|---|---|---|
| Down | fa-angle-down | f107 | Accordions, Main navigation | |
| Previous | fa-angle-left | f104 | Pagination | |
| Next | fa-angle-right | f105 | Pagination | |
| Up | fa-angle-up | f106 | Accordions, Main navigation | |
| Go back | fa-arrow-left | f060 | Buttons, Forms | |
| Go forward, start | fa-arrow-right | f061 | Buttons, Forms | |
| External link | arrow-up-right-from-square | f08e | External link | |
| Cart | fa-cart-shopping | f07a | Main navigation | |
| Complete, selected | fa-check | f00c | Forms, Navs | |
| Success | fa-circle-check | f058 | Alerts | |
| Warning | fa-circle-exclamation | f06a | Alerts | |
| Information | fa-circle-info | f05a | Alerts | |
| Help | fa-circle-question | f059 | Tooltip | |
| Don’t, remove | fa-circle-xmark | f057 | Removable tag | |
| Close | fa-xmark | f00d | Modals | |
| File upload | fa-file-arrow-up | f574 | Drag and drop file upload | |
| Search | fa-magnifying-glass | f002 | Search | |
| Danger, error | fa-triangle-exclamation | f071 | Alerts, Form errors |
Icons in links
Icons that appear in-line with links should always be 1rem (16px), and never be underlined.
Icons in buttons
Icons can be added to buttons to support the button action.
Icon colours
When used within content, icons should inherit the colours of their content type. For example, an icon appearing within a link should be blue. When used within a component, an icon should always inherit the component’s default colours and styles.
Info/link
Success
Warning
Danger
Icons in components
Icons will inherit the default styles of their parent component and should not be changed. For example, an icon appearing in a card will appear within a gray circle. An icon appearing within an alert will appear in a colour that conveys thr meaning of the alert. Do not alter a component’s icon styles.