Icon reference

Click on the symbol next to the icon name to show SVG code that you can copy to your markup or to download SVG file.

Search all icons

activity

Icon activity

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--activity">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--activity"></use>
  </svg>
</div>

Raw

[object Promise]

add

Icon add

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--add">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--add"></use>
  </svg>
</div>

Raw

[object Promise]

adjust

Icon adjust

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--adjust">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--adjust"></use>
  </svg>
</div>

Raw

[object Promise]

alignCenter

Icon alignCenter

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--alignCenter">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--alignCenter"></use>
  </svg>
</div>

Raw

[object Promise]

alignJustify

Icon alignJustify

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--alignJustify">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--alignJustify"></use>
  </svg>
</div>

Raw

[object Promise]

alignLeft

Icon alignLeft

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--alignLeft">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--alignLeft"></use>
  </svg>
</div>

Raw

[object Promise]

alignRight

Icon alignRight

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--alignRight">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--alignRight"></use>
  </svg>
</div>

Raw

[object Promise]

archive

Icon archive

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--archive">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--archive"></use>
  </svg>
</div>

Raw

[object Promise]

area

Icon area

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--area">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--area"></use>
  </svg>
</div>

Raw

[object Promise]

arrowDown

Icon arrowDown

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--arrowDown">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--arrowDown"></use>
  </svg>
</div>

Raw

[object Promise]

arrowLeft

Icon arrowLeft

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--arrowLeft">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--arrowLeft"></use>
  </svg>
</div>

Raw

[object Promise]

arrowRight

Icon arrowRight

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--arrowRight">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--arrowRight"></use>
  </svg>
</div>

Raw

[object Promise]

arrowUp

Icon arrowUp

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--arrowUp">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--arrowUp"></use>
  </svg>
</div>

Raw

[object Promise]

attachment

Icon attachment

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--attachment">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--attachment"></use>
  </svg>
</div>

Raw

[object Promise]

barChart1

Icon barChart1

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--barChart1">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--barChart1"></use>
  </svg>
</div>

Raw

[object Promise]

barChart2

Icon barChart2

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--barChart2">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--barChart2"></use>
  </svg>
</div>

Raw

[object Promise]

bell

Icon bell

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--bell">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--bell"></use>
  </svg>
</div>

Raw

[object Promise]

block

Icon block

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--block">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--block"></use>
  </svg>
</div>

Raw

[object Promise]

bold

Icon bold

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--bold">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--bold"></use>
  </svg>
</div>

Raw

[object Promise]

book

Icon book

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--book">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--book"></use>
  </svg>
</div>

Raw

[object Promise]

bookmark

Icon bookmark

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--bookmark">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--bookmark"></use>
  </svg>
</div>

Raw

[object Promise]

box

Icon box

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--box">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--box"></use>
  </svg>
</div>

Raw

[object Promise]

building

Icon building

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--building">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--building"></use>
  </svg>
</div>

Raw

[object Promise]

bundle

Icon bundle

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--bundle">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--bundle"></use>
  </svg>
</div>

Raw

[object Promise]

calendar

Icon calendar

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--calendar">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--calendar"></use>
  </svg>
</div>

Raw

[object Promise]

camera

Icon camera

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--camera">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--camera"></use>
  </svg>
</div>

Raw

[object Promise]

cases

Icon cases

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--cases">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--cases"></use>
  </svg>
</div>

Raw

[object Promise]

chat

Icon chat

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--chat">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--chat"></use>
  </svg>
</div>

Raw

[object Promise]

check

Icon check

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--check">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--check"></use>
  </svg>
</div>

Raw

[object Promise]

checkbox

Icon checkbox

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--checkbox">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--checkbox"></use>
  </svg>
</div>

Raw

[object Promise]

chevronDoubleDown

Icon chevronDoubleDown

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--chevronDoubleDown">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--chevronDoubleDown"></use>
  </svg>
</div>

Raw

[object Promise]

chevronDoubleLeft

