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.

Labels

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 (esp. IE8). What an icon represents by itself can be a very subjective experience!

My son saw this and asked why the sign for "video" was "bunkbed". pic.twitter.com/egrIvOwurj
— Ed Morrish (@edmorrish) March 10, 2015

Usage

Create a div or span element and set its data-icon attribute to the name of the icon you wish to use. The text within the element is used as the icon's label and appears centred underneath it.

<div data-icon="maps">Map</div>
<span data-icon="trash">Trash</span>

At load time, an svg element referencing the desired icon will be injected into the element (cf. Custom Icons section for more details).

By default, the icon inherits the currentColor value of its parent element and is constrained to 60px × 60px. Three CSS helper classes are available to adjust the icon's size:

small – 30px × 30px
large – 100px × 100px
fill 100% of container width and height (cf. Fill container section)

Examples

Small

Default

Large

<div class="center">
  <div class="small" data-icon="world">
    Small
  </div>
  <div data-icon="world">
    Default
  </div>
  <div class="large" data-icon="world">
    Large
  </div>
</div>

Icon list

add

bar

bike

bus

cafe

campaign

car

cart

chat

check

check-circle

city

clock

computer

cutlery

delete

devices

download

edit

ellipsis

face

facebook

faculty

flight

group

home

instagram

jobs

library

location

lock

mail

map

money

pharmacy

phone

profile

rss

select

send

smartphone

student

tag

train

twitter

vimeo

walk

world

youtube

zoom-in

zoom-out

Linked

<div class="center">
  <a href="#linked">
    <div data-icon="profile">
      Login
    </div>
  </a>
</div>

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 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. For an example, take a look at the social share icons in the sidebar of the News single component.

<p>
  In some situations, having a label centred underneath the icon just doesn't work.
</p>
<ul>
  <li>
    If the icon's label would only duplicate the textual content around the icon, you may remove the label entirely. For instance: <a href="#" style="text-decoration: none;">Download the report (PDF 180KB) <span class="small" data-icon="download"></span></a>
  </li>
  <li>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 <code>icon--hide-label</code> to <strong>hide the label visually</strong> (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 <strong>user testing</strong>. For an example, take a look at the social share icons in the sidebar of the <a href="/components/news#news-single">News single</a> component.
  </li>
</ul>

Fill 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. Inline styles used for effect, please do not do this on a production site!

Pharmacy

<p>The following icon fills its container thanks to class <code>fill</code>. It also doesn't have a label, since it would only duplicate the heading right below it. Inline styles used for effect, please do not do this on a production site!
</p>
<div class="center" style="margin-bottom:30px; padding:0; background-color:#d44; color:#fff">
  <div style="height:240px">
    <div class="fill" data-icon="pharmacy"></div>
  </div>
  <h1 class="bold">
    Pharmacy
  </h1>
</div>

Buttons

When using an icon inside a button, the button's mandatory label replaces the icon's label; therefore, the latter can be omited. You should never use an icon on its own if you are not able to prove via user testing that is has no impact on usability.

<p>
  When using an icon inside a button, the button's <em>mandatory</em> label replaces the icon's label; therefore, the latter can be omited. You should <strong>never use an icon on its own</strong> if you are not able to prove via user testing that is has no impact on usability.
</p>
<div class="center">
  <a class="button-small" href="#">Email <span class="small" data-icon="mail"></span></a>
</div>

Custom icons

Icons contribute significantly to the weight of the design system, and therefore of every website that uses it. This is the reason why the number of icons available is relatively small, and why we chose to add icons for a very limited number of social networks and services only (e.g. Facebook, LinkedIn, etc.)

With this in mind, if you still believe that an icon is worth adding to the design system, let us know. For consistency reasons, we will only consider icons taken from this community-contributed set of Material Design icons.

If you absolutely need an icon, and none of the ones included in the design system suits your needs, follow the steps below:

Pick an icon from the Material Design set.
In the icon's lightbox, select View SVG and copy the code in the first text area.
Paste the code on your page (anywhere inside the body element), and change it as follows:
- Remove the style attribute from the svg tag.
- Add the following attributes to the svg tag: class="hidden" xmlns="http://www.w3.org/2000/svg".
- Wrap the whole content of the svg element with a symbol element.
- Move the viewBox attribute from the svg element to the symbol element.
- Give the symbol element an ID of the form icon-*name*, where *name* is the name of the icon (ensure that it doesn't conflict with any other icon in the design system).
- For each path element, remove the fill attribute unless its value is none.
Use the icon like you normally would (cf. Usage section).

Here is an example with the security icon:

<!-- Original SVG code -->
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
  <path fill="#000000" d="M12,12H19C18.47,16.11 15.72,19.78 12,20.92V12H5V6.3L12,3.19M12,1L3,5V11C3,16.55 6.84,21.73 12,23C17.16,21.73 21,16.55 21,11V5L12,1Z" />
</svg>

<!-- Modified code -->
<svg class="hidden" xmlns="http://www.w3.org/2000/svg">
  <symbol id="icon-security" viewBox="0 0 24 24">
    <path d="M12,12H19C18.47,16.11 15.72,19.78 12,20.92V12H5V6.3L12,3.19M12,1L3,5V11C3,16.55 6.84,21.73 12,23C17.16,21.73 21,16.55 21,11V5L12,1Z" />
  </symbol>
</svg>

<!-- Example use of the icon -->
<span class="small" data-icon="security"></span>