A NSW Government website
Design System

Pictograms

🔹 Needed for NSW Government Branding

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

Usage

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.

Styling

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.

Sizing

Stroke

Padding

Live Area

48px x 48px

1px

3px

42px x 42px

icon padding
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.

Designing

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