Icon chevronDoubleLeft

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--chevronDoubleLeft">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--chevronDoubleLeft"></use>
  </svg>
</div>

Raw

[object Promise]

chevronDoubleRight

Icon chevronDoubleRight

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--chevronDoubleRight">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--chevronDoubleRight"></use>
  </svg>
</div>

Raw

[object Promise]

chevronDoubleUp

Icon chevronDoubleUp

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--chevronDoubleUp">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--chevronDoubleUp"></use>
  </svg>
</div>

Raw

[object Promise]

chevronDown

Icon chevronDown

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--chevronDown">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--chevronDown"></use>
  </svg>
</div>

Raw

[object Promise]

chevronLeft

Icon chevronLeft

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--chevronLeft">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--chevronLeft"></use>
  </svg>
</div>

Raw

[object Promise]

chevronRight

Icon chevronRight

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--chevronRight">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--chevronRight"></use>
  </svg>
</div>

Raw

[object Promise]

chevronUp

Icon chevronUp

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--chevronUp">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--chevronUp"></use>
  </svg>
</div>

Raw

[object Promise]

Icon close

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--close">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--close"></use>
  </svg>
</div>

Raw

[object Promise]

cloud

Icon cloud

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--cloud">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--cloud"></use>
  </svg>
</div>

Raw

[object Promise]

code

Icon code

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--code">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--code"></use>
  </svg>
</div>

Raw

[object Promise]

comment

Icon comment

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--comment">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--comment"></use>
  </svg>
</div>

Raw

[object Promise]

compas

Icon compas

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--compas">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--compas"></use>
  </svg>
</div>

Raw

[object Promise]

coordinates3d

Icon coordinates3d

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--coordinates3d">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--coordinates3d"></use>
  </svg>
</div>

Raw

[object Promise]

copy

Icon copy

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--copy">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--copy"></use>
  </svg>
</div>

Raw

[object Promise]

cornerDownRight

Icon cornerDownRight

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--cornerDownRight">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--cornerDownRight"></use>
  </svg>
</div>

Raw

[object Promise]

creditCard

Icon creditCard

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--creditCard">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--creditCard"></use>
  </svg>
</div>

Raw

[object Promise]

cursor

Icon cursor

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--cursor">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--cursor"></use>
  </svg>
</div>

Raw

[object Promise]

database

Icon database

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--database">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--database"></use>
  </svg>
</div>

Raw

[object Promise]

description

Icon description

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--description">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--description"></use>
  </svg>
</div>

Raw

[object Promise]

distance

Icon distance

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--distance">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--distance"></use>
  </svg>
</div>

Raw

[object Promise]

dollar

Icon dollar

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--dollar">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--dollar"></use>
  </svg>
</div>

Raw

[object Promise]

downloadCloud

Icon downloadCloud

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--downloadCloud">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--downloadCloud"></use>
  </svg>
</div>

Raw

[object Promise]

download

Icon download

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--download">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--download"></use>
  </svg>
</div>

Raw

[object Promise]

dragAndDrop

Icon dragAndDrop

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--dragAndDrop">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--dragAndDrop"></use>
  </svg>
</div>

Raw

[object Promise]

dropdown

Icon dropdown

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--dropdown">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--dropdown"></use>
  </svg>
</div>

Raw

[object Promise]

edit

Icon edit

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--edit">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--edit"></use>
  </svg>
</div>

Raw

[object Promise]

equipment

Icon equipment

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--equipment">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--equipment"></use>
  </svg>
</div>

Raw

[object Promise]

error

Icon error

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--error">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--error"></use>
  </svg>
</div>

Raw

[object Promise]

expand2

Icon expand2

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--expand2">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--expand2"></use>
  </svg>
</div>

Raw

[object Promise]

expand

Icon expand

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--expand">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--expand"></use>
  </svg>
</div>

Raw

[object Promise]

externalLink

Icon externalLink

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--externalLink">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--externalLink"></use>
  </svg>
</div>

