Atom | Icon component.


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.

Best practice

💚 Do's

💔 Dont's

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

Considerations of best practices

  • 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.

<ns-icon type="gas"></ns-icon>

Component relationship


Does it live in a panel?

❌ No

Does it live inside other components?

✅ Yes - ns-cta ns-expander ns-inputter ns-tab ns-expander

What layout classes can be used?











'', 1, 2, 3, 4, 5

Changes the size of the icon, with 1 being the smallest.




appliance, appliance-outline, appliance-solid, arrow, arrow-left, arrow-right, bill, bill-outline, bill-solid, boiler , boiler-outline, boiler-solid, chevron, chevron-down, chevron-left, chevron-right, chevron-up, cross, download, electricity, electricity-outline, electricity-solid, gas, gas-outline, gas-solid, hive, home, home-outline,home-solid, loading,meter, meter-outline, meter-solid, minus, plus, protect, protect-outline, protect-solid, rewards, rewards-outline, rewards-solid, settings, tick, warning See Icon component in Storybook

Picks the icon that is wanted to be shown.

Specification notes


  • 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 #product-nucleus channel!

Related links

  • ns-cta.

  • 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.