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

home print calendar edit-calendar mail clipboard newspaper edit send share download rss menu search zoom-in zoom-out filter external close expand collapse chevron-top chevron-right chevron-bottom chevron-left sort-up sort-down arrow-left arrow-left-outline arrow-right arrow-right-outline add delete sub-selection check check-outline check-special play play-outline pause pause-outline dropdown info warning ellipsis question idea favourite star star-rate star-outline cart devices computer smartphone phone hr face happy sad group profile chart chat tag pdf image clock lock money money-outline microphone handshake eye signpost

Facility Icons

rest walk bike car bus train flight cafe cutlery bar pharmacy library campaign faculty city location map world student jobs

Social Icons

facebook twitter youtube instagram linkedin vimeo flickr wechat

Icon Sizes

Use the attribute data-size to set an icon size.

<span data-icon="..." data-size="sm"></span>
xs sm md lg xl xxl

Icon Label

Labels already come with a defined size. If you wish to override this value use the attribute data-label-size.

<span data-icon="..." data-label-size="sm"></span>
sm md lg

Hidden 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:

Download the report (PDF 180KB)

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 the attribute data-hide-label="true" 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 .

Share on Facebook

Icon in Paragraph

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quas impedit culpa, fugiat provident labore, unde asperiores voluptates doloremque inventore molestias dicta quaerat placeat distinctio dolores sequi, neque maxime quibusdam ipsum.

Linked Icons

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

Fill Icon Container

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