UX Framework
Icons
Search the component library

Icons

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

None

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

The current icon repertoire.

Icon Sizing

Since we’re using an icon font each symbol will just inherit the font-size 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 of the surrounding text.

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

Changelog

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