Pictograms

Use pictograms to represent a word or idea using simple and clean illustration. Used to visually support and highlight content, making it quickly identifiable on the page.

Pictogram style

Sizing

Pictograms should be designed on a pixel-based grid of 64px x 64px with a live area of 60px x 60px, and can be scaled down linearly to half size if required. Pictogram 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).

 

 
Sizing Stroke Padding Live area Corner radius
64px x 64px 2px 2px 60px x 60px 2px
32px x 32px 1px 1px 30px x 30px 1px

 

Square indicating 60px live area

Live area
Pictogram content should remain inside the 60px x 60px live area.

Square indicating 2px padding

Padding
2px of padding surrounds the live area.

Stroke

Pictogram stroke is 2px to maintain consistency and a clear visual weight. If creating a smaller sized pictogram use it’s relevant stroke indicated in the table above. Don’t use inconsistent stroke weights. Open strokes should have rounded edges. Make sure to position “on pixel” by making the X and Y coordinates whole numbers, avoiding decimals.

An envelope showing 2px stroke.

2px Stroke

A graph displaying a correct and an incorrect position stroke. (one 'on pixel' and one 'off pixel'

Position stroke "on pixel"

Padding

The grid contains 2px padding. Pictograms should remain inside the live area and not cross over into the padding area.

Grid showing contents correctly placed in live area.
Grid showing contents incorrectly placed in padding area.

Corner radius

Corner radius should be 2px and increased where necessary to make rounded objects. Interior corners should be square.

An envelope showing 2px corner radius and square internal corners.

Corner radius
External corners with 2px radius and square internal corners.

Colour

Pictograms are two toned and use NSW Tertiary Blue as the highlight stroke colour. Where it is not reasonable to use the NSW Tertiary Blue as the highlight stroke colour, you may use NSW Primary Highlight. Main stroke colour uses Dark80.

A pictogram displaying the primary colour NSW tertiary blue

Primary colour
NSW Tertiary Blue

A pictogram displaying the secondary colour NSW primary highlight

Secondary colour
NSW Primary Highlight

If brand exemption has been approved, you can replace the highlight stroke colour with your custom brand colour. You can do this by using the secondary colour pictogram featuring NSW Primary Highlight, and overriding the HEX in the CSS. Ensure your colour meet accessibility contrast ratio requirements, you can colour checkers to Test Accessibility.

Swatch showing an example custom brand colour

Custom Brand colour
#E82EBA

A pictogram displaying the a brand custom colour.

Custom Brand Pictogram

Application

Spacing and positioning

Minimum spacing around pictograms should be 24px and wherever possible, size your spacing in multiples of 8 pixels.

Icon and Text showing 24px spacing and centre alignment.

Alignment

Visually center pictogram and centre-align where it appears next to text.

Grid showing icons centre alignment in live area.
Icon showing centre alignment when it appears next to text

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
Last updated