UX Framework
Icons
Search the component library

Icons

v1.0.0-beta.8
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-beta.5

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

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.0.0-beta.8/#rd-check)
times [](/design/c/icons/v1.0.0-beta.8/#rd-times)
times-circle-o [](/design/c/icons/v1.0.0-beta.8/#rd-times-circle-o)
trash-o [](/design/c/icons/v1.0.0-beta.8/#rd-trash-o)
chevron-down [](/design/c/icons/v1.0.0-beta.8/#rd-chevron-down)
chevron-up [](/design/c/icons/v1.0.0-beta.8/#rd-chevron-up)
chevron-right [](/design/c/icons/v1.0.0-beta.8/#rd-chevron-right)
chevron-left [](/design/c/icons/v1.0.0-beta.8/#rd-chevron-left)
thumb-tack [](/design/c/icons/v1.0.0-beta.8/#rd-thumb-tack)
cog [](/design/c/icons/v1.0.0-beta.8/#rd-cog)
envelope [](/design/c/icons/v1.0.0-beta.8/#rd-envelope)
search [](/design/c/icons/v1.0.0-beta.8/#rd-search)
plus-circle [](/design/c/icons/v1.0.0-beta.8/#rd-plus-circle)
calendar [](/design/c/icons/v1.0.0-beta.8/#rd-calendar)
file-o [](/design/c/icons/v1.0.0-beta.8/#rd-file-o)
info-circle [](/design/c/icons/v1.0.0-beta.8/#rd-info-circle)
users [](/design/c/icons/v1.0.0-beta.8/#rd-users)
user [](/design/c/icons/v1.0.0-beta.8/#rd-user)
square-o [](/design/c/icons/v1.0.0-beta.8/#rd-square-o)
check-square-o [](/design/c/icons/v1.0.0-beta.8/#rd-check-square-o)
ban [](/design/c/icons/v1.0.0-beta.8/#rd-ban)
camera [](/design/c/icons/v1.0.0-beta.8/#rd-camera)
heart [](/design/c/icons/v1.0.0-beta.8/#rd-heart)
heart-o [](/design/c/icons/v1.0.0-beta.8/#rd-heart-o)
laptop [](/design/c/icons/v1.0.0-beta.8/#rd-laptop)
book [](/design/c/icons/v1.0.0-beta.8/#rd-book)
list-ul [](/design/c/icons/v1.0.0-beta.8/#rd-list-ul)
th-large [](/design/c/icons/v1.0.0-beta.8/#rd-th-large)
exclamation-circle [](/design/c/icons/v1.0.0-beta.8/#rd-exclamation-circle)

Changelog

1.0.0-beta.8

  • ADDED: Style exports
  • ADDED: UXD Accessibility Checklist
  • ADDED: Explicit dependency on typography

1.0.0-beta.7

  • ADDED: Additional icon, exclamation-circle.

1.0.0-beta.6

  • ADDED: Additional icons, including heart-o, heart, laptop, book, list-ul, and th-large.

1.0.0-beta.5

  • ADDED: Sketch and Illustrator mockup files.
  • ADDED: The camera icon.
  • FIXED: Updated image widths.

1.0.0-beta.4

  • ADDED: The ban icon.
  • FIXED: The times-circle-o icon was incorrectly referred to as the times-circle icon.

1.0.0-beta.3

  • ADDED: Additional icons, including square-o and check-square-o.

1.0.0-beta.2

  • ADDED: Additional icons, including user, calendar, info-circle, and file-o.

1.0.0-beta.1

Initial release