Raw

[object Promise]

fastBack

Icon fastBack

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--fastBack">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--fastBack"></use>
  </svg>
</div>

Raw

[object Promise]

fastForward

Icon fastForward

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--fastForward">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--fastForward"></use>
  </svg>
</div>

Raw

[object Promise]

file

Icon file

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--file">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--file"></use>
  </svg>
</div>

Raw

[object Promise]

film

Icon film

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--film">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--film"></use>
  </svg>
</div>

Raw

[object Promise]

filter

Icon filter

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--filter">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--filter"></use>
  </svg>
</div>

Raw

[object Promise]

flag

Icon flag

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--flag">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--flag"></use>
  </svg>
</div>

Raw

[object Promise]

folder

Icon folder

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--folder">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--folder"></use>
  </svg>
</div>

Raw

[object Promise]

globe2

Icon globe2

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--globe2">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--globe2"></use>
  </svg>
</div>

Raw

[object Promise]

globe

Icon globe

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--globe">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--globe"></use>
  </svg>
</div>

Raw

[object Promise]

grid

Icon grid

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--grid">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--grid"></use>
  </svg>
</div>

Raw

[object Promise]

group

Icon group

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--group">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--group"></use>
  </svg>
</div>

Raw

[object Promise]

heart

Icon heart

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--heart">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--heart"></use>
  </svg>
</div>

Raw

[object Promise]

help

Icon help

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--help">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--help"></use>
  </svg>
</div>

Raw

[object Promise]

hide

Icon hide

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--hide">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--hide"></use>
  </svg>
</div>

Raw

[object Promise]

history

Icon history

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--history">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--history"></use>
  </svg>
</div>

Raw

[object Promise]

home

Icon home

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--home">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--home"></use>
  </svg>
</div>

Raw

[object Promise]

image

Icon image

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--image">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--image"></use>
  </svg>
</div>

Raw

[object Promise]

inbox

Icon inbox

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--inbox">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--inbox"></use>
  </svg>
</div>

Raw

[object Promise]

info

Icon info

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--info">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--info"></use>
  </svg>
</div>

Raw

[object Promise]

italic

Icon italic

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--italic">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--italic"></use>
  </svg>
</div>

Raw

[object Promise]

layers

Icon layers

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--layers">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--layers"></use>
  </svg>
</div>

Raw

[object Promise]

layout

Icon layout

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--layout">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--layout"></use>
  </svg>
</div>

Raw

[object Promise]

legend

Icon legend

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--legend">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--legend"></use>
  </svg>
</div>

Raw

[object Promise]

link

Icon link

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--link">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--link"></use>
  </svg>
</div>

Raw

[object Promise]

list

Icon list

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--list">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--list"></use>
  </svg>
</div>

Raw

[object Promise]

Icon loading

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--loading">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--loading"></use>
  </svg>
</div>

Raw

[object Promise]

locate

Icon locate

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--locate">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--locate"></use>
  </svg>
</div>

Raw

[object Promise]

location

Icon location

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--location">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--location"></use>
  </svg>
</div>

Raw

[object Promise]

lock

Icon lock

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--lock">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--lock"></use>
  </svg>
</div>

Raw

[object Promise]

longParagraph

Icon longParagraph

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--longParagraph">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--longParagraph"></use>
  </svg>
</div>

Raw

[object Promise]

mail

Icon mail

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--mail">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--mail"></use>
  </svg>
</div>

Raw

[object Promise]

measure

Icon measure

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--measure">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--measure"></use>
  </svg>
</div>

Raw

[object Promise]

Icon menu

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--menu">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--menu"></use>
  </svg>
</div>

Raw

[object Promise]

messageAlert

Icon messageAlert

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--messageAlert">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--messageAlert"></use>
  </svg>
</div>

Raw

[object Promise]

minimize

Icon minimize

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--minimize">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--minimize"></use>
  </svg>
</div>

Raw

[object Promise]

minus

Icon minus

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--minus">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--minus"></use>
  </svg>
