Iconography

Below is the current collection of icons used throughout our applications. Icons are to be displayed at one of four different sizes Icon Icon--size-x(1 - 4). Icons will adopt the current text color as the fill color. Colors are used to give meaning. Appropriate codes are documented below, you can also click the icon to download as an .SVG file.


Icon Set (.Icon--size-4) 64px

Account
(g200 + w100)

Messages
(g200 + w100)

Notification
(y300 + y500)

Facebook
(b300)

Twitter
(b300)

Powercycle
(b300)

Negative Alert
(r300)

Weight
(b300 + r300)

Traffic
(b300 + r300)

Cross
(r300)

Tick
(b300)

Stopwatch
(b300 + r300)

Restore
(b300 + r300)

Reload
(b300)

Globe
(b300 + r300)

Tick Alone
(t300 + t100)

Cart Arrow
(b300 + g200)

Dropdown Arrow
(g200 + b300)

<svg class="Icon Icon--size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M0 8h32L16 24z"/></svg>