<i class="c-icon c-icon--heart" aria-hidden="true"></i>

Icon sizes

There are 6 alternative sizes of icon: hf is half the size of standard icons, lg is 33% bigger than standard, then there are 2x, 3x, 4x and 5x versions of the icon.

<i class="c-icon c-icon--heart c-icon--hf" aria-hidden="true"></i>
<i class="c-icon c-icon--heart c-icon--lg" aria-hidden="true"></i>
<i class="c-icon c-icon--heart c-icon--2x" aria-hidden="true"></i>
<i class="c-icon c-icon--heart c-icon--3x" aria-hidden="true"></i>
<i class="c-icon c-icon--heart c-icon--4x" aria-hidden="true"></i>
<i class="c-icon c-icon--heart c-icon--5x" aria-hidden="true"></i>

See the Font Awesome documentation for details of all the different things that you can do with them.

Accessibility

Empty <i> elements aren't very friendly to screen readers or assistive technologies. So make sure they have aria-hidden="true", and if they are standalone non-interactive icons, add some text for screen readers to access. This appears both as the title of the icon and as hidden text.

All you need is love Eight days a week

<i class="c-icon c-icon--heart" aria-hidden="true" title="All you need is love"></i><span class="c-icon__sr-text">All you need is love</span>
<i class="c-icon c-icon--calendar" aria-hidden="true" title="Eight days a week"></i><span class="c-icon__sr-text">Eight days a week</span>

For interactive elements (such as an <a> element) you should add an aria-label to the anchor.

<a href="https://twitter.com/uniofyork" aria-label="Follow us on Twitter"><i class="c-icon c-icon--twitter" title="Follow us on Twitter" aria-hidden="true"></i></a>

See the Font Awesome docs for more details.

List of icons

Here's a comprehensive list of icons. , "style": "inverse"

Web Application Icons

Accessibility Icons

Hand Icons

Transportation Icons

Gender Icons

File Type Icons

Spinner Icons

Note: These icons work great with the fa-spin class. Check out the spinning icons example.

Form Control Icons

Payment Icons

Chart Icons

Currency Icons

Text Editor Icons

Directional Icons

Video Player Icons

Brand Icons

Medical Icons

