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 |
3px of padding surrounds the 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