† Hide or show labels

Icons etcetera

Images used well can reinforce meaning and direct the user. When not used well they add confusion and contribute to visual clutter.

Icons, arrows and buttons

1 Sometimes a word is worth a thousand pixels

Unless the meaning is very clear, or space extremely limited an icon should have a label. There are very few universally recognisable icons. If the meaning or intent is not improved by the addition of the icon, just use the word and a regular bullet or arrow.

2 Good icons are understood not deciphered

An icon should be recognised in silhouette, instantly and understood. If the function is a common one (eg. Print) the icon should be entirely predictable. The weight and style of an icon should be balanced with the typeface used for buttons and labels.

text-icon-balance

Type in Helvetica Neue with icons of balanced weights & size

3 Arrows direct attention

Arrows are the clearest shape we can use. Big or small their intention is clear. We use them in three ways:

guide-arrows

4 Buttons for pressing

Avoid the use of Museo for type on buttons, and use very subtle depth and shading.

Small amounts of reversed (white) text is OK on buttons, but always use on a darker coloured background that passes AA contrast tests.

buttons-good-bad-1

Buttons should be clear, bold and very easy to read.

Switches and checkboxes should show the current state, and reflect that in colour

buttons-good-bad-2

Buttons that link through to pages can use a chevron arrow.

Actions that work in place do not need an icon, unless it adds considerable meaning.

If in doubt, use a linked, bold text label instead.

Save your details

5 A small set of icons

These symbols are widely used enough not to need a label

2x2-icons-1

Money Advice Service specific symbols may need labels

2x2-icons-2

2x2-icons-2

...and tool or app specific symbols definitely do

2x2-icons-2

Hide or show annotations

The brand guidelines are available in full here (PDF) but do not really cover icons in a usable way, so this guidance is a clean slate.

Hint: the best hinted sans-serif on Windows is still Arial

WCAG 2.0 level AA requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text.

WCAG small text is considered 13 pt and large text is considered 18 pt. Colour checker