Icons
Material design icons
The NSW Design system uses Material design icons (filled versions) to illustrate actions, status and signage. Icons communicate messages at a glance, suggest interactivity and draw attention to important information.
View & download the icon family from Material design
Icon Style
Sizing
Icons should be designed to an 8 pixel grid and can be scaled and displayed at four sizes depending on use and screen size:
- 8px x 8px
- 16px x 16px
- 24px x 24px
- 32px x 32px
Colour
Icons that are clickable should use NSW Primary Blue to remain consistent with text link styling. If icon is on a background that changes the colour of the text (for example a button) then the icon should take on the same colour as the text.
Icons used to represent a state should use the appropriate colour, for example an icon used in a success notification should use Success Green.
Application
Spacing and positioning
Always allocate the right amount of space around an icon to allow for legibility and touch. Wherever possible, size your spacing in multiples of 4 or 8 pixels.
Support customer expectations
Users grow accustomed to recognising an icon as meaning something. Altering the action behind that icon is extremely confusing.
Ensure icon matches action label
Don't use icon which do not match action label
Link icons
In this example the icon is 16px by 16px, the label is 16px
Button icons
In this example the icon is 16px by 16px, the label is 16px