Icon library
deprecated v3.0.0

This component is now deprecated and will be removed/refactored in v3.0.0

Introduction

The icons approach uses background SVGs, that are encoded into a single CSS file. The default size is 16x16 unless modified by custom styles or by set modifiers.

Examples

.icon--arrow-down-orange

.icon--arrow-up-boxed-grey

.icon--arrow-up-boxed-orange

.icon--arrow-up-orange

.icon--bin-darkgrey

.icon--blog-circle-white

.icon--cloud-download-blue

.icon--doc-grey

.icon--doc-orange

.icon--down-blue

.icon--down-grey

.icon--down-orange

.icon--down-white

.icon--edit-darkgrey

.icon--email-white

.icon--exclamation-white

.icon--facebook-circle-white

.icon--facebook-darkgrey

.icon--facebook-white

.icon--googleplus-darkgrey

.icon--googleplus-white

.icon--hamburger-blue

.icon--hamburger-grey

.icon--hamburger-white

.icon--help-circ-blue

.icon--help-circ-grey

.icon--info-circle-blue

.icon--instagram-darkgrey

.icon--instagram-white

.icon--left-black

.icon--left-blue

.icon--left-grey

.icon--left-white

.icon--linkedin-circle-white

.icon--linkedin-darkgrey

.icon--linkedin-white

.icon--lock-blue

.icon--lock-grey

.icon--play-white

.icon--prodigy-logo

.icon--profile-grey

.icon--profile-placeholder

.icon--right-black

.icon--right-blue

.icon--right-grey

.icon--right-white

.icon--search-black

.icon--search-white

.icon--signout-grey

.icon--sort-grey

.icon--sort-orange

.icon--star-boxed-grey

.icon--star-boxed-orange

.icon--tick-blue

.icon--tick-box-dark

.icon--tick-box-disabled

.icon--tick-green

.icon--twitter-circle-white

.icon--twitter-darkgrey

.icon--twitter-white

.icon--up-grey

.icon--x-darkblue

.icon--x-darkgreen

.icon--x-darkgrey

.icon--x-darkorange

.icon--x-darkred

.icon--x-grey

.icon--x-orange

.icon--x-white

.icon--youtube-darkgrey

.icon--youtube-white

<div class="row">
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--arrow-down-orange icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--arrow-down-orange</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--arrow-up-boxed-grey icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--arrow-up-boxed-grey</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--arrow-up-boxed-orange icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--arrow-up-boxed-orange</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--arrow-up-orange icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--arrow-up-orange</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--bin-darkgrey icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--bin-darkgrey</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--blog-circle-white icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--blog-circle-white</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--cloud-download-blue icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--cloud-download-blue</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--doc-grey icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--doc-grey</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--doc-orange icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--doc-orange</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--down-blue icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--down-blue</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--down-grey icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--down-grey</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--down-orange icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--down-orange</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--down-white icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--down-white</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--edit-darkgrey icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--edit-darkgrey</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--email-white icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--email-white</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--exclamation-white icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--exclamation-white</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--facebook-circle-white icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--facebook-circle-white</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--facebook-darkgrey icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--facebook-darkgrey</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--facebook-white icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--facebook-white</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--googleplus-darkgrey icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--googleplus-darkgrey</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--googleplus-white icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--googleplus-white</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--hamburger-blue icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--hamburger-blue</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--hamburger-grey icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--hamburger-grey</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--hamburger-white icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--hamburger-white</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--help-circ-blue icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--help-circ-blue</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--help-circ-grey icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--help-circ-grey</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--info-circle-blue icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--info-circle-blue</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--instagram-darkgrey icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--instagram-darkgrey</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--instagram-white icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--instagram-white</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--left-black icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--left-black</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--left-blue icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--left-blue</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--left-grey icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--left-grey</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--left-white icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--left-white</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--linkedin-circle-white icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--linkedin-circle-white</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--linkedin-darkgrey icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--linkedin-darkgrey</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--linkedin-white icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--linkedin-white</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--lock-blue icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--lock-blue</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--lock-grey icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--lock-grey</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--play-white icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--play-white</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--prodigy-logo icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--prodigy-logo</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--profile-grey icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--profile-grey</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--profile-placeholder icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--profile-placeholder</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--right-black icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--right-black</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--right-blue icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--right-blue</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--right-grey icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--right-grey</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--right-white icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--right-white</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--search-black icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--search-black</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--search-white icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--search-white</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--signout-grey icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--signout-grey</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--sort-grey icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--sort-grey</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--sort-orange icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--sort-orange</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--star-boxed-grey icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--star-boxed-grey</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--star-boxed-orange icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--star-boxed-orange</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--tick-blue icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--tick-blue</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--tick-box-dark icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--tick-box-dark</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--tick-box-disabled icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--tick-box-disabled</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--tick-green icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--tick-green</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--twitter-circle-white icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--twitter-circle-white</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--twitter-darkgrey icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--twitter-darkgrey</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--twitter-white icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--twitter-white</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--up-grey icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--up-grey</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--x-darkblue icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--x-darkblue</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--x-darkgreen icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--x-darkgreen</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--x-darkgrey icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--x-darkgrey</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--x-darkorange icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--x-darkorange</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--x-darkred icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--x-darkred</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--x-grey icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--x-grey</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--x-orange icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--x-orange</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--x-white icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--x-white</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--youtube-darkgrey icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--youtube-darkgrey</code></p>
        </div>
        <div class="col col--1/4-medium" style="text-align:center;">
          <div style="background: #f5f5f5; padding: 1rem 0;">
            <span class="icon--youtube-white icon"></span>
          </div>
          <p><code class="text-small no-wrap no-wrap--ellipsis">.icon--youtube-white</code></p>
        </div>
    </div>

Dependencies

  • src/styles/base/*.scss
  • src/styles/components/elements/_icon.scss
  • src/styles/images.scss

Usage

Class/JavaScript Hook Description Required?
.icon Placed on a tag you want to display as an icon. All icons are 16x16 unless otherwise specified by modifiers below or custom styles. Required.
.icon--[ICON-NAME] Placed on an .icon to show the specific icon in question. The [ICON-NAME] mimics the file name of the svg, minus the .svg file extension. Required.