Helps users navigate through a service

Icon Label Class name
Home @hod-home
Search @hod-search
Login/Logout @hod-key
Left @hod-arrow-left
Down @hod-arrow-down
Right @hod-arrow-right
Up @hod-arrow-up

Controller icons

Helps users to sort, organise or adjust the information, for example by filtering data, opening and closing modals or revealing additional content

Icon Label Class name
Zoom in @hod-search-plus
Zoom out @hod-search-minus
Left, Back @hod-chevron-left
Right, Continue @hod-chevron-right
Up, Close @hod-chevron-up
Down, Expand @hod-chevron-down
Add, Open @hod-plus
Minus, Close @hod-minus
Approved, Correct, Confirm @hod-checkmark
Close, Delete, Remove @hod-cross
Play @hod-play
Pause @hod-pause
Stop @hod-stop
Fast forward @hod-fast-forward-button
Rewind @hod-rewind-button
Skip back @hod-skip-back
Skip forward @hod-skip-forward

Quick reference icons

Helps users to understand options and context

Icon Label Class name
Email @hod-close-envelope
Download @hod-download-button
Location @hod-map-marker
Settings @hod-cog
Call @hod-phone
File, Document @hod-file-empty
Time @hod-clock
Calendar, Date @hod-calendar
Print @hod-printer
Warning, Alert @hod-warning
Info, Information @hod-circle
Info, information @hod-info-blue
Loading @hod-spinner

Using the icons

In the prototyping kit

Download for prototyping kit
  1. Unzip the download and move the kit-icons folder into app > assets.
  2. Go to app > views > includes > head.html and link to the new icons.css fil.e
    <link href="/public/kit-icons/icons.css" media="screen" rel="stylesheet" type="text/css" />
  3. Add this code to app > assets > sass > application.scss to help with sizing and spacing.
              .side-space {
              	margin-right: .5em;
              .icon-medium {
                font-size: 24px;
                &:before {
                  vertical-align: bottom;
                  padding-bottom: 1em;
              .icon-small {
                font-size: 18px;
                &:before {
                  vertical-align: middle;
                  padding-bottom: 1em;
  4. On a page add this code and change the class name to the icon you want
    <span class="hod-printer side-space icon-medium"></span>

In Sketch

Download for Sketch
  1. Unzip the download. It contains SVG and PNG versions of each icon.
  2. Insert them into Sketch or your preferred graphics software.

When to use icons

Icons can be used sparingly on frequent-use services. They are helpful at drawing users attention to actions. They also increase a users ability to scan a page and navigate a service.

How to use icons

  • The minimum icon size is 16px. If an icon is part of a button the hit area should be 36px.
  • The icon shouldn't change colour in hover/active/focus states, only the background.
  • Every icon should use a visible and audible label to avoid confusion over what it represents. And use aria-hidden="true".
  • Align the icon in a central position in relation to any type. Content can sit either side.
  • Make sure icon colour combinations meets the minimum WCAG 2.0 AA colour contrast check.

User research

Users interpret icons differently so shouldn't be used without a label.

Don't use generic icons for specific labels, for example the calendar icon for a date of birth.

Services using this pattern

  • Application platform
  • Entities

Get in touch

If you’ve got a question or suggestion share it on Slack #interaction-designers channel or on GitHub.