Icons are visual symbols used to represent functions, products and services.
Icons provide clarity to users reducing the cognitive load. Icons always supplement a single line of text and are not treated as a description. They are solid or outline a single colour.
Use icons within the component
Create your own icons
Use this when building new Nucleus components
Add them as content
Use them in colours
Use a mix of outline and solid icons
Keep them small
Icons can be used as navigational elements as solid or outline single colour.
If you want to use larger iconography have a look at ns-illustration.
Solid icons are the default and are the preferred choice as they are quicker to recognise.
If you want to have perceived more detail then outline icons can be used.
To see examples visit Storybook.
Does it live in a panel?
Does it live inside other components?
✅ Yes -
What layout classes can be used?
Changes the size of the icon, with 1 being the smallest.
Picks the icon that is wanted to be shown.
Functional icons like 'arrow' only have one version while products and services like 'gas' have an outline and solid versions where solid is the default
If you pass an empty size the icon will fill the parent element
Do you have insights or concerns to share? You can raise an issue via Github bugs.
See all the issues already raised via Github issues.
💩 🎉 🦄 You can also contact the team on Slack on the
Guiding Customers with our icons and the difference between icons and illustrations in Brand Guidelines.
If you wish to have us consider adding a new icon to the library please consult Brand Visual Identity managers.