A NSW Government website
Design System v3.16.0


🔹 Needed for NSW Government Branding

Pictograms represent a word or idea using simple and clean illustration.


Used pictograms to visually support and highlight content, making it quickly identifiable on the page.

Use SVG utility classes

Usability classes are available for developers to apply brand colours to SVGs. Use them so that SVGs can be used across pages using different colour schemes. See Utility classes for names.


Pictograms are constructed on a 48 x 48px base grid. When creating pictograms, leave an empty padding of 3px. This provides a small buffer space. Our pictogram should be drawn to the edge of this padding where possible.




Live Area

48px x 48px



42px x 42px

icon padding
3px of padding surrounds the live area.
icon anatomy
Live area
Pictogram content should remain inside the 42px x 42px live area.

Pictogram Brand Styling

For full pictograms creation guidance, visit your relevant brand classification guidelines at the NSW Government Visual identity system.


Creating SVGs

The majority of design software allows you to create an SVG file by selecting this format when exporting.

Tips for creating SVGs:

  • Flatten and outline all elements
  • Do not use masks
  • Ensure white colour is intentionally white and transparent is intentionally transparent

Benefits of using SVGs

SVGs are scalable vector graphics made up of points, lines and shapes which can easily be adapted in size making them an advantageous choice for responsive design. Other benefits of using SVG format over other raster formats (for example JPEG, GIF and PNG) include:

  • Ability to scale and graphic to any size without losing quality
  • Smaller file sizes means your page will load faster
  • Easily editable strokes and colours through CSS