</div>

Raw

[object Promise]

mobile

Icon mobile

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--mobile">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--mobile"></use>
  </svg>
</div>

Raw

[object Promise]

Icon more

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--more">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--more"></use>
  </svg>
</div>

Raw

[object Promise]

move

Icon move

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--move">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--move"></use>
  </svg>
</div>

Raw

[object Promise]

Icon next

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--next">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--next"></use>
  </svg>
</div>

Raw

[object Promise]

objects

Icon objects

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--objects">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--objects"></use>
  </svg>
</div>

Raw

[object Promise]

pause

Icon pause

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--pause">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--pause"></use>
  </svg>
</div>

Raw

[object Promise]

Icon pc

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--pc">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--pc"></use>
  </svg>
</div>

Raw

[object Promise]

phone

Icon phone

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--phone">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--phone"></use>
  </svg>
</div>

Raw

[object Promise]

pieChart

Icon pieChart

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--pieChart">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--pieChart"></use>
  </svg>
</div>

Raw

[object Promise]

pinBookmark

Icon pinBookmark

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--pinBookmark">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--pinBookmark"></use>
  </svg>
</div>

Raw

[object Promise]

Icon pin

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--pin">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--pin"></use>
  </svg>
</div>

Raw

[object Promise]

play

Icon play

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--play">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--play"></use>
  </svg>
</div>

Raw

[object Promise]

Icon previous

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--previous">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--previous"></use>
  </svg>
</div>

Raw

[object Promise]

Icon print

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--print">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--print"></use>
  </svg>
</div>

Raw

[object Promise]

qrcode

Icon qrcode

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--qrcode">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--qrcode"></use>
  </svg>
</div>

Raw

[object Promise]

radio

Icon radio

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--radio">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--radio"></use>
  </svg>
</div>

Raw

[object Promise]

redo

Icon redo

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--redo">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--redo"></use>
  </svg>
</div>

Raw

[object Promise]

reload

Icon reload

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--reload">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--reload"></use>
  </svg>
</div>

Raw

[object Promise]

repeat

Icon repeat

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--repeat">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--repeat"></use>
  </svg>
</div>

Raw

[object Promise]

roles

Icon roles

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--roles">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--roles"></use>
  </svg>
</div>

Raw

[object Promise]

rotate

Icon rotate

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--rotate">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--rotate"></use>
  </svg>
</div>

Raw

[object Promise]

route

Icon route

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--route">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--route"></use>
  </svg>
</div>

Raw

[object Promise]

save

Icon save

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--save">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--save"></use>
  </svg>
</div>

Raw

[object Promise]

scanCode

Icon scanCode

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--scanCode">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--scanCode"></use>
  </svg>
</div>

Raw

[object Promise]

scanQrCode

Icon scanQrCode

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--scanQrCode">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--scanQrCode"></use>
  </svg>
</div>

Raw

[object Promise]

Icon search

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--search">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--search"></use>
  </svg>
</div>

Raw

[object Promise]

send

Icon send

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--send">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--send"></use>
  </svg>
</div>

Raw

[object Promise]

settings

Icon settings

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--settings">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--settings"></use>
  </svg>
</div>

Raw

[object Promise]

Icon share

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--share">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--share"></use>
  </svg>
</div>

Raw

[object Promise]

shield

Icon shield

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--shield">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--shield"></use>
  </svg>
</div>

Raw

[object Promise]

shortParagraph

Icon shortParagraph

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--shortParagraph">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--shortParagraph"></use>
  </svg>
</div>

Raw

[object Promise]

show

Icon show

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--show">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--show"></use>
  </svg>
</div>

Raw

[object Promise]

signIn

Icon signIn

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--signIn">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--signIn"></use>
  </svg>
</div>

Raw

[object Promise]

signOut

Icon signOut

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--signOut">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--signOut"></use>
  </svg>
</div>

Raw

[object Promise]

skills

Icon skills

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--skills">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--skills"></use>
  </svg>
