Icons

Overview

A wide range of system icons can be applied.

Example

Discussion


  • icon bubble


  • icon bubbles


  • icon quotes-left


  • icon envelope


  • icon forward


  • icon reply

Navigation


  • icon double-angle-left


  • icon angle-left


  • icon angle-right


  • icon double-angle-right


  • icon location


  • icon map


  • icon compass


  • icon target


  • icon stack


  • icon external
    icon new-tab


  • icon secure
    icon lock

Sorting


  • icon sort


  • icon sort-down


  • icon sort-up


  • icon collapse


  • icon collapse-top


  • icon filter

Charts


  • icon pie


  • icon stats


  • icon bars


  • icon tree

Users and settings


  • icon user


  • icon signup


  • icon cogs


  • icon bookmark


  • icon exit


  • icon accessibility


  • icon man


  • icon woman


  • icon male


  • icon female

Documents and files


  • icon file-empty


  • icon file-filled


  • icon image


  • icon attachment


  • icon print


  • icon link

Application controls


  • icon undo


  • icon redo


  • icon search


  • icon clock


  • icon plus-sign


  • icon minus-sign


  • icon code


  • icon star


  • icon phone


  • icon pencil
    icon edit


  • icon loop


  • icon play


  • icon download


  • icon upload


  • icon cloud-download


  • icon cloud-upload

Validation and notification


  • icon eye


  • icon cancel
    icon remove


  • icon checkmark
    icon tick


  • icon notification


  • icon question


  • icon info

Checkboxes and radio buttons

Mainly to be used in search filter menus. Give this class to the whole link item.

  • unchecked

  • checked

  • radio-unchecked

  • radio-checked

  • radio-checked disabled

  • checked disabled

Social media

Social media icons are already coloured, and have their own hover transition.


  • icon facebook


  • icon twitter


  • icon google-plus


  • icon pinterest


  • icon linkedin


  • icon vimeo


  • icon tumblr


  • icon wordpress


  • icon newsletter


  • icon rssfeed


  • icon instagram


  • icon youtube


  • icon tripadvisor

Spinner

The spinner is used when a submit button is pressed to visibly indicate the form submission has occured.


spinner

Variants

Combine icon classes with a colour and/or a shadow to create variants:

Available colours: red dkred purple dkblue blue teal green yellow orange pink silver grey black

Shadowed

shadowed

Sizing


  • small

  • medium

  • large

  • xtra-large

Links

Links to external sites should have the attribute/value rel="external" added. This is an accessibility aid for assistive technology, and allows the correct icon to be appended.

BBC website

Paypal website

WCMS use
MVC.net use
Code

Combine class icon with a value below


Version and status
  • current version
  • Concept