Icons

There has been a lot of discussion in the industry about the best way of implementing icons on a web page. Icon fonts, such as Font Awesome, are widely available and generally free to use, but have a high overhead and can be tricky to style efficiently.

We've decided to use raw SVG vectors, and include a minimal set within the design system.

Before we get started, please note that all icons must come with a label in order to supplement the graphic with a clear definition of what it represents. Labels also act as fallbacks on devices and browsers that do not support SVG. What an icon represents by itself can be a very subjective experience!

Icons

Set data-icon to the name of the icon that you'd like to use. The names to use are displayed below the icons.

<span data-icon="..."></span>

Generic Icons

Facility Icons

Social Icons

Icon Sizes

Icons without a specified size will default to this.

Small Icon

Use the class small to decrease the size of the icon.

Large Icon

Use the class large to increase the size of the icon.

Linked Icons

You can link icons by nesting the icon inside an <a> element.

Hide Icon Label

In some situations, having a label centred underneath the icon just doesn't work.

If the icon's label would only duplicate the textual content around the icon, you may remove the label entirely. For instance:

If the context in which the icon is used is enough for a sighted user to fully understand what the icon represents, you may use class icon--hide-label to hide the label visually (i.e. but not from screen reader). Ideally, you should confirm that the removal of the label has no impact on usability by conducting some form of user testing .

Fill Icon Container

The following icon fills its container thanks to class fill. It also doesn't have a label, since it would only duplicate the heading right below it.