Iconography

The NSW Design system uses Material Design icons 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 sizing and padding

Icon content should remain inside of the live area, which is the region of an image that is unlikely to be hidden from view (such as when sidebars appear upon scrolling).

Live area

Icon content is limited to the 20px x 20px live area, with 2px of padding around the perimeter.

Live area example

Padding

2px of empty space makes up the padding surrounding the 20px x 20px live area.

Padding example

Dense live area

Icon content is limited to the 16px x 16px live area, with 2px of padding around the perimeter.

Dense live area example

Dense padding

2px of padding surrounds the live area.

Dense padding example

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.

Example of spacing and positioning

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 20px by 20px, the label is 14px

Link icon example

Button icons

In this example the icon is 20px by 20px, the label is 14px

Button icon example

 

Last updated