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.
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|
Pictogram content should remain inside the 60px x 60px live area.
2px of padding surrounds the live area.
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.
Position stroke "on pixel"
The grid contains 2px padding. Pictograms should remain inside the live area and not cross over into the padding area.
Corner radius should be 2px and increased where necessary to make rounded objects. Interior corners should be square.
External corners with 2px radius and square internal corners.
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.
NSW Tertiary Blue
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.
Custom Brand colour
Custom Brand Pictogram
Spacing and positioning
Minimum spacing around pictograms should be 24px and wherever possible, size your spacing in multiples of 8 pixels.
Visually center pictogram and centre-align where it appears next to text.
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