Iconography

Icons are applied throughout the website and give an indication of what is required or executed when an element is used.

Icon guidelines

Icon classes

Icon types

Examples

Icon guidelines

Creating an icon

Making icons accessible

  • If the images are turned off or do not load there needs to be an ‘alt’ text attribute describing the missing image.
  • A ‘title’ attribute is needed to show tooltip description when rolling over the icon.
  • When an icon is used as a button, the user must be able to tab to the button. A particularly important case is when the button is inside a table and images have been turned off.
  • The ‘sr-only’ attribute hides an element to all devices except screen reader.
  • The 'sr-only-focusable' attribute shows the element again when it is focused (eg by a keyboard-only user)

Code example

<a class="sr-only sr-only-focusable" href="#">Skip to main content</a>
  • Use the 'aria-labelledby' attribute as it is good for extra information.

Code example

<button type="submit" class="c-header__search__submit" title="Search" aria-labelledby="js-mobile-search-label"></button>

Icon classes

Icons are composed of a number of classes in order to make them appear.

Base class

The base class, c-icon, is compulsory and must be used to make the icon appear correctly.

Position class

This class is optional and controls the icon position. The default is center and the options are:

  • left c-icon--left
  • right c-icon--right
  • top left c-icon--top--left

Size class

This class is optional and controls the icon size. The default is 1 rem and the options are:

  • extra small c-icon--xsmall .5 rem
  • small c-icon--small .75 rem
  • medium c-icon--medium 1.5 rem
  • large c-icon--large 2 rem
  • extra large c-icon--xlarge 3 rem

Icon type class

This class is the name of the icon you wish to choose. These are described below.

Icon types

Right blue arrow

c-icon__right-arrow--blue

Right white arrow

c-icon__right-arrow--white

Right grey arrow

c-icon__right-arrow--grey

Left purple arrow

c-icon__left-arrow--purple

Left blue arrow

c-icon__left-arrow--blue

Left white arrow

c-icon__left-arrow--white

Left grey arrow

c-icon__left-arrow--grey

Left purple arrow

c-icon__left-arrow--purple

Down blue arrow

c-icon__down-arrow--blue

Down white arrow

c-icon__down-arrow--white

Up white arrow

c-icon__up-arrow--white

Up down arrow

c-icon__updown-arrow--white

Question mark blue

c-icon__question--blue

Reset white

c-icon__reset--white

Reset blue

c-icon__reset--blue

Exclamation mark

c-icon__exclamation--red

Search white

c-icon__search--white

Search purple

c-icon__search--purple

Blue cross

c-icon__cross--blue

purple cross

c-icon__cross--purple

green cross

c-icon__cross--green

orange cross

c-icon__cross--orange

red cross

c-icon__cross--red

white cross

c-icon__cross--white

dark cross

c-icon__cross--dark

Green tick

c-icon__tick--green

White tick

c-icon__tick--white

Purple loading

c-icon__anim-loading--purple

White loading

c-icon__anim-loading--white

award blue

c-icon__award--blue

bank

c-icon__bank--blue

download

c-icon__download--blue

globe

c-icon__globe--blue

page

c-icon__page--blue

teacher

c-icon__teacher--blue

upload

c-icon__upload--blue

users

c-icon__users--blue

email

c-icon__email--purple

email white

c-icon__email--white

info

c-icon__info--grey

phone blue

c-icon__phone--blue

phone grey

c-icon__phone--grey

phone purple

c-icon__phone--purple

menu purple

c-icon__menu--purple

menu blue

c-icon__menu--blue

clock

c-icon__clock--grey

file grey

c-icon__file--file-icon

question circle grey

c-icon__question-circle--grey

Excel

c-icon__file--xls-icon

MP3

c-icon__file--mp3-icon

PDF

c-icon__file--pdf-icon

powerpoint

c-icon__file--ppt-icon

exe

c-icon__file--exe-icon

word

c-icon__file--doc-icon

zip grey

c-icon__file--zip-icon

web page

c-icon__file--web-icon

login

c-icon__login--purple

play blue

c-icon__play--blue

play grey

c-icon__play--grey

play white

c-icon__play--white

link blue

c-icon__link--blue

link grey

c-icon__link--grey

link white

c-icon__link--white

external link blue

c-icon__external--blue

twitter blue

c-icon__twitter--blue

twitter white

c-icon__twitter--white

twitter grey

c-icon__twitter--grey

facebook white

c-icon__facebook--white

whatsapp white

c-icon__whatsapp--white

spotify white

c-icon__spotify--white

google podcasts

c-icon__google-podcasts--white

apple podcasts

c-icon__apple-podcasts--white

purple star

c-icon__star--purple

filter ( blue, grey & purple)

c-icon__filter--blue

sort by ( blue, grey & purple)

c-icon__sort-by--blue

pointer left (purple, blue & grey )

c-icon__pointer-left--purple

pointer right (purple, blue & grey )

c-icon__pointer-right--purple

write blue

c-icon__write--blue

develop blue

c-icon__develop--blue

scan blue

c-icon__scan--blue

pen purple

c-icon__pen--purple

pen and paper purple

c-icon__pen-paper--purple

wallet purple

c-icon__wallet--purple

meeting purple

c-icon__meeting--purple

bell blue

c-icon__bell--blue

video teal

c-icon__video--teal

textbook turquoise

c-icon__textbook--turquoise

smiley purple

c-icon__smiley--purple

head open book purple

c-icon__head-open-book--purple

running figure purple

c-icon__running-figure--purple

graduate purple

c-icon__graduate--purple

c-icon__plus-square--blue

c-icon__plus-square--blue

c-icon__bin--blue

c-icon__bin--blue

Examples

For more examples see:

Blue right arrow

Example

Code example

c-form__input c-icon c-icon--right c-icon--large c-icon__right-arrow--blue

Search

Example

Code example

c-form__input c-icon c-icon--right c-icon--large c-icon__search--purple

Green tick

Example

Code example

c-icon c-icon--right c-icon--large c-icon__tick--green

Bare unordered list using an icon for bullets

  • Assessment writing and reviewing
  • Online marking and monitoring
  • Digital assessment creation
  • Awarding and statistical analysis