Skip to main content

Design Iconography

Iconography

By Justin Spencer and Jonathan Stening

Our global visual language is shared across all our brands. We have a library of carefully crafted user interface icons for use in your designs. This article explains when and how to use the icons, and details our process for making icons. For information about embedding and sizing icons see GUI Framework Icons.

User Interface icons are designed to communicate meaning and aid navigation. They can symbolise a command, file, device or directory. They’re also used to represent common actions like search, print and edit.

Simplicity is the key design requirement for UI icons. Each icon in this library is reduced to its minimal form, just enough to capture the essence of its meaning. This ensures readability and clarity even at small sizes. It also optimises the vector file size by limiting the number of points required to draw the graphic.

Icon grid

The icon grid has been developed to facilitate consistency while also offering a certain amount of flexibility. All the icons in this library have been designed and crafted on a 24px grid. This allows us to use the icons at the following sizes: XSmall (12px), Small (18px), Medium (24px), Large (36px) and XLarge (48px). Using the icons at these pre-defined sizes will ensure that horizontal and vertical edges align with the pixel grid, with the exception of the Small (18px). This results in a sharper more legible graphic. If icons are not used at these intended sizes they will no longer align to the pixel grid which will result in a blurred effect. Using a fixed set of icon sizes also helps us to maintain consistency across all our applications.

1000% zoom

100% actual size

Icon anatomy

Legibility, consistency and simplicity are key design principals for all UI icons. We use simple geometric shapes to construct icons. This gives them a unified symmetry and visual consistency.

1. Fill area, 2. Counter area, 3. Corner, 4. Stroke, 5. Counter stroke, 6. Bounding area

Key aspects of an icon

800% zoom

Fill area

To ensure icons maintain alignment with the pixel grid at 24, 36 and 48px, it is important to use even numbers for both the position, width and height of shapes (positive and negative).

Do - use even numbers

Avoid - using odd numbers

Corners

A 2px corner radius is used on the fill area of the icon. Interior corners in the counter area should always be square. Do not round the corners of strokes that are 2px wide or less.

Fill area with 2px corner radius

Counter area - no corners

Strokes

Always use a 2px width for strokes and counter strokes. This includes curves and angles, interior and exterior.

Strokes and counter strokes are 2px

Curves and angles are 2px

All strokes should have 90° square ends

All strokes should have 90° square ends

Artistic licence

Some scenarios may call for a little ‘artistic licence’ to break these guidelines to aid legibility of an icon. In spite of this it remains important to only use the consistent geometric forms on which all other icons are based. Don’t skew or distort the forms.

Reduced border radius for wheels

Uses an odd number for legs

Best practice

Consistency aids user comprehension of icons. Use the existing system icons whenever possible and across different applications. If you have to create additional icons for your project here are some dos and don’ts.

Do - use consistent stroke weights and squared stroke terminals

Don’t - use inconsistent stroke weights or rounded stroke terminals

Do - make icons simple, bold, flat shapes

Don’t - add unnescessary dimension

Do - use simple geometric shapes to construct icons. This adds clarity and legibility.

Don’t - be too literal. Avoid adding complex details and organic shapes.

Do - use icons at one of the pre-defined sizes. Set sizes and position icons ‘on the pixel grid’.

Don’t - scale icons to random sizes. This will cause them to fall off the grid and blur.

Icon labels

Icons should always be accompanied by a label, however in some cases where the icon has become a globally recognised symbol, a label may not be required. For example a house is now the globally recognised symbol for home.

Icon overload

Icons should be used sparingly. Too many icons add clutter and confusion to the interface. The use of UI icons purely as page embellishment is also not recommended.

SVG icons

With the release of the GUI Framework 2.0 we superseded the icon font in favour of an SVG (scalable vector graphics) implementation. Using SVGs ensures the highest quality rendering on all devices both now and into the future. SVGs can also be styled using code avoiding the need for multiple versions of the same icon. SVGs also comply with AA accessibility requirements. This is a more flexible and accessible approach. For information on how to embed and style SVG icons see the GUI Framework.