<h3>Web Application Icons</h3>
<i class="c-icon c-icon--address-book" aria-hidden="true"></i>
<i class="c-icon c-icon--address-book-o" aria-hidden="true"></i>
<i class="c-icon c-icon--address-card" aria-hidden="true"></i>
<i class="c-icon c-icon--address-card-o" aria-hidden="true"></i>
<i class="c-icon c-icon--adjust" aria-hidden="true"></i>
<i class="c-icon c-icon--american-sign-language-interpreting" aria-hidden="true"></i>
<i class="c-icon c-icon--anchor" aria-hidden="true"></i>
<i class="c-icon c-icon--archive" aria-hidden="true"></i>
<i class="c-icon c-icon--area-chart" aria-hidden="true"></i>
<i class="c-icon c-icon--arrows" aria-hidden="true"></i>
<i class="c-icon c-icon--arrows-h" aria-hidden="true"></i>
<i class="c-icon c-icon--arrows-v" aria-hidden="true"></i>
<i class="c-icon c-icon--asl-interpreting" aria-hidden="true"></i>
<i class="c-icon c-icon--assistive-listening-systems" aria-hidden="true"></i>
<i class="c-icon c-icon--asterisk" aria-hidden="true"></i>
<i class="c-icon c-icon--at" aria-hidden="true"></i>
<i class="c-icon c-icon--audio-description" aria-hidden="true"></i>
<i class="c-icon c-icon--automobile" aria-hidden="true"></i>
<i class="c-icon c-icon--balance-scale" aria-hidden="true"></i>
<i class="c-icon c-icon--ban" aria-hidden="true"></i>
<i class="c-icon c-icon--bank" aria-hidden="true"></i>
<i class="c-icon c-icon--bar-chart" aria-hidden="true"></i>
<i class="c-icon c-icon--bar-chart-o" aria-hidden="true"></i>
<i class="c-icon c-icon--barcode" aria-hidden="true"></i>
<i class="c-icon c-icon--bars" aria-hidden="true"></i>
<i class="c-icon c-icon--bath" aria-hidden="true"></i>
<i class="c-icon c-icon--bathtub" aria-hidden="true"></i>
<i class="c-icon c-icon--battery" aria-hidden="true"></i>
<i class="c-icon c-icon--battery-0" aria-hidden="true"></i>
<i class="c-icon c-icon--battery-1" aria-hidden="true"></i>
<i class="c-icon c-icon--battery-2" aria-hidden="true"></i>
<i class="c-icon c-icon--battery-3" aria-hidden="true"></i>
<i class="c-icon c-icon--battery-4" aria-hidden="true"></i>
<i class="c-icon c-icon--battery-empty" aria-hidden="true"></i>
<i class="c-icon c-icon--battery-full" aria-hidden="true"></i>
<i class="c-icon c-icon--battery-half" aria-hidden="true"></i>
<i class="c-icon c-icon--battery-quarter" aria-hidden="true"></i>
<i class="c-icon c-icon--battery-three-quarters" aria-hidden="true"></i>
<i class="c-icon c-icon--bed" aria-hidden="true"></i>
<i class="c-icon c-icon--beer" aria-hidden="true"></i>
<i class="c-icon c-icon--bell" aria-hidden="true"></i>
<i class="c-icon c-icon--bell-o" aria-hidden="true"></i>
<i class="c-icon c-icon--bell-slash" aria-hidden="true"></i>
<i class="c-icon c-icon--bell-slash-o" aria-hidden="true"></i>
<i class="c-icon c-icon--bicycle" aria-hidden="true"></i>
<i class="c-icon c-icon--binoculars" aria-hidden="true"></i>
<i class="c-icon c-icon--birthday-cake" aria-hidden="true"></i>
<i class="c-icon c-icon--blind" aria-hidden="true"></i>
<i class="c-icon c-icon--bluetooth" aria-hidden="true"></i>
<i class="c-icon c-icon--bluetooth-b" aria-hidden="true"></i>
<i class="c-icon c-icon--bolt" aria-hidden="true"></i>
<i class="c-icon c-icon--bomb" aria-hidden="true"></i>
<i class="c-icon c-icon--book" aria-hidden="true"></i>
<i class="c-icon c-icon--bookmark" aria-hidden="true"></i>
<i class="c-icon c-icon--bookmark-o" aria-hidden="true"></i>
<i class="c-icon c-icon--braille" aria-hidden="true"></i>
<i class="c-icon c-icon--briefcase" aria-hidden="true"></i>
<i class="c-icon c-icon--bug" aria-hidden="true"></i>
<i class="c-icon c-icon--building" aria-hidden="true"></i>
<i class="c-icon c-icon--building-o" aria-hidden="true"></i>
<i class="c-icon c-icon--bullhorn" aria-hidden="true"></i>
<i class="c-icon c-icon--bullseye" aria-hidden="true"></i>
<i class="c-icon c-icon--bus" aria-hidden="true"></i>
<i class="c-icon c-icon--cab" aria-hidden="true"></i>
<i class="c-icon c-icon--calculator" aria-hidden="true"></i>
<i class="c-icon c-icon--calendar" aria-hidden="true"></i>
<i class="c-icon c-icon--calendar-check-o" aria-hidden="true"></i>
<i class="c-icon c-icon--calendar-minus-o" aria-hidden="true"></i>
<i class="c-icon c-icon--calendar-o" aria-hidden="true"></i>
<i class="c-icon c-icon--calendar-plus-o" aria-hidden="true"></i>
<i class="c-icon c-icon--calendar-times-o" aria-hidden="true"></i>
<i class="c-icon c-icon--camera" aria-hidden="true"></i>
<i class="c-icon c-icon--camera-retro" aria-hidden="true"></i>
<i class="c-icon c-icon--car" aria-hidden="true"></i>
<i class="c-icon c-icon--caret-square-o-down" aria-hidden="true"></i>
<i class="c-icon c-icon--caret-square-o-left" aria-hidden="true"></i>
<i class="c-icon c-icon--caret-square-o-right" aria-hidden="true"></i>
<i class="c-icon c-icon--caret-square-o-up" aria-hidden="true"></i>
<i class="c-icon c-icon--cart-arrow-down" aria-hidden="true"></i>
<i class="c-icon c-icon--cart-plus" aria-hidden="true"></i>
<i class="c-icon c-icon--cc" aria-hidden="true"></i>
<i class="c-icon c-icon--certificate" aria-hidden="true"></i>
<i class="c-icon c-icon--check" aria-hidden="true"></i>
<i class="c-icon c-icon--check-circle" aria-hidden="true"></i>
<i class="c-icon c-icon--check-circle-o" aria-hidden="true"></i>
<i class="c-icon c-icon--check-square" aria-hidden="true"></i>
<i class="c-icon c-icon--check-square-o" aria-hidden="true"></i>
<i class="c-icon c-icon--child" aria-hidden="true"></i>
<i class="c-icon c-icon--circle" aria-hidden="true"></i>
<i class="c-icon c-icon--circle-o" aria-hidden="true"></i>
<i class="c-icon c-icon--circle-o-notch" aria-hidden="true"></i>
<i class="c-icon c-icon--circle-thin" aria-hidden="true"></i>
<i class="c-icon c-icon--clock-o" aria-hidden="true"></i>
<i class="c-icon c-icon--clone" aria-hidden="true"></i>
<i class="c-icon c-icon--close" aria-hidden="true"></i>
<i class="c-icon c-icon--cloud" aria-hidden="true"></i>
<i class="c-icon c-icon--cloud-download" aria-hidden="true"></i>
<i class="c-icon c-icon--cloud-upload" aria-hidden="true"></i>
<i class="c-icon c-icon--code" aria-hidden="true"></i>
<i class="c-icon c-icon--code-fork" aria-hidden="true"></i>
<i class="c-icon c-icon--coffee" aria-hidden="true"></i>
<i class="c-icon c-icon--cog" aria-hidden="true"></i>
<i class="c-icon c-icon--cogs" aria-hidden="true"></i>
<i class="c-icon c-icon--comment" aria-hidden="true"></i>
<i class="c-icon c-icon--comment-o" aria-hidden="true"></i>
<i class="c-icon c-icon--commenting" aria-hidden="true"></i>
<i class="c-icon c-icon--commenting-o" aria-hidden="true"></i>
<i class="c-icon c-icon--comments" aria-hidden="true"></i>
<i class="c-icon c-icon--comments-o" aria-hidden="true"></i>
<i class="c-icon c-icon--compass" aria-hidden="true"></i>
<i class="c-icon c-icon--copyright" aria-hidden="true"></i>
<i class="c-icon c-icon--creative-commons" aria-hidden="true"></i>
<i class="c-icon c-icon--credit-card" aria-hidden="true"></i>
<i class="c-icon c-icon--credit-card-alt" aria-hidden="true"></i>
<i class="c-icon c-icon--crop" aria-hidden="true"></i>
<i class="c-icon c-icon--crosshairs" aria-hidden="true"></i>
<i class="c-icon c-icon--cube" aria-hidden="true"></i>
<i class="c-icon c-icon--cubes" aria-hidden="true"></i>
<i class="c-icon c-icon--cutlery" aria-hidden="true"></i>
<i class="c-icon c-icon--dashboard" aria-hidden="true"></i>
<i class="c-icon c-icon--database" aria-hidden="true"></i>
<i class="c-icon c-icon--deaf" aria-hidden="true"></i>
<i class="c-icon c-icon--deafness" aria-hidden="true"></i>
<i class="c-icon c-icon--desktop" aria-hidden="true"></i>
<i class="c-icon c-icon--diamond" aria-hidden="true"></i>
<i class="c-icon c-icon--dot-circle-o" aria-hidden="true"></i>
<i class="c-icon c-icon--download" aria-hidden="true"></i>
<i class="c-icon c-icon--drivers-license" aria-hidden="true"></i>
<i class="c-icon c-icon--drivers-license-o" aria-hidden="true"></i>
<i class="c-icon c-icon--edit" aria-hidden="true"></i>
<i class="c-icon c-icon--ellipsis-h" aria-hidden="true"></i>
<i class="c-icon c-icon--ellipsis-v" aria-hidden="true"></i>
<i class="c-icon c-icon--envelope" aria-hidden="true"></i>
<i class="c-icon c-icon--envelope-o" aria-hidden="true"></i>
<i class="c-icon c-icon--envelope-open" aria-hidden="true"></i>
<i class="c-icon c-icon--envelope-open-o" aria-hidden="true"></i>
<i class="c-icon c-icon--envelope-square" aria-hidden="true"></i>
<i class="c-icon c-icon--eraser" aria-hidden="true"></i>
<i class="c-icon c-icon--exchange" aria-hidden="true"></i>
<i class="c-icon c-icon--exclamation" aria-hidden="true"></i>
<i class="c-icon c-icon--exclamation-circle" aria-hidden="true"></i>
<i class="c-icon c-icon--exclamation-triangle" aria-hidden="true"></i>
<i class="c-icon c-icon--external-link" aria-hidden="true"></i>
<i class="c-icon c-icon--external-link-square" aria-hidden="true"></i>
<i class="c-icon c-icon--eye" aria-hidden="true"></i>
<i class="c-icon c-icon--eye-slash" aria-hidden="true"></i>
<i class="c-icon c-icon--eyedropper" aria-hidden="true"></i>
<i class="c-icon c-icon--fax" aria-hidden="true"></i>
<i class="c-icon c-icon--feed" aria-hidden="true"></i>
<i class="c-icon c-icon--female" aria-hidden="true"></i>
<i class="c-icon c-icon--fighter-jet" aria-hidden="true"></i>
<i class="c-icon c-icon--file-archive-o" aria-hidden="true"></i>
<i class="c-icon c-icon--file-audio-o" aria-hidden="true"></i>
<i class="c-icon c-icon--file-code-o" aria-hidden="true"></i>
<i class="c-icon c-icon--file-excel-o" aria-hidden="true"></i>
<i class="c-icon c-icon--file-image-o" aria-hidden="true"></i>
<i class="c-icon c-icon--file-movie-o" aria-hidden="true"></i>
<i class="c-icon c-icon--file-pdf-o" aria-hidden="true"></i>
<i class="c-icon c-icon--file-photo-o" aria-hidden="true"></i>
<i class="c-icon c-icon--file-picture-o" aria-hidden="true"></i>
<i class="c-icon c-icon--file-powerpoint-o" aria-hidden="true"></i>
<i class="c-icon c-icon--file-sound-o" aria-hidden="true"></i>
<i class="c-icon c-icon--file-video-o" aria-hidden="true"></i>
<i class="c-icon c-icon--file-word-o" aria-hidden="true"></i>
<i class="c-icon c-icon--file-zip-o" aria-hidden="true"></i>
<i class="c-icon c-icon--film" aria-hidden="true"></i>
<i class="c-icon c-icon--filter" aria-hidden="true"></i>
<i class="c-icon c-icon--fire" aria-hidden="true"></i>
<i class="c-icon c-icon--fire-extinguisher" aria-hidden="true"></i>
<i class="c-icon c-icon--flag" aria-hidden="true"></i>
<i class="c-icon c-icon--flag-checkered" aria-hidden="true"></i>
<i class="c-icon c-icon--flag-o" aria-hidden="true"></i>
<i class="c-icon c-icon--flash" aria-hidden="true"></i>
<i class="c-icon c-icon--flask" aria-hidden="true"></i>
<i class="c-icon c-icon--folder" aria-hidden="true"></i>
<i class="c-icon c-icon--folder-o" aria-hidden="true"></i>
<i class="c-icon c-icon--folder-open" aria-hidden="true"></i>
<i class="c-icon c-icon--folder-open-o" aria-hidden="true"></i>
<i class="c-icon c-icon--frown-o" aria-hidden="true"></i>
<i class="c-icon c-icon--futbol-o" aria-hidden="true"></i>
<i class="c-icon c-icon--gamepad" aria-hidden="true"></i>
<i class="c-icon c-icon--gavel" aria-hidden="true"></i>
<i class="c-icon c-icon--gear" aria-hidden="true"></i>
<i class="c-icon c-icon--gears" aria-hidden="true"></i>
<i class="c-icon c-icon--gift" aria-hidden="true"></i>
<i class="c-icon c-icon--glass" aria-hidden="true"></i>
<i class="c-icon c-icon--globe" aria-hidden="true"></i>
<i class="c-icon c-icon--graduation-cap" aria-hidden="true"></i>
<i class="c-icon c-icon--group" aria-hidden="true"></i>
<i class="c-icon c-icon--hand-grab-o" aria-hidden="true"></i>
<i class="c-icon c-icon--hand-lizard-o" aria-hidden="true"></i>
<i class="c-icon c-icon--hand-paper-o" aria-hidden="true"></i>
<i class="c-icon c-icon--hand-peace-o" aria-hidden="true"></i>
<i class="c-icon c-icon--hand-pointer-o" aria-hidden="true"></i>
<i class="c-icon c-icon--hand-rock-o" aria-hidden="true"></i>
<i class="c-icon c-icon--hand-scissors-o" aria-hidden="true"></i>
<i class="c-icon c-icon--hand-spock-o" aria-hidden="true"></i>
<i class="c-icon c-icon--hand-stop-o" aria-hidden="true"></i>
<i class="c-icon c-icon--handshake-o" aria-hidden="true"></i>
<i class="c-icon c-icon--hard-of-hearing" aria-hidden="true"></i>
<i class="c-icon c-icon--hashtag" aria-hidden="true"></i>
<i class="c-icon c-icon--hdd-o" aria-hidden="true"></i>
<i class="c-icon c-icon--headphones" aria-hidden="true"></i>
<i class="c-icon c-icon--heart" aria-hidden="true"></i>
<i class="c-icon c-icon--heart-o" aria-hidden="true"></i>
<i class="c-icon c-icon--heartbeat" aria-hidden="true"></i>
<i class="c-icon c-icon--history" aria-hidden="true"></i>
<i class="c-icon c-icon--home" aria-hidden="true"></i>
<i class="c-icon c-icon--hotel" aria-hidden="true"></i>
<i class="c-icon c-icon--hourglass" aria-hidden="true"></i>
<i class="c-icon c-icon--hourglass-1" aria-hidden="true"></i>
<i class="c-icon c-icon--hourglass-2" aria-hidden="true"></i>
<i class="c-icon c-icon--hourglass-3" aria-hidden="true"></i>
<i class="c-icon c-icon--hourglass-end" aria-hidden="true"></i>
<i class="c-icon c-icon--hourglass-half" aria-hidden="true"></i>
<i class="c-icon c-icon--hourglass-o" aria-hidden="true"></i>
<i class="c-icon c-icon--hourglass-start" aria-hidden="true"></i>
<i class="c-icon c-icon--i-cursor" aria-hidden="true"></i>
<i class="c-icon c-icon--id-badge" aria-hidden="true"></i>
<i class="c-icon c-icon--id-card" aria-hidden="true"></i>
<i class="c-icon c-icon--id-card-o" aria-hidden="true"></i>
<i class="c-icon c-icon--image" aria-hidden="true"></i>
<i class="c-icon c-icon--inbox" aria-hidden="true"></i>
<i class="c-icon c-icon--industry" aria-hidden="true"></i>
<i class="c-icon c-icon--info" aria-hidden="true"></i>
<i class="c-icon c-icon--info-circle" aria-hidden="true"></i>
<i class="c-icon c-icon--institution" aria-hidden="true"></i>
<i class="c-icon c-icon--key" aria-hidden="true"></i>
<i class="c-icon c-icon--keyboard-o" aria-hidden="true"></i>
<i class="c-icon c-icon--language" aria-hidden="true"></i>
<i class="c-icon c-icon--laptop" aria-hidden="true"></i>
<i class="c-icon c-icon--leaf" aria-hidden="true"></i>
<i class="c-icon c-icon--legal" aria-hidden="true"></i>
<i class="c-icon c-icon--lemon-o" aria-hidden="true"></i>
<i class="c-icon c-icon--level-down" aria-hidden="true"></i>
<i class="c-icon c-icon--level-up" aria-hidden="true"></i>
<i class="c-icon c-icon--life-bouy" aria-hidden="true"></i>
<i class="c-icon c-icon--life-buoy" aria-hidden="true"></i>
<i class="c-icon c-icon--life-ring" aria-hidden="true"></i>
<i class="c-icon c-icon--life-saver" aria-hidden="true"></i>
<i class="c-icon c-icon--lightbulb-o" aria-hidden="true"></i>
<i class="c-icon c-icon--line-chart" aria-hidden="true"></i>
<i class="c-icon c-icon--location-arrow" aria-hidden="true"></i>
<i class="c-icon c-icon--lock" aria-hidden="true"></i>
<i class="c-icon c-icon--low-vision" aria-hidden="true"></i>
<i class="c-icon c-icon--magic" aria-hidden="true"></i>
<i class="c-icon c-icon--magnet" aria-hidden="true"></i>
<i class="c-icon c-icon--mail-forward" aria-hidden="true"></i>
<i class="c-icon c-icon--mail-reply" aria-hidden="true"></i>
<i class="c-icon c-icon--mail-reply-all" aria-hidden="true"></i>
<i class="c-icon c-icon--male" aria-hidden="true"></i>
<i class="c-icon c-icon--map" aria-hidden="true"></i>
<i class="c-icon c-icon--map-marker" aria-hidden="true"></i>
<i class="c-icon c-icon--map-o" aria-hidden="true"></i>
<i class="c-icon c-icon--map-pin" aria-hidden="true"></i>
<i class="c-icon c-icon--map-signs" aria-hidden="true"></i>
<i class="c-icon c-icon--meh-o" aria-hidden="true"></i>
<i class="c-icon c-icon--microchip" aria-hidden="true"></i>
<i class="c-icon c-icon--microphone" aria-hidden="true"></i>
<i class="c-icon c-icon--microphone-slash" aria-hidden="true"></i>
<i class="c-icon c-icon--minus" aria-hidden="true"></i>
<i class="c-icon c-icon--minus-circle" aria-hidden="true"></i>
<i class="c-icon c-icon--minus-square" aria-hidden="true"></i>
<i class="c-icon c-icon--minus-square-o" aria-hidden="true"></i>
<i class="c-icon c-icon--mobile" aria-hidden="true"></i>
<i class="c-icon c-icon--mobile-phone" aria-hidden="true"></i>
<i class="c-icon c-icon--money" aria-hidden="true"></i>
<i class="c-icon c-icon--moon-o" aria-hidden="true"></i>
<i class="c-icon c-icon--mortar-board" aria-hidden="true"></i>
<i class="c-icon c-icon--motorcycle" aria-hidden="true"></i>
<i class="c-icon c-icon--mouse-pointer" aria-hidden="true"></i>
<i class="c-icon c-icon--music" aria-hidden="true"></i>
<i class="c-icon c-icon--navicon" aria-hidden="true"></i>
<i class="c-icon c-icon--newspaper-o" aria-hidden="true"></i>
<i class="c-icon c-icon--object-group" aria-hidden="true"></i>
<i class="c-icon c-icon--object-ungroup" aria-hidden="true"></i>
<i class="c-icon c-icon--paint-brush" aria-hidden="true"></i>
<i class="c-icon c-icon--paper-plane" aria-hidden="true"></i>
<i class="c-icon c-icon--paper-plane-o" aria-hidden="true"></i>
<i class="c-icon c-icon--paw" aria-hidden="true"></i>
<i class="c-icon c-icon--pencil" aria-hidden="true"></i>
<i class="c-icon c-icon--pencil-square" aria-hidden="true"></i>
<i class="c-icon c-icon--pencil-square-o" aria-hidden="true"></i>
<i class="c-icon c-icon--percent" aria-hidden="true"></i>
<i class="c-icon c-icon--phone" aria-hidden="true"></i>
<i class="c-icon c-icon--phone-square" aria-hidden="true"></i>
<i class="c-icon c-icon--photo" aria-hidden="true"></i>
<i class="c-icon c-icon--picture-o" aria-hidden="true"></i>
<i class="c-icon c-icon--pie-chart" aria-hidden="true"></i>
<i class="c-icon c-icon--plane" aria-hidden="true"></i>
<i class="c-icon c-icon--plug" aria-hidden="true"></i>
<i class="c-icon c-icon--plus" aria-hidden="true"></i>
<i class="c-icon c-icon--plus-circle" aria-hidden="true"></i>
<i class="c-icon c-icon--plus-square" aria-hidden="true"></i>
<i class="c-icon c-icon--plus-square-o" aria-hidden="true"></i>
<i class="c-icon c-icon--podcast" aria-hidden="true"></i>
<i class="c-icon c-icon--power-off" aria-hidden="true"></i>
<i class="c-icon c-icon--print" aria-hidden="true"></i>
<i class="c-icon c-icon--puzzle-piece" aria-hidden="true"></i>
<i class="c-icon c-icon--qrcode" aria-hidden="true"></i>
<i class="c-icon c-icon--question" aria-hidden="true"></i>
<i class="c-icon c-icon--question-circle" aria-hidden="true"></i>
<i class="c-icon c-icon--question-circle-o" aria-hidden="true"></i>
<i class="c-icon c-icon--quote-left" aria-hidden="true"></i>
<i class="c-icon c-icon--quote-right" aria-hidden="true"></i>
<i class="c-icon c-icon--random" aria-hidden="true"></i>
<i class="c-icon c-icon--recycle" aria-hidden="true"></i>
<i class="c-icon c-icon--refresh" aria-hidden="true"></i>
<i class="c-icon c-icon--registered" aria-hidden="true"></i>
<i class="c-icon c-icon--remove" aria-hidden="true"></i>
<i class="c-icon c-icon--reorder" aria-hidden="true"></i>
<i class="c-icon c-icon--reply" aria-hidden="true"></i>
<i class="c-icon c-icon--reply-all" aria-hidden="true"></i>
<i class="c-icon c-icon--retweet" aria-hidden="true"></i>
<i class="c-icon c-icon--road" aria-hidden="true"></i>
<i class="c-icon c-icon--rocket" aria-hidden="true"></i>
<i class="c-icon c-icon--rss" aria-hidden="true"></i>
<i class="c-icon c-icon--rss-square" aria-hidden="true"></i>
<i class="c-icon c-icon--s15" aria-hidden="true"></i>
<i class="c-icon c-icon--search" aria-hidden="true"></i>
<i class="c-icon c-icon--search-minus" aria-hidden="true"></i>
<i class="c-icon c-icon--search-plus" aria-hidden="true"></i>
<i class="c-icon c-icon--send" aria-hidden="true"></i>
<i class="c-icon c-icon--send-o" aria-hidden="true"></i>
<i class="c-icon c-icon--server" aria-hidden="true"></i>
<i class="c-icon c-icon--share" aria-hidden="true"></i>
<i class="c-icon c-icon--share-alt" aria-hidden="true"></i>
<i class="c-icon c-icon--share-alt-square" aria-hidden="true"></i>
<i class="c-icon c-icon--share-square" aria-hidden="true"></i>
<i class="c-icon c-icon--share-square-o" aria-hidden="true"></i>
<i class="c-icon c-icon--shield" aria-hidden="true"></i>
<i class="c-icon c-icon--ship" aria-hidden="true"></i>
<i class="c-icon c-icon--shopping-bag" aria-hidden="true"></i>
<i class="c-icon c-icon--shopping-basket" aria-hidden="true"></i>
<i class="c-icon c-icon--shopping-cart" aria-hidden="true"></i>
<i class="c-icon c-icon--shower" aria-hidden="true"></i>
<i class="c-icon c-icon--sign-in" aria-hidden="true"></i>
<i class="c-icon c-icon--sign-language" aria-hidden="true"></i>
<i class="c-icon c-icon--sign-out" aria-hidden="true"></i>
<i class="c-icon c-icon--signal" aria-hidden="true"></i>
<i class="c-icon c-icon--signing" aria-hidden="true"></i>
<i class="c-icon c-icon--sitemap" aria-hidden="true"></i>
<i class="c-icon c-icon--sliders" aria-hidden="true"></i>
<i class="c-icon c-icon--smile-o" aria-hidden="true"></i>
<i class="c-icon c-icon--snowflake-o" aria-hidden="true"></i>
<i class="c-icon c-icon--soccer-ball-o" aria-hidden="true"></i>
<i class="c-icon c-icon--sort" aria-hidden="true"></i>
<i class="c-icon c-icon--sort-alpha-asc" aria-hidden="true"></i>
<i class="c-icon c-icon--sort-alpha-desc" aria-hidden="true"></i>
<i class="c-icon c-icon--sort-amount-asc" aria-hidden="true"></i>
<i class="c-icon c-icon--sort-amount-desc" aria-hidden="true"></i>
<i class="c-icon c-icon--sort-asc" aria-hidden="true"></i>
<i class="c-icon c-icon--sort-desc" aria-hidden="true"></i>
<i class="c-icon c-icon--sort-down" aria-hidden="true"></i>
<i class="c-icon c-icon--sort-numeric-asc" aria-hidden="true"></i>
<i class="c-icon c-icon--sort-numeric-desc" aria-hidden="true"></i>
<i class="c-icon c-icon--sort-up" aria-hidden="true"></i>
<i class="c-icon c-icon--space-shuttle" aria-hidden="true"></i>
<i class="c-icon c-icon--spinner" aria-hidden="true"></i>
<i class="c-icon c-icon--spoon" aria-hidden="true"></i>
<i class="c-icon c-icon--square" aria-hidden="true"></i>
<i class="c-icon c-icon--square-o" aria-hidden="true"></i>
<i class="c-icon c-icon--star" aria-hidden="true"></i>
<i class="c-icon c-icon--star-half" aria-hidden="true"></i>
<i class="c-icon c-icon--star-half-empty" aria-hidden="true"></i>
<i class="c-icon c-icon--star-half-full" aria-hidden="true"></i>
<i class="c-icon c-icon--star-half-o" aria-hidden="true"></i>
<i class="c-icon c-icon--star-o" aria-hidden="true"></i>
<i class="c-icon c-icon--sticky-note" aria-hidden="true"></i>
<i class="c-icon c-icon--sticky-note-o" aria-hidden="true"></i>
<i class="c-icon c-icon--street-view" aria-hidden="true"></i>
<i class="c-icon c-icon--suitcase" aria-hidden="true"></i>
<i class="c-icon c-icon--sun-o" aria-hidden="true"></i>
<i class="c-icon c-icon--support" aria-hidden="true"></i>
<i class="c-icon c-icon--tablet" aria-hidden="true"></i>
<i class="c-icon c-icon--tachometer" aria-hidden="true"></i>
<i class="c-icon c-icon--tag" aria-hidden="true"></i>
<i class="c-icon c-icon--tags" aria-hidden="true"></i>
<i class="c-icon c-icon--tasks" aria-hidden="true"></i>
<i class="c-icon c-icon--taxi" aria-hidden="true"></i>
<i class="c-icon c-icon--television" aria-hidden="true"></i>
<i class="c-icon c-icon--terminal" aria-hidden="true"></i>
<i class="c-icon c-icon--thermometer" aria-hidden="true"></i>
<i class="c-icon c-icon--thermometer-0" aria-hidden="true"></i>
<i class="c-icon c-icon--thermometer-1" aria-hidden="true"></i>
<i class="c-icon c-icon--thermometer-2" aria-hidden="true"></i>
<i class="c-icon c-icon--thermometer-3" aria-hidden="true"></i>
<i class="c-icon c-icon--thermometer-4" aria-hidden="true"></i>
<i class="c-icon c-icon--thermometer-empty" aria-hidden="true"></i>
<i class="c-icon c-icon--thermometer-full" aria-hidden="true"></i>
<i class="c-icon c-icon--thermometer-half" aria-hidden="true"></i>
<i class="c-icon c-icon--thermometer-quarter" aria-hidden="true"></i>
<i class="c-icon c-icon--thermometer-three-quarters" aria-hidden="true"></i>
<i class="c-icon c-icon--thumb-tack" aria-hidden="true"></i>
<i class="c-icon c-icon--thumbs-down" aria-hidden="true"></i>
<i class="c-icon c-icon--thumbs-o-down" aria-hidden="true"></i>
<i class="c-icon c-icon--thumbs-o-up" aria-hidden="true"></i>
<i class="c-icon c-icon--thumbs-up" aria-hidden="true"></i>
<i class="c-icon c-icon--ticket" aria-hidden="true"></i>
<i class="c-icon c-icon--times" aria-hidden="true"></i>
<i class="c-icon c-icon--times-circle" aria-hidden="true"></i>
<i class="c-icon c-icon--times-circle-o" aria-hidden="true"></i>
<i class="c-icon c-icon--times-rectangle" aria-hidden="true"></i>
<i class="c-icon c-icon--times-rectangle-o" aria-hidden="true"></i>
<i class="c-icon c-icon--tint" aria-hidden="true"></i>
<i class="c-icon c-icon--toggle-down" aria-hidden="true"></i>
<i class="c-icon c-icon--toggle-left" aria-hidden="true"></i>
<i class="c-icon c-icon--toggle-off" aria-hidden="true"></i>
<i class="c-icon c-icon--toggle-on" aria-hidden="true"></i>
<i class="c-icon c-icon--toggle-right" aria-hidden="true"></i>
<i class="c-icon c-icon--toggle-up" aria-hidden="true"></i>
<i class="c-icon c-icon--trademark" aria-hidden="true"></i>
<i class="c-icon c-icon--trash" aria-hidden="true"></i>
<i class="c-icon c-icon--trash-o" aria-hidden="true"></i>
<i class="c-icon c-icon--tree" aria-hidden="true"></i>
<i class="c-icon c-icon--trophy" aria-hidden="true"></i>
<i class="c-icon c-icon--truck" aria-hidden="true"></i>
<i class="c-icon c-icon--tty" aria-hidden="true"></i>
<i class="c-icon c-icon--tv" aria-hidden="true"></i>
<i class="c-icon c-icon--umbrella" aria-hidden="true"></i>
<i class="c-icon c-icon--universal-access" aria-hidden="true"></i>
<i class="c-icon c-icon--university" aria-hidden="true"></i>
<i class="c-icon c-icon--unlock" aria-hidden="true"></i>
<i class="c-icon c-icon--unlock-alt" aria-hidden="true"></i>
<i class="c-icon c-icon--unsorted" aria-hidden="true"></i>
<i class="c-icon c-icon--upload" aria-hidden="true"></i>
<i class="c-icon c-icon--user" aria-hidden="true"></i>
<i class="c-icon c-icon--user-circle" aria-hidden="true"></i>
<i class="c-icon c-icon--user-circle-o" aria-hidden="true"></i>
<i class="c-icon c-icon--user-o" aria-hidden="true"></i>
<i class="c-icon c-icon--user-plus" aria-hidden="true"></i>
<i class="c-icon c-icon--user-secret" aria-hidden="true"></i>
<i class="c-icon c-icon--user-times" aria-hidden="true"></i>
<i class="c-icon c-icon--users" aria-hidden="true"></i>
<i class="c-icon c-icon--vcard" aria-hidden="true"></i>
<i class="c-icon c-icon--vcard-o" aria-hidden="true"></i>
<i class="c-icon c-icon--video-camera" aria-hidden="true"></i>
<i class="c-icon c-icon--volume-control-phone" aria-hidden="true"></i>
<i class="c-icon c-icon--volume-down" aria-hidden="true"></i>
<i class="c-icon c-icon--volume-off" aria-hidden="true"></i>
<i class="c-icon c-icon--volume-up" aria-hidden="true"></i>
<i class="c-icon c-icon--warning" aria-hidden="true"></i>
<i class="c-icon c-icon--wheelchair" aria-hidden="true"></i>
<i class="c-icon c-icon--wheelchair-alt" aria-hidden="true"></i>
<i class="c-icon c-icon--wifi" aria-hidden="true"></i>
<i class="c-icon c-icon--window-close" aria-hidden="true"></i>
<i class="c-icon c-icon--window-close-o" aria-hidden="true"></i>
<i class="c-icon c-icon--window-maximize" aria-hidden="true"></i>
<i class="c-icon c-icon--window-minimize" aria-hidden="true"></i>
<i class="c-icon c-icon--window-restore" aria-hidden="true"></i>
<i class="c-icon c-icon--wrench" aria-hidden="true"></i>
<h3>Accessibility Icons</h3>
<i class="c-icon c-icon--american-sign-language-interpreting" aria-hidden="true"></i>
<i class="c-icon c-icon--asl-interpreting" aria-hidden="true"></i>
<i class="c-icon c-icon--assistive-listening-systems" aria-hidden="true"></i>
<i class="c-icon c-icon--audio-description" aria-hidden="true"></i>
<i class="c-icon c-icon--blind" aria-hidden="true"></i>
<i class="c-icon c-icon--braille" aria-hidden="true"></i>
<i class="c-icon c-icon--cc" aria-hidden="true"></i>
<i class="c-icon c-icon--deaf" aria-hidden="true"></i>
<i class="c-icon c-icon--deafness" aria-hidden="true"></i>
<i class="c-icon c-icon--hard-of-hearing" aria-hidden="true"></i>
<i class="c-icon c-icon--low-vision" aria-hidden="true"></i>
<i class="c-icon c-icon--question-circle-o" aria-hidden="true"></i>
<i class="c-icon c-icon--sign-language" aria-hidden="true"></i>
<i class="c-icon c-icon--signing" aria-hidden="true"></i>
<i class="c-icon c-icon--tty" aria-hidden="true"></i>
<i class="c-icon c-icon--universal-access" aria-hidden="true"></i>
<i class="c-icon c-icon--volume-control-phone" aria-hidden="true"></i>
<i class="c-icon c-icon--wheelchair" aria-hidden="true"></i>
<i class="c-icon c-icon--wheelchair-alt" aria-hidden="true"></i>
<h3>Hand Icons</h3>
<i class="c-icon c-icon--hand-grab-o" aria-hidden="true"></i>
<i class="c-icon c-icon--hand-lizard-o" aria-hidden="true"></i>
<i class="c-icon c-icon--hand-o-down" aria-hidden="true"></i>
<i class="c-icon c-icon--hand-o-left" aria-hidden="true"></i>
<i class="c-icon c-icon--hand-o-right" aria-hidden="true"></i>
<i class="c-icon c-icon--hand-o-up" aria-hidden="true"></i>
<i class="c-icon c-icon--hand-paper-o" aria-hidden="true"></i>
<i class="c-icon c-icon--hand-peace-o" aria-hidden="true"></i>
<i class="c-icon c-icon--hand-pointer-o" aria-hidden="true"></i>
<i class="c-icon c-icon--hand-rock-o" aria-hidden="true"></i>
<i class="c-icon c-icon--hand-scissors-o" aria-hidden="true"></i>
<i class="c-icon c-icon--hand-spock-o" aria-hidden="true"></i>
<i class="c-icon c-icon--hand-stop-o" aria-hidden="true"></i>
<i class="c-icon c-icon--thumbs-down" aria-hidden="true"></i>
<i class="c-icon c-icon--thumbs-o-down" aria-hidden="true"></i>
<i class="c-icon c-icon--thumbs-o-up" aria-hidden="true"></i>
<i class="c-icon c-icon--thumbs-up" aria-hidden="true"></i>
<h3>Transportation Icons</h3>
<i class="c-icon c-icon--ambulance" aria-hidden="true"></i>
<i class="c-icon c-icon--automobile" aria-hidden="true"></i>
<i class="c-icon c-icon--bicycle" aria-hidden="true"></i>
<i class="c-icon c-icon--bus" aria-hidden="true"></i>
<i class="c-icon c-icon--cab" aria-hidden="true"></i>
<i class="c-icon c-icon--car" aria-hidden="true"></i>
<i class="c-icon c-icon--fighter-jet" aria-hidden="true"></i>
<i class="c-icon c-icon--motorcycle" aria-hidden="true"></i>
<i class="c-icon c-icon--plane" aria-hidden="true"></i>
<i class="c-icon c-icon--rocket" aria-hidden="true"></i>
<i class="c-icon c-icon--ship" aria-hidden="true"></i>
<i class="c-icon c-icon--space-shuttle" aria-hidden="true"></i>
<i class="c-icon c-icon--subway" aria-hidden="true"></i>
<i class="c-icon c-icon--taxi" aria-hidden="true"></i>
<i class="c-icon c-icon--train" aria-hidden="true"></i>
<i class="c-icon c-icon--truck" aria-hidden="true"></i>
<i class="c-icon c-icon--wheelchair" aria-hidden="true"></i>
<i class="c-icon c-icon--wheelchair-alt" aria-hidden="true"></i>
<h3>Gender Icons</h3>
<i class="c-icon c-icon--genderless" aria-hidden="true"></i>
<i class="c-icon c-icon--intersex" aria-hidden="true"></i>
<i class="c-icon c-icon--mars" aria-hidden="true"></i>
<i class="c-icon c-icon--mars-double" aria-hidden="true"></i>
<i class="c-icon c-icon--mars-stroke" aria-hidden="true"></i>
<i class="c-icon c-icon--mars-stroke-h" aria-hidden="true"></i>
<i class="c-icon c-icon--mars-stroke-v" aria-hidden="true"></i>
<i class="c-icon c-icon--mercury" aria-hidden="true"></i>
<i class="c-icon c-icon--neuter" aria-hidden="true"></i>
<i class="c-icon c-icon--transgender" aria-hidden="true"></i>
<i class="c-icon c-icon--transgender-alt" aria-hidden="true"></i>
<i class="c-icon c-icon--venus" aria-hidden="true"></i>
<i class="c-icon c-icon--venus-double" aria-hidden="true"></i>
<i class="c-icon c-icon--venus-mars" aria-hidden="true"></i>
<h3>File Type Icons</h3>
<i class="c-icon c-icon--file" aria-hidden="true"></i>
<i class="c-icon c-icon--file-archive-o" aria-hidden="true"></i>
<i class="c-icon c-icon--file-audio-o" aria-hidden="true"></i>
<i class="c-icon c-icon--file-code-o" aria-hidden="true"></i>
<i class="c-icon c-icon--file-excel-o" aria-hidden="true"></i>
<i class="c-icon c-icon--file-image-o" aria-hidden="true"></i>
<i class="c-icon c-icon--file-movie-o" aria-hidden="true"></i>
<i class="c-icon c-icon--file-o" aria-hidden="true"></i>
<i class="c-icon c-icon--file-pdf-o" aria-hidden="true"></i>
<i class="c-icon c-icon--file-photo-o" aria-hidden="true"></i>
<i class="c-icon c-icon--file-picture-o" aria-hidden="true"></i>
<i class="c-icon c-icon--file-powerpoint-o" aria-hidden="true"></i>
<i class="c-icon c-icon--file-sound-o" aria-hidden="true"></i>
<i class="c-icon c-icon--file-text" aria-hidden="true"></i>
<i class="c-icon c-icon--file-text-o" aria-hidden="true"></i>
<i class="c-icon c-icon--file-video-o" aria-hidden="true"></i>
<i class="c-icon c-icon--file-word-o" aria-hidden="true"></i>
<i class="c-icon c-icon--file-zip-o" aria-hidden="true"></i>
<h3>Spinner Icons</h3>
<p>Note: These icons work great with the fa-spin class. Check out the spinning icons example.</p>
<i class="c-icon c-icon--circle-o-notch" aria-hidden="true"></i>
<i class="c-icon c-icon--cog" aria-hidden="true"></i>
<i class="c-icon c-icon--gear" aria-hidden="true"></i>
<i class="c-icon c-icon--refresh" aria-hidden="true"></i>
<i class="c-icon c-icon--spinner" aria-hidden="true"></i>
<h3>Form Control Icons</h3>
<i class="c-icon c-icon--check-square" aria-hidden="true"></i>
<i class="c-icon c-icon--check-square-o" aria-hidden="true"></i>
<i class="c-icon c-icon--circle" aria-hidden="true"></i>
<i class="c-icon c-icon--circle-o" aria-hidden="true"></i>
<i class="c-icon c-icon--dot-circle-o" aria-hidden="true"></i>
<i class="c-icon c-icon--minus-square" aria-hidden="true"></i>
<i class="c-icon c-icon--minus-square-o" aria-hidden="true"></i>
<i class="c-icon c-icon--plus-square" aria-hidden="true"></i>
<i class="c-icon c-icon--plus-square-o" aria-hidden="true"></i>
<i class="c-icon c-icon--square" aria-hidden="true"></i>
<i class="c-icon c-icon--square-o" aria-hidden="true"></i>
<h3>Payment Icons</h3>
<i class="c-icon c-icon--cc-amex" aria-hidden="true"></i>
<i class="c-icon c-icon--cc-diners-club" aria-hidden="true"></i>
<i class="c-icon c-icon--cc-discover" aria-hidden="true"></i>
<i class="c-icon c-icon--cc-jcb" aria-hidden="true"></i>
<i class="c-icon c-icon--cc-mastercard" aria-hidden="true"></i>
<i class="c-icon c-icon--cc-paypal" aria-hidden="true"></i>
<i class="c-icon c-icon--cc-stripe" aria-hidden="true"></i>
<i class="c-icon c-icon--cc-visa" aria-hidden="true"></i>
<i class="c-icon c-icon--credit-card" aria-hidden="true"></i>
<i class="c-icon c-icon--credit-card-alt" aria-hidden="true"></i>
<i class="c-icon c-icon--google-wallet" aria-hidden="true"></i>
<i class="c-icon c-icon--paypal" aria-hidden="true"></i>
<h3>Chart Icons</h3>
<i class="c-icon c-icon--area-chart" aria-hidden="true"></i>
<i class="c-icon c-icon--bar-chart" aria-hidden="true"></i>
<i class="c-icon c-icon--bar-chart-o" aria-hidden="true"></i>
<i class="c-icon c-icon--line-chart" aria-hidden="true"></i>
<i class="c-icon c-icon--pie-chart" aria-hidden="true"></i>
<h3>Currency Icons</h3>
<i class="c-icon c-icon--bitcoin" aria-hidden="true"></i>
<i class="c-icon c-icon--btc" aria-hidden="true"></i>
<i class="c-icon c-icon--cny" aria-hidden="true"></i>
<i class="c-icon c-icon--dollar" aria-hidden="true"></i>
<i class="c-icon c-icon--eur" aria-hidden="true"></i>
<i class="c-icon c-icon--euro" aria-hidden="true"></i>
<i class="c-icon c-icon--gbp" aria-hidden="true"></i>
<i class="c-icon c-icon--gg" aria-hidden="true"></i>
<i class="c-icon c-icon--gg-circle" aria-hidden="true"></i>
<i class="c-icon c-icon--ils" aria-hidden="true"></i>
<i class="c-icon c-icon--inr" aria-hidden="true"></i>
<i class="c-icon c-icon--jpy" aria-hidden="true"></i>
<i class="c-icon c-icon--krw" aria-hidden="true"></i>
<i class="c-icon c-icon--money" aria-hidden="true"></i>
<i class="c-icon c-icon--rmb" aria-hidden="true"></i>
<i class="c-icon c-icon--rouble" aria-hidden="true"></i>
<i class="c-icon c-icon--rub" aria-hidden="true"></i>
<i class="c-icon c-icon--ruble" aria-hidden="true"></i>
<i class="c-icon c-icon--rupee" aria-hidden="true"></i>
<i class="c-icon c-icon--shekel" aria-hidden="true"></i>
<i class="c-icon c-icon--sheqel" aria-hidden="true"></i>
<i class="c-icon c-icon--try" aria-hidden="true"></i>
<i class="c-icon c-icon--turkish-lira" aria-hidden="true"></i>
<i class="c-icon c-icon--usd" aria-hidden="true"></i>
<i class="c-icon c-icon--won" aria-hidden="true"></i>
<i class="c-icon c-icon--yen" aria-hidden="true"></i>
<h3>Text Editor Icons</h3>
<i class="c-icon c-icon--align-center" aria-hidden="true"></i>
<i class="c-icon c-icon--align-justify" aria-hidden="true"></i>
<i class="c-icon c-icon--align-left" aria-hidden="true"></i>
<i class="c-icon c-icon--align-right" aria-hidden="true"></i>
<i class="c-icon c-icon--bold" aria-hidden="true"></i>
<i class="c-icon c-icon--chain" aria-hidden="true"></i>
<i class="c-icon c-icon--chain-broken" aria-hidden="true"></i>
<i class="c-icon c-icon--clipboard" aria-hidden="true"></i>
<i class="c-icon c-icon--columns" aria-hidden="true"></i>
<i class="c-icon c-icon--copy" aria-hidden="true"></i>
<i class="c-icon c-icon--cut" aria-hidden="true"></i>
<i class="c-icon c-icon--dedent" aria-hidden="true"></i>
<i class="c-icon c-icon--eraser" aria-hidden="true"></i>
<i class="c-icon c-icon--file" aria-hidden="true"></i>
<i class="c-icon c-icon--file-o" aria-hidden="true"></i>
<i class="c-icon c-icon--file-text" aria-hidden="true"></i>
<i class="c-icon c-icon--file-text-o" aria-hidden="true"></i>
<i class="c-icon c-icon--files-o" aria-hidden="true"></i>
<i class="c-icon c-icon--floppy-o" aria-hidden="true"></i>
<i class="c-icon c-icon--font" aria-hidden="true"></i>
<i class="c-icon c-icon--header" aria-hidden="true"></i>
<i class="c-icon c-icon--indent" aria-hidden="true"></i>
<i class="c-icon c-icon--italic" aria-hidden="true"></i>
<i class="c-icon c-icon--link" aria-hidden="true"></i>
<i class="c-icon c-icon--list" aria-hidden="true"></i>
<i class="c-icon c-icon--list-alt" aria-hidden="true"></i>
<i class="c-icon c-icon--list-ol" aria-hidden="true"></i>
<i class="c-icon c-icon--list-ul" aria-hidden="true"></i>
<i class="c-icon c-icon--outdent" aria-hidden="true"></i>
<i class="c-icon c-icon--paperclip" aria-hidden="true"></i>
<i class="c-icon c-icon--paragraph" aria-hidden="true"></i>
<i class="c-icon c-icon--paste" aria-hidden="true"></i>
<i class="c-icon c-icon--repeat" aria-hidden="true"></i>
<i class="c-icon c-icon--rotate-left" aria-hidden="true"></i>
<i class="c-icon c-icon--rotate-right" aria-hidden="true"></i>
<i class="c-icon c-icon--save" aria-hidden="true"></i>
<i class="c-icon c-icon--scissors" aria-hidden="true"></i>
<i class="c-icon c-icon--strikethrough" aria-hidden="true"></i>
<i class="c-icon c-icon--subscript" aria-hidden="true"></i>
<i class="c-icon c-icon--superscript" aria-hidden="true"></i>
<i class="c-icon c-icon--table" aria-hidden="true"></i>
<i class="c-icon c-icon--text-height" aria-hidden="true"></i>
<i class="c-icon c-icon--text-width" aria-hidden="true"></i>
<i class="c-icon c-icon--th" aria-hidden="true"></i>
<i class="c-icon c-icon--th-large" aria-hidden="true"></i>
<i class="c-icon c-icon--th-list" aria-hidden="true"></i>
<i class="c-icon c-icon--underline" aria-hidden="true"></i>
<i class="c-icon c-icon--undo" aria-hidden="true"></i>
<i class="c-icon c-icon--unlink" aria-hidden="true"></i>
<h3>Directional Icons</h3>
<i class="c-icon c-icon--angle-double-down" aria-hidden="true"></i>
<i class="c-icon c-icon--angle-double-left" aria-hidden="true"></i>
<i class="c-icon c-icon--angle-double-right" aria-hidden="true"></i>
<i class="c-icon c-icon--angle-double-up" aria-hidden="true"></i>
<i class="c-icon c-icon--angle-down" aria-hidden="true"></i>
<i class="c-icon c-icon--angle-left" aria-hidden="true"></i>
<i class="c-icon c-icon--angle-right" aria-hidden="true"></i>
<i class="c-icon c-icon--angle-up" aria-hidden="true"></i>
<i class="c-icon c-icon--arrow-circle-down" aria-hidden="true"></i>
<i class="c-icon c-icon--arrow-circle-left" aria-hidden="true"></i>
<i class="c-icon c-icon--arrow-circle-o-down" aria-hidden="true"></i>
<i class="c-icon c-icon--arrow-circle-o-left" aria-hidden="true"></i>
<i class="c-icon c-icon--arrow-circle-o-right" aria-hidden="true"></i>
<i class="c-icon c-icon--arrow-circle-o-up" aria-hidden="true"></i>
<i class="c-icon c-icon--arrow-circle-right" aria-hidden="true"></i>
<i class="c-icon c-icon--arrow-circle-up" aria-hidden="true"></i>
<i class="c-icon c-icon--arrow-down" aria-hidden="true"></i>
<i class="c-icon c-icon--arrow-left" aria-hidden="true"></i>
<i class="c-icon c-icon--arrow-right" aria-hidden="true"></i>
<i class="c-icon c-icon--arrow-up" aria-hidden="true"></i>
<i class="c-icon c-icon--arrows" aria-hidden="true"></i>
<i class="c-icon c-icon--arrows-alt" aria-hidden="true"></i>
<i class="c-icon c-icon--arrows-h" aria-hidden="true"></i>
<i class="c-icon c-icon--arrows-v" aria-hidden="true"></i>
<i class="c-icon c-icon--caret-down" aria-hidden="true"></i>
<i class="c-icon c-icon--caret-left" aria-hidden="true"></i>
<i class="c-icon c-icon--caret-right" aria-hidden="true"></i>
<i class="c-icon c-icon--caret-square-o-down" aria-hidden="true"></i>
<i class="c-icon c-icon--caret-square-o-left" aria-hidden="true"></i>
<i class="c-icon c-icon--caret-square-o-right" aria-hidden="true"></i>
<i class="c-icon c-icon--caret-square-o-up" aria-hidden="true"></i>
<i class="c-icon c-icon--caret-up" aria-hidden="true"></i>
<i class="c-icon c-icon--chevron-circle-down" aria-hidden="true"></i>
<i class="c-icon c-icon--chevron-circle-left" aria-hidden="true"></i>
<i class="c-icon c-icon--chevron-circle-right" aria-hidden="true"></i>
<i class="c-icon c-icon--chevron-circle-up" aria-hidden="true"></i>
<i class="c-icon c-icon--chevron-down" aria-hidden="true"></i>
<i class="c-icon c-icon--chevron-left" aria-hidden="true"></i>
<i class="c-icon c-icon--chevron-right" aria-hidden="true"></i>
<i class="c-icon c-icon--chevron-up" aria-hidden="true"></i>
<i class="c-icon c-icon--exchange" aria-hidden="true"></i>
<i class="c-icon c-icon--hand-o-down" aria-hidden="true"></i>
<i class="c-icon c-icon--hand-o-left" aria-hidden="true"></i>
<i class="c-icon c-icon--hand-o-right" aria-hidden="true"></i>
<i class="c-icon c-icon--hand-o-up" aria-hidden="true"></i>
<i class="c-icon c-icon--long-arrow-down" aria-hidden="true"></i>
<i class="c-icon c-icon--long-arrow-left" aria-hidden="true"></i>
<i class="c-icon c-icon--long-arrow-right" aria-hidden="true"></i>
<i class="c-icon c-icon--long-arrow-up" aria-hidden="true"></i>
<i class="c-icon c-icon--toggle-down" aria-hidden="true"></i>
<i class="c-icon c-icon--toggle-left" aria-hidden="true"></i>
<i class="c-icon c-icon--toggle-right" aria-hidden="true"></i>
<i class="c-icon c-icon--toggle-up" aria-hidden="true"></i>
<h3>Video Player Icons</h3>
<i class="c-icon c-icon--arrows-alt" aria-hidden="true"></i>
<i class="c-icon c-icon--backward" aria-hidden="true"></i>
<i class="c-icon c-icon--compress" aria-hidden="true"></i>
<i class="c-icon c-icon--eject" aria-hidden="true"></i>
<i class="c-icon c-icon--expand" aria-hidden="true"></i>
<i class="c-icon c-icon--fast-backward" aria-hidden="true"></i>
<i class="c-icon c-icon--fast-forward" aria-hidden="true"></i>
<i class="c-icon c-icon--forward" aria-hidden="true"></i>
<i class="c-icon c-icon--pause" aria-hidden="true"></i>
<i class="c-icon c-icon--pause-circle" aria-hidden="true"></i>
<i class="c-icon c-icon--pause-circle-o" aria-hidden="true"></i>
<i class="c-icon c-icon--play" aria-hidden="true"></i>
<i class="c-icon c-icon--play-circle" aria-hidden="true"></i>
<i class="c-icon c-icon--play-circle-o" aria-hidden="true"></i>
<i class="c-icon c-icon--random" aria-hidden="true"></i>
<i class="c-icon c-icon--step-backward" aria-hidden="true"></i>
<i class="c-icon c-icon--step-forward" aria-hidden="true"></i>
<i class="c-icon c-icon--stop" aria-hidden="true"></i>
<i class="c-icon c-icon--stop-circle" aria-hidden="true"></i>
<i class="c-icon c-icon--stop-circle-o" aria-hidden="true"></i>
<i class="c-icon c-icon--youtube-play" aria-hidden="true"></i>
<h3>Brand Icons</h3>
<i class="c-icon c-icon--500px" aria-hidden="true"></i>
<i class="c-icon c-icon--adn" aria-hidden="true"></i>
<i class="c-icon c-icon--amazon" aria-hidden="true"></i>
<i class="c-icon c-icon--android" aria-hidden="true"></i>
<i class="c-icon c-icon--angellist" aria-hidden="true"></i>
<i class="c-icon c-icon--apple" aria-hidden="true"></i>
<i class="c-icon c-icon--bandcamp" aria-hidden="true"></i>
<i class="c-icon c-icon--behance" aria-hidden="true"></i>
<i class="c-icon c-icon--behance-square" aria-hidden="true"></i>
<i class="c-icon c-icon--bitbucket" aria-hidden="true"></i>
<i class="c-icon c-icon--bitbucket-square" aria-hidden="true"></i>
<i class="c-icon c-icon--bitcoin" aria-hidden="true"></i>
<i class="c-icon c-icon--black-tie" aria-hidden="true"></i>
<i class="c-icon c-icon--bluetooth" aria-hidden="true"></i>
<i class="c-icon c-icon--bluetooth-b" aria-hidden="true"></i>
<i class="c-icon c-icon--btc" aria-hidden="true"></i>
<i class="c-icon c-icon--buysellads" aria-hidden="true"></i>
<i class="c-icon c-icon--cc-amex" aria-hidden="true"></i>
<i class="c-icon c-icon--cc-diners-club" aria-hidden="true"></i>
<i class="c-icon c-icon--cc-discover" aria-hidden="true"></i>
<i class="c-icon c-icon--cc-jcb" aria-hidden="true"></i>
<i class="c-icon c-icon--cc-mastercard" aria-hidden="true"></i>
<i class="c-icon c-icon--cc-paypal" aria-hidden="true"></i>
<i class="c-icon c-icon--cc-stripe" aria-hidden="true"></i>
<i class="c-icon c-icon--cc-visa" aria-hidden="true"></i>
<i class="c-icon c-icon--chrome" aria-hidden="true"></i>
<i class="c-icon c-icon--codepen" aria-hidden="true"></i>
<i class="c-icon c-icon--codiepie" aria-hidden="true"></i>
<i class="c-icon c-icon--connectdevelop" aria-hidden="true"></i>
<i class="c-icon c-icon--contao" aria-hidden="true"></i>
<i class="c-icon c-icon--css3" aria-hidden="true"></i>
<i class="c-icon c-icon--dashcube" aria-hidden="true"></i>
<i class="c-icon c-icon--delicious" aria-hidden="true"></i>
<i class="c-icon c-icon--deviantart" aria-hidden="true"></i>
<i class="c-icon c-icon--digg" aria-hidden="true"></i>
<i class="c-icon c-icon--dribbble" aria-hidden="true"></i>
<i class="c-icon c-icon--dropbox" aria-hidden="true"></i>
<i class="c-icon c-icon--drupal" aria-hidden="true"></i>
<i class="c-icon c-icon--edge" aria-hidden="true"></i>
<i class="c-icon c-icon--eercast" aria-hidden="true"></i>
<i class="c-icon c-icon--empire" aria-hidden="true"></i>
<i class="c-icon c-icon--envira" aria-hidden="true"></i>
<i class="c-icon c-icon--etsy" aria-hidden="true"></i>
<i class="c-icon c-icon--expeditedssl" aria-hidden="true"></i>
<i class="c-icon c-icon--fa" aria-hidden="true"></i>
<i class="c-icon c-icon--facebook" aria-hidden="true"></i>
<i class="c-icon c-icon--facebook-f" aria-hidden="true"></i>
<i class="c-icon c-icon--facebook-official" aria-hidden="true"></i>
<i class="c-icon c-icon--facebook-square" aria-hidden="true"></i>
<i class="c-icon c-icon--firefox" aria-hidden="true"></i>
<i class="c-icon c-icon--first-order" aria-hidden="true"></i>
<i class="c-icon c-icon--flickr" aria-hidden="true"></i>
<i class="c-icon c-icon--font-awesome" aria-hidden="true"></i>
<i class="c-icon c-icon--fonticons" aria-hidden="true"></i>
<i class="c-icon c-icon--fort-awesome" aria-hidden="true"></i>
<i class="c-icon c-icon--forumbee" aria-hidden="true"></i>
<i class="c-icon c-icon--foursquare" aria-hidden="true"></i>
<i class="c-icon c-icon--free-code-camp" aria-hidden="true"></i>
<i class="c-icon c-icon--ge" aria-hidden="true"></i>
<i class="c-icon c-icon--get-pocket" aria-hidden="true"></i>
<i class="c-icon c-icon--gg" aria-hidden="true"></i>
<i class="c-icon c-icon--gg-circle" aria-hidden="true"></i>
<i class="c-icon c-icon--git" aria-hidden="true"></i>
<i class="c-icon c-icon--git-square" aria-hidden="true"></i>
<i class="c-icon c-icon--github" aria-hidden="true"></i>
<i class="c-icon c-icon--github-alt" aria-hidden="true"></i>
<i class="c-icon c-icon--github-square" aria-hidden="true"></i>
<i class="c-icon c-icon--gitlab" aria-hidden="true"></i>
<i class="c-icon c-icon--gittip" aria-hidden="true"></i>
<i class="c-icon c-icon--glide" aria-hidden="true"></i>
<i class="c-icon c-icon--glide-g" aria-hidden="true"></i>
<i class="c-icon c-icon--google" aria-hidden="true"></i>
<i class="c-icon c-icon--google-plus" aria-hidden="true"></i>
<i class="c-icon c-icon--google-plus-circle" aria-hidden="true"></i>
<i class="c-icon c-icon--google-plus-official" aria-hidden="true"></i>
<i class="c-icon c-icon--google-plus-square" aria-hidden="true"></i>
<i class="c-icon c-icon--google-wallet" aria-hidden="true"></i>
<i class="c-icon c-icon--gratipay" aria-hidden="true"></i>
<i class="c-icon c-icon--grav" aria-hidden="true"></i>
<i class="c-icon c-icon--hacker-news" aria-hidden="true"></i>
<i class="c-icon c-icon--houzz" aria-hidden="true"></i>
<i class="c-icon c-icon--html5" aria-hidden="true"></i>
<i class="c-icon c-icon--imdb" aria-hidden="true"></i>
<i class="c-icon c-icon--instagram" aria-hidden="true"></i>
<i class="c-icon c-icon--internet-explorer" aria-hidden="true"></i>
<i class="c-icon c-icon--ioxhost" aria-hidden="true"></i>
<i class="c-icon c-icon--joomla" aria-hidden="true"></i>
<i class="c-icon c-icon--jsfiddle" aria-hidden="true"></i>
<i class="c-icon c-icon--lastfm" aria-hidden="true"></i>
<i class="c-icon c-icon--lastfm-square" aria-hidden="true"></i>
<i class="c-icon c-icon--leanpub" aria-hidden="true"></i>
<i class="c-icon c-icon--linkedin" aria-hidden="true"></i>
<i class="c-icon c-icon--linkedin-square" aria-hidden="true"></i>
<i class="c-icon c-icon--linode" aria-hidden="true"></i>
<i class="c-icon c-icon--linux" aria-hidden="true"></i>
<i class="c-icon c-icon--maxcdn" aria-hidden="true"></i>
<i class="c-icon c-icon--meanpath" aria-hidden="true"></i>
<i class="c-icon c-icon--medium" aria-hidden="true"></i>
<i class="c-icon c-icon--meetup" aria-hidden="true"></i>
<i class="c-icon c-icon--mixcloud" aria-hidden="true"></i>
<i class="c-icon c-icon--modx" aria-hidden="true"></i>
<i class="c-icon c-icon--odnoklassniki" aria-hidden="true"></i>
<i class="c-icon c-icon--odnoklassniki-square" aria-hidden="true"></i>
<i class="c-icon c-icon--opencart" aria-hidden="true"></i>
<i class="c-icon c-icon--openid" aria-hidden="true"></i>
<i class="c-icon c-icon--opera" aria-hidden="true"></i>
<i class="c-icon c-icon--optin-monster" aria-hidden="true"></i>
<i class="c-icon c-icon--pagelines" aria-hidden="true"></i>
<i class="c-icon c-icon--paypal" aria-hidden="true"></i>
<i class="c-icon c-icon--pied-piper" aria-hidden="true"></i>
<i class="c-icon c-icon--pied-piper-alt" aria-hidden="true"></i>
<i class="c-icon c-icon--pied-piper-pp" aria-hidden="true"></i>
<i class="c-icon c-icon--pinterest" aria-hidden="true"></i>
<i class="c-icon c-icon--pinterest-p" aria-hidden="true"></i>
<i class="c-icon c-icon--pinterest-square" aria-hidden="true"></i>
<i class="c-icon c-icon--product-hunt" aria-hidden="true"></i>
<i class="c-icon c-icon--qq" aria-hidden="true"></i>
<i class="c-icon c-icon--quora" aria-hidden="true"></i>
<i class="c-icon c-icon--ra" aria-hidden="true"></i>
<i class="c-icon c-icon--ravelry" aria-hidden="true"></i>
<i class="c-icon c-icon--rebel" aria-hidden="true"></i>
<i class="c-icon c-icon--reddit" aria-hidden="true"></i>
<i class="c-icon c-icon--reddit-alien" aria-hidden="true"></i>
<i class="c-icon c-icon--reddit-square" aria-hidden="true"></i>
<i class="c-icon c-icon--renren" aria-hidden="true"></i>
<i class="c-icon c-icon--resistance" aria-hidden="true"></i>
<i class="c-icon c-icon--safari" aria-hidden="true"></i>
<i class="c-icon c-icon--scribd" aria-hidden="true"></i>
<i class="c-icon c-icon--sellsy" aria-hidden="true"></i>
<i class="c-icon c-icon--share-alt" aria-hidden="true"></i>
<i class="c-icon c-icon--share-alt-square" aria-hidden="true"></i>
<i class="c-icon c-icon--shirtsinbulk" aria-hidden="true"></i>
<i class="c-icon c-icon--simplybuilt" aria-hidden="true"></i>
<i class="c-icon c-icon--skyatlas" aria-hidden="true"></i>
<i class="c-icon c-icon--skype" aria-hidden="true"></i>
<i class="c-icon c-icon--slack" aria-hidden="true"></i>
<i class="c-icon c-icon--slideshare" aria-hidden="true"></i>
<i class="c-icon c-icon--snapchat" aria-hidden="true"></i>
<i class="c-icon c-icon--snapchat-ghost" aria-hidden="true"></i>
<i class="c-icon c-icon--snapchat-square" aria-hidden="true"></i>
<i class="c-icon c-icon--soundcloud" aria-hidden="true"></i>
<i class="c-icon c-icon--spotify" aria-hidden="true"></i>
<i class="c-icon c-icon--stack-exchange" aria-hidden="true"></i>
<i class="c-icon c-icon--stack-overflow" aria-hidden="true"></i>
<i class="c-icon c-icon--steam" aria-hidden="true"></i>
<i class="c-icon c-icon--steam-square" aria-hidden="true"></i>
<i class="c-icon c-icon--stumbleupon" aria-hidden="true"></i>
<i class="c-icon c-icon--stumbleupon-circle" aria-hidden="true"></i>
<i class="c-icon c-icon--superpowers" aria-hidden="true"></i>
<i class="c-icon c-icon--telegram" aria-hidden="true"></i>
<i class="c-icon c-icon--tencent-weibo" aria-hidden="true"></i>
<i class="c-icon c-icon--themeisle" aria-hidden="true"></i>
<i class="c-icon c-icon--trello" aria-hidden="true"></i>
<i class="c-icon c-icon--tripadvisor" aria-hidden="true"></i>
<i class="c-icon c-icon--tumblr" aria-hidden="true"></i>
<i class="c-icon c-icon--tumblr-square" aria-hidden="true"></i>
<i class="c-icon c-icon--twitch" aria-hidden="true"></i>
<i class="c-icon c-icon--twitter" aria-hidden="true"></i>
<i class="c-icon c-icon--twitter-square" aria-hidden="true"></i>
<i class="c-icon c-icon--usb" aria-hidden="true"></i>
<i class="c-icon c-icon--viacoin" aria-hidden="true"></i>
<i class="c-icon c-icon--viadeo" aria-hidden="true"></i>
<i class="c-icon c-icon--viadeo-square" aria-hidden="true"></i>
<i class="c-icon c-icon--vimeo" aria-hidden="true"></i>
<i class="c-icon c-icon--vimeo-square" aria-hidden="true"></i>
<i class="c-icon c-icon--vine" aria-hidden="true"></i>
<i class="c-icon c-icon--vk" aria-hidden="true"></i>
<i class="c-icon c-icon--wechat" aria-hidden="true"></i>
<i class="c-icon c-icon--weibo" aria-hidden="true"></i>
<i class="c-icon c-icon--weixin" aria-hidden="true"></i>
<i class="c-icon c-icon--whatsapp" aria-hidden="true"></i>
<i class="c-icon c-icon--wikipedia-w" aria-hidden="true"></i>
<i class="c-icon c-icon--windows" aria-hidden="true"></i>
<i class="c-icon c-icon--wordpress" aria-hidden="true"></i>
<i class="c-icon c-icon--wpbeginner" aria-hidden="true"></i>
<i class="c-icon c-icon--wpexplorer" aria-hidden="true"></i>
<i class="c-icon c-icon--wpforms" aria-hidden="true"></i>
<i class="c-icon c-icon--xing" aria-hidden="true"></i>
<i class="c-icon c-icon--xing-square" aria-hidden="true"></i>
<i class="c-icon c-icon--y-combinator" aria-hidden="true"></i>
<i class="c-icon c-icon--y-combinator-square" aria-hidden="true"></i>
<i class="c-icon c-icon--yahoo" aria-hidden="true"></i>
<i class="c-icon c-icon--yc" aria-hidden="true"></i>
<i class="c-icon c-icon--yc-square" aria-hidden="true"></i>
<i class="c-icon c-icon--yelp" aria-hidden="true"></i>
<i class="c-icon c-icon--yoast" aria-hidden="true"></i>
<i class="c-icon c-icon--youtube" aria-hidden="true"></i>
<i class="c-icon c-icon--youtube-play" aria-hidden="true"></i>
<i class="c-icon c-icon--youtube-square" aria-hidden="true"></i>
<h3>Medical Icons</h3>
<i class="c-icon c-icon--ambulance" aria-hidden="true"></i>
<i class="c-icon c-icon--h-square" aria-hidden="true"></i>
<i class="c-icon c-icon--heart" aria-hidden="true"></i>
<i class="c-icon c-icon--heart-o" aria-hidden="true"></i>
<i class="c-icon c-icon--heartbeat" aria-hidden="true"></i>
<i class="c-icon c-icon--hospital-o" aria-hidden="true"></i>
<i class="c-icon c-icon--medkit" aria-hidden="true"></i>
<i class="c-icon c-icon--plus-square" aria-hidden="true"></i>
<i class="c-icon c-icon--stethoscope" aria-hidden="true"></i>
<i class="c-icon c-icon--user-md" aria-hidden="true"></i>
<i class="c-icon c-icon--wheelchair" aria-hidden="true"></i>
<i class="c-icon c-icon--wheelchair-alt" aria-hidden="true"></i>

Options

Atoms

• icon
  • type: the type of option you want (required)
  • style: can be dark (default) or light
  • sr-text: text for screen readers to access (default false)