</div>

Raw

[object Promise]

skipBack

Icon skipBack

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--skipBack">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--skipBack"></use>
  </svg>
</div>

Raw

[object Promise]

skipForward

Icon skipForward

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--skipForward">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--skipForward"></use>
  </svg>
</div>

Raw

[object Promise]

sortAlphaAsc

Icon sortAlphaAsc

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--sortAlphaAsc">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--sortAlphaAsc"></use>
  </svg>
</div>

Raw

[object Promise]

sortAlphaDesc

Icon sortAlphaDesc

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--sortAlphaDesc">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--sortAlphaDesc"></use>
  </svg>
</div>

Raw

[object Promise]

sortAsc

Icon sortAsc

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--sortAsc">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--sortAsc"></use>
  </svg>
</div>

Raw

[object Promise]

sortDesc

Icon sortDesc

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--sortDesc">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--sortDesc"></use>
  </svg>
</div>

Raw

[object Promise]

sortHorizontal

Icon sortHorizontal

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--sortHorizontal">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--sortHorizontal"></use>
  </svg>
</div>

Raw

[object Promise]

sortVertical

Icon sortVertical

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--sortVertical">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--sortVertical"></use>
  </svg>
</div>

Raw

[object Promise]

star

Icon star

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--star">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--star"></use>
  </svg>
</div>

Raw

[object Promise]

streetview

Icon streetview

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--streetview">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--streetview"></use>
  </svg>
</div>

Raw

[object Promise]

tablet

Icon tablet

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--tablet">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--tablet"></use>
  </svg>
</div>

Raw

[object Promise]

tasks

Icon tasks

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--tasks">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--tasks"></use>
  </svg>
</div>

Raw

[object Promise]

themeMap

Icon themeMap

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--themeMap">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--themeMap"></use>
  </svg>
</div>

Raw

[object Promise]

timeAlarm

Icon timeAlarm

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--timeAlarm">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--timeAlarm"></use>
  </svg>
</div>

Raw

[object Promise]

timeHistory

Icon timeHistory

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--timeHistory">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--timeHistory"></use>
  </svg>
</div>

Raw

[object Promise]

time

Icon time

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--time">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--time"></use>
  </svg>
</div>

Raw

[object Promise]

timeseries

Icon timeseries

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--timeseries">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--timeseries"></use>
  </svg>
</div>

Raw

[object Promise]

trash

Icon trash

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--trash">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--trash"></use>
  </svg>
</div>

Raw

[object Promise]

trendingDown

Icon trendingDown

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--trendingDown">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--trendingDown"></use>
  </svg>
</div>

Raw

[object Promise]

trendingUp

Icon trendingUp

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--trendingUp">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--trendingUp"></use>
  </svg>
</div>

Raw

[object Promise]

turbine

Icon turbine

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--turbine">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--turbine"></use>
  </svg>
</div>

Raw

[object Promise]

type

Icon type

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--type">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--type"></use>
  </svg>
</div>

Raw

[object Promise]

underline

Icon underline

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--underline">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--underline"></use>
  </svg>
</div>

Raw

[object Promise]

undo

Icon undo

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--undo">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--undo"></use>
  </svg>
</div>

Raw

[object Promise]

unlock

Icon unlock

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--unlock">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--unlock"></use>
  </svg>
</div>

Raw

[object Promise]

uploadCloud

Icon uploadCloud

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--uploadCloud">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--uploadCloud"></use>
  </svg>
</div>

Raw

[object Promise]

upload

Icon upload

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--upload">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--upload"></use>
  </svg>
</div>

Raw

[object Promise]

user

Icon user

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--user">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--user"></use>
  </svg>
</div>

Raw

[object Promise]

validation

Icon validation

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--validation">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--validation"></use>
  </svg>
</div>

Raw

[object Promise]

videoCamera

Icon videoCamera

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--videoCamera">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--videoCamera"></use>
  </svg>
</div>

Raw

[object Promise]

