Icons

This project uses SVG for its resolution independence and other unique capabilities and to avoid the accessibility pitfalls of icon fonts.

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!

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>

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

book1
check1
chevron-down
chevron-left
chevron-right
chevron-up
circle-o-notch1
close
envelope1
exclamation-circle1
facebook
gamepad1
generator-check
help
home1
inverter
inverter-disabled
magnifying-glass
map-marker1
menu1
phone1
plus1
question-circle1
register
star
star-0
star-25
star-50
star-75
star-100
tree1
wrench1
youtube
  1. 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.

PDF DOC XLS PPT PNG JPG
<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>

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

appliances
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
laptop
lights
microwave
modem
radio
refrigerator
saw
security-system
sump-pump
trailer
tv-dvd
washing-machine
water-heater
well-pump
whole-house
window-ac

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

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

ad
ae
af
ag
ai
al
am
ao
aq
ar
as
at
au
aw
ax
az
ba
bb
bd
be
bf
bg
bh
bi
bj
bl
bm
bn
bo
bq
br
bs
bt
bv
bw
by
bz
ca
cc
cd
cf
cg
ch
ci
ck
cl
cm
cn
co
cr
cu
cv
cw
cx
cy
cz
de
dj
dk
dm
do
dz
ec
ee
eg
eh
er
es-ct
es
et
eu
fi
fj
fk
fm
fo
fr
ga
gb-eng
gb-nir
gb-sct
gb-wls
gb
gd
ge
gf
gg
gh
gi
gl
gm
gn
gp
gq
gr
gs
gt
gu
gw
gy
hk
hm
hn
hr
ht
hu
id
ie
il
im
in
io
iq
ir
is
it
je
jm
jo
jp
ke
kg
kh
ki
km
kn
kp
kr
kw
ky
kz
la
lb
lc
li
lk
lr
ls
lt
lu
lv
ly
ma
mc
md
me
mf
mg
mh
mk
ml
mm
mn
mo
mp
mq
mr
ms
mt
mu
mv
mw
mx
my
mz
na
nc
ne
nf
ng
ni
nl
no
np
nr
nu
nz
om
pa
pe
pf
pg
ph
pk
pl
pm
pn
pr
ps
pt
pw
py
qa
re
ro
rs
ru
rw
sa
sb
sc
sd
se
sg
sh
si
sj
sk
sl
sm
sn
so
sr
ss
st
sv
sx
sy
sz
tc
td
tf
tg
th
tj
tk
tl
tm
tn
to
tr
tt
tv
tw
tz
ua
ug
um
un
us
uy
uz
va
vc
ve
vg
vi
vn
vu
wf
ws
ye
yt
za
zm
zw