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.

Examples of spacing and positioning between icons and text

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

Example showing icon matching customer expectation

Don't use icon which do not match action label

Example showing icon not matching customer expectation

Link icons

In this example the icon is 16px by 16px, the label is 16px

hyperlink button with envelope

Button icons

In this example the icon is 16px by 16px, the label is 16px

Label button with envelope

Last updated