warning

Icon warning

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--warning">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--warning"></use>
  </svg>
</div>

Raw

[object Promise]

watch

Icon watch

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--watch">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--watch"></use>
  </svg>
</div>

Raw

[object Promise]

wifiOff

Icon wifiOff

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--wifiOff">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--wifiOff"></use>
  </svg>
</div>

Raw

[object Promise]

wifi

Icon wifi

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--wifi">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--wifi"></use>
  </svg>
</div>

Raw

[object Promise]

zoomIn

Icon zoomIn

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--zoomIn">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--zoomIn"></use>
  </svg>
</div>

Raw

[object Promise]

zoomOut

Icon zoomOut

Using sprite

<div class="svgIcon svgIcon--stroked svgIcon--zoomOut">
  <svg focusable="false" aria-hidden="true">
    <use xlink:href="#svg--zoomOut"></use>
  </svg>
</div>

Raw

[object Promise]

Using icons

Our icon system is based on SVG files. SVGs have a number of advantages:

They’re vector graphics that can be infinitely scaled.
SVG images can be inlined right in the document and thus styled with CSS or even manipulated with JavaScript.
It is possible to create single SVG sprite sheet and reuse shapes without duplication.

An SVG can be embedded inline in an HTML document using the <svg> tag:

<!-- somewhere in your markup -->
<!-- `focusable` attribute is set to false to prevent the SVG from receiving focus in IE -->
<div class="svgIcon">
  <svg
    aria-hidden="true"
    focusable="false"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  >
    <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2v10z"/>
  </svg>
</div>

The markup above can be simplified using .svgIcon--stroked class to avoid repetition of presentational SVG attributes between icons:

<div class="svgIcon svgIcon--stroked">
  <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
    <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2v10z"/>
  </svg>
</div>

You're probably going to be using multiple icons in your project; while SVG icons are generally lightweight, they can still contain quite a few lines of markup. Fortunately, you can minimize the bloat by using an SVG sprite.

What does an SVG sprite look like?

An SVG sprite is a single SVG file that contains data for multiple SVG graphics:

<!-- sprite.svg -->
<svg xmlns="http://www.w3.org/2000/svg">
  <!-- define "add" icon -->
  <symbol id="svg--add" viewBox="0 0 24 24">
    <!-- all the paths and shapes and whatnot for this icon -->
    <path d="M12 19V5m-7 7h14"/>
  </symbol>
  <!-- define "camera" icon -->
  <symbol id="svg--camera" viewBox="0 0 24 24">
    <path d="M23 8a2 2 0 00-2-2h-4l-2-3H9L7 6H3a2 2 0 00-2 2v11a2 2 0 002 2h18a2 2 0 002-2M1 8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2v11a2 2 0 01-2 2H3a2 2 0 01-2-2m11-2a4 4 0 10-4-4m4 4a4 4 0 114-4"/>
  </symbol>
  <!-- more icons… -->
</svg>

It is just an <svg> tag with a bunch of <symbol> tags. Each <symbol> tag has a unique ID and wraps all the paths and whatnot for each icon. See this article for further explanation.

Using an SVG sprite

SVG sprite that comes with all the available icons is distributed together with @volue/wave package. Once installed, the sprite file can be found at node_modules/@volue/wave/dist/core/sprite.svg. It is also included in @volue/design-icons package (see readme) along with other files containing icons data.

To place an icon code into your page, link to the SVG sprite by targeting the icon’s name in the href attribute of use element:

<div class="svgIcon svgIcon--stroked">
  <svg aria-hidden="true">
    <use xlink:href="path/to/file/sprite.svg#svg--pieChart"></use>
  </svg>
</div>

While externally referenced <use> is probably most convenient, it is not supported in IE11 and below. If you need to support these browsers, there are two major workaround choices:

Include the SVG sprite in all the HTML documents themselves.
Ajax for the sprite.

In the first choice, you need to include your sprite sheet file at the top of <body>. Wrap it in a container with .is-hidden class, so that it doesn't take up any space.

