Icons

Basic Usage

Icons are included inline directly. This eliminates external requests, maximizes styling potential and makes delivery via a CDN less complicated.

Use the Icon class on an <svg> element to inherit the parent text color and size itself relative to the parent font size.

It's always recommended to include width and height attributes in case the CSS doesn't properly load.

Emergency!

<svg width="24" height="28" viewBox="0 0 24 28" class="Icon u-textGrow1">
  <path d="M12 2c6.625 0 12 5.375 12 12s-5.375 12-12 12-12-5.375-12-12 5.375-12 12-12zM14 21.484v-2.969c0-0.281-0.219-0.516-0.484-0.516h-3c-0.281 0-0.516 0.234-0.516 0.516v2.969c0 0.281 0.234 0.516 0.516 0.516h3c0.266 0 0.484-0.234 0.484-0.516zM13.969 16.109l0.281-9.703c0-0.109-0.047-0.219-0.156-0.281-0.094-0.078-0.234-0.125-0.375-0.125h-3.437c-0.141 0-0.281 0.047-0.375 0.125-0.109 0.063-0.156 0.172-0.156 0.281l0.266 9.703c0 0.219 0.234 0.391 0.531 0.391h2.891c0.281 0 0.516-0.172 0.531-0.391z" />
</svg> Emergency!

Block

The default Icon behavior adjusts itself to align well with text, but that can actually throw off its alignment if you're positioning it as a block element, a flex child, etc.

Adding Icon--block will make it easier to align in those cases.

Emergency!

<div class="u-flex u-flexAlignItemsCenter">
  <svg width="24" height="28" viewBox="0 0 24 28" class="Icon Icon--block u-textGrow1 u-spaceRight06">
    <path d="M12 2c6.625 0 12 5.375 12 12s-5.375 12-12 12-12-5.375-12-12 5.375-12 12-12zM14 21.484v-2.969c0-0.281-0.219-0.516-0.484-0.516h-3c-0.281 0-0.516 0.234-0.516 0.516v2.969c0 0.281 0.234 0.516 0.516 0.516h3c0.266 0 0.484-0.234 0.484-0.516zM13.969 16.109l0.281-9.703c0-0.109-0.047-0.219-0.156-0.281-0.094-0.078-0.234-0.125-0.375-0.125h-3.437c-0.141 0-0.281 0.047-0.375 0.125-0.109 0.063-0.156 0.172-0.156 0.281l0.266 9.703c0 0.219 0.234 0.391 0.531 0.391h2.891c0.281 0 0.516-0.172 0.531-0.391z" />
  </svg> Emergency!
</div>

Compact Icons

These icons are minimal and ideal for displaying at small sizes or inline with text, for example within a button or link.

book¹

box

champion-c

check¹

chevron-down

chevron-left

chevron-right

chevron-up

circle-o-notch¹

close

electric-bolt

envelope¹

exclamation-circle¹

facebook

gamepad¹

generator-check

help

home¹

info

inverter

inverter-disabled

magnifying-glass

map-marker¹

menu¹

natural-gas

pen¹

phone¹

play¹

play-circle¹

plus¹

propane

question-circle¹

register

star

star-0

star-25

star-50

star-75

star-100

tree¹

wrench¹

youtube

Source: FontAwesome 4.7.0 (License)

FileIcon is its own pattern because it allows the label text to be customized for any three-letter extension. The label color may also be customized by changing the color of the parent element, via one of our text color utilities or by using some file extensions as a modifier, for example FileIcon--pdf.

<svg class="FileIcon FileIcon--pdf " viewBox="-4 0 42 48" width="42" height="48">
  <polygon class="FileIcon-base" points="38 48 0 48 0 0 26 0 38 12 38 48" />
  <polygon class="FileIcon-front" points="35 45 3 45 3 3 22 3 22 16 35 16 35 45" fill="#fff" />
  <polygon class="FileIcon-fold" points="25 3 35 13 25 13 25 3" fill="#fff" />
  <rect class="FileIcon-badge" x="-4" y="21" width="34" height="18" rx="3" />
  <text class="FileIcon-label" text-anchor="middle" x="13" y="34" font-size="12" fill="#fff">PDF</text>
</svg>

