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!


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
close
computer
cutlery
delete
devices
download
edit
ellipsis
face
facebook
faculty
flight
group
home
hr
instagram
jobs
library
linkedin
location
lock
mail
map
menu
money
pharmacy
phone
print
profile
rss
search
select
send
share
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:

  1. Pick an icon from the Material Design set.
  2. In the icon's lightbox, select View SVG and copy the code in the first text area.
  3. 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.
  4. 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>