<!DOCTYPE html>
<html>
<head><title>My App</title></head>
<body>
  <!-- SVG sprite sheet up in the DOM, make sure that the SVG sprite file is included on every page/view you want the icons to appear -->
  <div id="svgSpritePlaceholder" class="is-hidden" aria-hidden="true">
    <svg width="0" height="0" xmlns="http://www.w3.org/2000/svg">
      <symbol id="svg--iconOne" viewBox="0 0 24 24">
        <path d="M6 4h8a4 4 0 110 8H6h9a4 4 0 110 8H6V4z"/>
        </symbol>
      <symbol id="svg--iconTwo" viewBox="0 0 24 24">
        <path d="M20 6L9 17l-5-5"/>
      </symbol>
      <!-- rest of the icons… -->
    </svg>
  </div>
  <h1>SVG is awesome.</h1>
  <!-- reuse the icons at any point -->
  <div class="svgIcon svgIcon--stroked">
    <svg aria-hidden="true" focusable="false"><use xlink:href="#svg--iconOne"></use></svg>
  </div>
</body>
</html>

With the second choice, you load your spritemap asynchronously over XHR and inject it onto container. This way the browser can cache the spritemap file.

Wave.utils.loadSvg('path/to/file/sprite.svg', function (err, svg) {
  document.getElementById('svgSpritePlaceholder').appendChild(svg);
});

If you are using Angular framework, you can inject your spritemap file using ng-include directive. Right after <body> tag place this:

<div id="svgSpritePlaceholder" class="is-hidden" aria-hidden="true">
  <ng-include src="'path/to/file/sprite.svg'"></ng-include>
</div>

Once the sprite sheet file is included/loaded you can access all of it's shapes as if they were inline via the <svg> and <use> elements.

Everytime you want to use an icon you simply write:

<div class="svgIcon svgIcon--stroked">
  <svg aria-hidden="true" focusable="false"><use xlink:href="#svg--iconName"></use></svg>
</div>

By default the icon will inherit the text color from the parent element, but you can use the text color helpers to override this behaviour or apply your own styles:

#svg--inlineStyled {
  stroke: seagreen;
}

Icon circles

You can add a circle around icons. Icon circles can be themed using fill helpers:

Icon circle

Icon circles with outlines can be themed using text color helpers:

Icon circle with outline

Accessibility

There are two ways an icon might be used:

Decorative: icon is just visual sugar – the words around it convey the meaning
Standalone: icon presented alone that needs to convey meaning all by itself

Majority of icons are intended to be used as decorative icon. When there is a text label accompanying the icon, the icon itself becomes irrelevant to screen readers and the common practice is to hide it using aria-hidden attribute:

Info

Standalone icons without text next to them need additional attributes such as aria-labelledBy pointing to icon's <title> to clarify their meaning. Alternatively you can use hidden assistive text next to the icon to describe it:

Rejected

Standalone icons used in interactive controls such as buttons don't need any additional attributes as long as you provide an accessible label on the control itself:

Sprite builder

If you need to build a custom SVG sprite sheet from individual SVG icons, here's a tool for that.

Select SVG icons…

Icon font Deprecated

The Icon font is used by adding an HTML <i> tag with class pf in combination with a pf- icon name added to it <i class="pf pf-info"></i>.

It is highly recommended to use SVG icons where possible instead of the icon font, because SVGs are more reliable and come with less issues.
For details, you should read https://cloudfour.com/thinks/seriously-dont-use-icon-fonts/.

Icon font is no longer extended with new icons - it exists for backwards-compatiblity purposes and eventually it will get removed from the library.

If you are running IIS 6 or higher on your web server, you need to add the following MIME type declaration in web.config in order to properly serve Icon Font:

<system.webServer>
  …
  <staticContent>
    <remove fileExtension=".woff" /> <!-- In case IIS already has this mime type -->
    <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
  </staticContent>
</system.webServer>

Sign out