<svg class="FileIcon FileIcon--doc " viewBox="-4 0 42 48" width="42" height="48">
  <polygon class="FileIcon-base" points="38 48 0 48 0 0 26 0 38 12 38 48" />
  <polygon class="FileIcon-front" points="35 45 3 45 3 3 22 3 22 16 35 16 35 45" fill="#fff" />
  <polygon class="FileIcon-fold" points="25 3 35 13 25 13 25 3" fill="#fff" />
  <rect class="FileIcon-badge" x="-4" y="21" width="34" height="18" rx="3" />
  <text class="FileIcon-label" text-anchor="middle" x="13" y="34" font-size="12" fill="#fff">DOC</text>
</svg>

<svg class="FileIcon FileIcon--xls " viewBox="-4 0 42 48" width="42" height="48">
  <polygon class="FileIcon-base" points="38 48 0 48 0 0 26 0 38 12 38 48" />
  <polygon class="FileIcon-front" points="35 45 3 45 3 3 22 3 22 16 35 16 35 45" fill="#fff" />
  <polygon class="FileIcon-fold" points="25 3 35 13 25 13 25 3" fill="#fff" />
  <rect class="FileIcon-badge" x="-4" y="21" width="34" height="18" rx="3" />
  <text class="FileIcon-label" text-anchor="middle" x="13" y="34" font-size="12" fill="#fff">XLS</text>
</svg>

<svg class="FileIcon FileIcon--ppt " viewBox="-4 0 42 48" width="42" height="48">
  <polygon class="FileIcon-base" points="38 48 0 48 0 0 26 0 38 12 38 48" />
  <polygon class="FileIcon-front" points="35 45 3 45 3 3 22 3 22 16 35 16 35 45" fill="#fff" />
  <polygon class="FileIcon-fold" points="25 3 35 13 25 13 25 3" fill="#fff" />
  <rect class="FileIcon-badge" x="-4" y="21" width="34" height="18" rx="3" />
  <text class="FileIcon-label" text-anchor="middle" x="13" y="34" font-size="12" fill="#fff">PPT</text>
</svg>

<svg class="FileIcon FileIcon--png " viewBox="-4 0 42 48" width="42" height="48">
  <polygon class="FileIcon-base" points="38 48 0 48 0 0 26 0 38 12 38 48" />
  <polygon class="FileIcon-front" points="35 45 3 45 3 3 22 3 22 16 35 16 35 45" fill="#fff" />
  <polygon class="FileIcon-fold" points="25 3 35 13 25 13 25 3" fill="#fff" />
  <rect class="FileIcon-badge" x="-4" y="21" width="34" height="18" rx="3" />
  <text class="FileIcon-label" text-anchor="middle" x="13" y="34" font-size="12" fill="#fff">PNG</text>
</svg>

<svg class="FileIcon FileIcon--jpg " viewBox="-4 0 42 48" width="42" height="48">
  <polygon class="FileIcon-base" points="38 48 0 48 0 0 26 0 38 12 38 48" />
  <polygon class="FileIcon-front" points="35 45 3 45 3 3 22 3 22 16 35 16 35 45" fill="#fff" />
  <polygon class="FileIcon-fold" points="25 3 35 13 25 13 25 3" fill="#fff" />
  <rect class="FileIcon-badge" x="-4" y="21" width="34" height="18" rx="3" />
  <text class="FileIcon-label" text-anchor="middle" x="13" y="34" font-size="12" fill="#fff">JPG</text>
</svg>

Large Icons

Icons intended to be used on a larger scale than the compact icon set.

appliances

check-circle

computer

dishwasher

electric-range

fan-ventilator

feature-5-thd

feature-24

feature-cold-start

feature-cover

feature-electricity

feature-quiet-technology

feature-shield

feature-tools

furnace-blower

garage-door

house-lg

house-md

house-sm

laptop

lights

microwave

modem

radio

refrigerator

saw

security-system

select-circuits

sump-pump

trailer

tv-dvd

washing-machine

water-heater

well-pump

whole-house

window-ac

Badges

These badges are multi-color SVG graphics that indicate product features. Because they are multi-color, they may not benefit from the color inheritance features of 'Icon'.

clean-power

cold-start

electric-start

parallel-ready

quiet-technology

smart-charger

touch-start

usb-adapter

volt-guard

wireless-start

Flags

Over 200 open source flag icons are included. The optional Flag class may be used to size them relative to surrounding text. They are all composed at a 4:3 aspect ratio.

Because flags can vary substantially in complexity and do not benefit from, color inheritence, it's usually better to include these as traditional <img> elements and not injected into a document

Identity

Elements

Layout

Components

Compositions

Utilities