UX Framework
Icons
Search the component library

Icons

v1.1.0
Download UI Kit v1.9.0 Code

Provides a standard set of icons at various sizes.

Download UI Kit v1.9.0 Code

Usage Guidelines

All icons should come from this component.

Features

  • Single collection of all icons
  • Consistent guidelines for sizing and positioning

Dependencies

Typography v1.0.0

Documents

UX Accessibility Checklist

Documentation Assets (Sketch)

Available Icons

Icons come from font-awesome and are currently limited to the following set:

  • check
  • times
  • times-circle-o
  • trash-o
  • chevron-down
  • chevron-up
  • chevron-right
  • chevron-left
  • thumb-tack
  • cog
  • envelope
  • search
  • plus-circle
  • calendar
  • file-o
  • info-circle
  • users
  • user
  • square-o
  • check-square-o
  • ban
  • camera
  • heart
  • heart-o
  • laptop
  • book
  • list-ul
  • th-large
  • exclamation-circle
  • archive
  • newspaper-o
  • suitcase
  • video-camera
  • picture-o
  • caret-right
  • caret-down
  • light-bulb-o
  • question-circle

The current icon repertoire.

Icon Sizes and Colors

Since we’re using an icon font each symbol will just inherit the size and color of the surrounding type.

Icons adopting the sizes of their containing type elements.

Redlines

Just use the specified glyphs from Font Awesome and inherit the font size and color of the surrounding text.

A lone symbol should still be wrapped in the relevant type style (e.g. Basic Label).

See the typography component for more information.

Available Styles Reference As (How do I use this?)
check [](/design/c/icons/v1.1.0/#rd-check)
times [](/design/c/icons/v1.1.0/#rd-times)
times-circle-o [](/design/c/icons/v1.1.0/#rd-times-circle-o)
trash-o [](/design/c/icons/v1.1.0/#rd-trash-o)
chevron-down [](/design/c/icons/v1.1.0/#rd-chevron-down)
chevron-up [](/design/c/icons/v1.1.0/#rd-chevron-up)
chevron-right [](/design/c/icons/v1.1.0/#rd-chevron-right)
chevron-left [](/design/c/icons/v1.1.0/#rd-chevron-left)
thumb-tack [](/design/c/icons/v1.1.0/#rd-thumb-tack)
cog [](/design/c/icons/v1.1.0/#rd-cog)
envelope [](/design/c/icons/v1.1.0/#rd-envelope)
search [](/design/c/icons/v1.1.0/#rd-search)
plus-circle [](/design/c/icons/v1.1.0/#rd-plus-circle)
calendar [](/design/c/icons/v1.1.0/#rd-calendar)
file-o [](/design/c/icons/v1.1.0/#rd-file-o)
info-circle [](/design/c/icons/v1.1.0/#rd-info-circle)
users [](/design/c/icons/v1.1.0/#rd-users)
user [](/design/c/icons/v1.1.0/#rd-user)
square-o [](/design/c/icons/v1.1.0/#rd-square-o)
check-square-o [](/design/c/icons/v1.1.0/#rd-check-square-o)
ban [](/design/c/icons/v1.1.0/#rd-ban)
camera [](/design/c/icons/v1.1.0/#rd-camera)
heart [](/design/c/icons/v1.1.0/#rd-heart)
heart-o [](/design/c/icons/v1.1.0/#rd-heart-o)
laptop [](/design/c/icons/v1.1.0/#rd-laptop)
book [](/design/c/icons/v1.1.0/#rd-book)
list-ul [](/design/c/icons/v1.1.0/#rd-list-ul)
th-large [](/design/c/icons/v1.1.0/#rd-th-large)
exclamation-circle [](/design/c/icons/v1.1.0/#rd-exclamation-circle)
archive [](/design/c/icons/v1.1.0/#rd-archive)
newspaper-o [](/design/c/icons/v1.1.0/#rd-newspaper-o)
suitcase [](/design/c/icons/v1.1.0/#rd-suitcase)
video-camera [](/design/c/icons/v1.1.0/#rd-video-camera)
picture-o [](/design/c/icons/v1.1.0/#rd-picture-o)
caret-right [](/design/c/icons/v1.1.0/#rd-caret-right)
caret-down [](/design/c/icons/v1.1.0/#rd-caret-down)
light-bulb-o [](/design/c/icons/v1.1.0/#rd-light-bulb-o)
question-circle [](/design/c/icons/v1.1.0/#rd-question-circle)

Changelog

1.1.0

  • ADDED: question-circle, caret-right, caret-down, light-bulb-o, and icons for archive action, plus reading, business case, video, and image content types
  • TWEAKED: Icons should now all be displayed in Pitch (#231f20)

1.0.0

Initial release