Icon (SVG Sprites)
ready

Introduction

This approach allows you to embed an SVG icon into the page, and have full control over its size and colour.

Usage

  1. Add an SVG tag, with the icon-svg class on it
  2. Inside the SVG, add the use tag with the xlink:href attribute pointing to the SVG sprite
  3. Add the ID of the icon to the end of the href to the sprite, e.g., for the down chevron xlink:href='path/to/sprite.svg#chevron-down'

Setting sizes

Sizes are inherited from the parent element's CSS font-size property. If you want a 20px tall icon, set the parent element's font-size to 20px

Setting colours

Colours are inherited from the parent element's CSS color property. If you a blue icon, set the parent's color to blue.

Examples

All icons

sprite.svg#chevron-down

sprite.svg#chevron-left

sprite.svg#chevron-right

sprite.svg#chevron-up

sprite.svg#cloud-download

sprite.svg#doc

sprite.svg#facebook

sprite.svg#hamburger

sprite.svg#hide

sprite.svg#help-circle

sprite.svg#important-circle

sprite.svg#info-circle

sprite.svg#linkedin

sprite.svg#lock

sprite.svg#magnifying-glass

sprite.svg#ok-circle

sprite.svg#play-circle

sprite.svg#show

sprite.svg#signout

sprite.svg#sort

sprite.svg#tick

sprite.svg#times

sprite.svg#twitter

sprite.svg#user

<div class="row">
        <div class="col col--1/4-small text-center">
          <div class="bg--grey-xlight bg--space-y">
            <svg class="icon-svg">
              <use xlink:href="/v2.0/assets/images/icons/sprite.svg#chevron-down" />
            </svg>
          </div>
    
          <p><code class="text-small no-wrap no-wrap--ellipsis">sprite.svg#chevron-down</code></p>
        </div>
        <div class="col col--1/4-small text-center">
          <div class="bg--grey-xlight bg--space-y">
            <svg class="icon-svg">
              <use xlink:href="/v2.0/assets/images/icons/sprite.svg#chevron-left" />
            </svg>
          </div>
    
          <p><code class="text-small no-wrap no-wrap--ellipsis">sprite.svg#chevron-left</code></p>
        </div>
        <div class="col col--1/4-small text-center">
          <div class="bg--grey-xlight bg--space-y">
            <svg class="icon-svg">
              <use xlink:href="/v2.0/assets/images/icons/sprite.svg#chevron-right" />
            </svg>
          </div>
    
          <p><code class="text-small no-wrap no-wrap--ellipsis">sprite.svg#chevron-right</code></p>
        </div>
        <div class="col col--1/4-small text-center">
          <div class="bg--grey-xlight bg--space-y">
            <svg class="icon-svg">
              <use xlink:href="/v2.0/assets/images/icons/sprite.svg#chevron-up" />
            </svg>
          </div>
    
          <p><code class="text-small no-wrap no-wrap--ellipsis">sprite.svg#chevron-up</code></p>
        </div>
        <div class="col col--1/4-small text-center">
          <div class="bg--grey-xlight bg--space-y">
            <svg class="icon-svg">
              <use xlink:href="/v2.0/assets/images/icons/sprite.svg#cloud-download" />
            </svg>
          </div>
    
          <p><code class="text-small no-wrap no-wrap--ellipsis">sprite.svg#cloud-download</code></p>
        </div>
        <div class="col col--1/4-small text-center">
          <div class="bg--grey-xlight bg--space-y">
            <svg class="icon-svg">
              <use xlink:href="/v2.0/assets/images/icons/sprite.svg#doc" />
            </svg>
          </div>
    
          <p><code class="text-small no-wrap no-wrap--ellipsis">sprite.svg#doc</code></p>
        </div>
        <div class="col col--1/4-small text-center">
          <div class="bg--grey-xlight bg--space-y">
            <svg class="icon-svg">
              <use xlink:href="/v2.0/assets/images/icons/sprite.svg#facebook" />
            </svg>
          </div>
    
          <p><code class="text-small no-wrap no-wrap--ellipsis">sprite.svg#facebook</code></p>
        </div>
        <div class="col col--1/4-small text-center">
          <div class="bg--grey-xlight bg--space-y">
            <svg class="icon-svg">
              <use xlink:href="/v2.0/assets/images/icons/sprite.svg#hamburger" />
            </svg>
          </div>
    
          <p><code class="text-small no-wrap no-wrap--ellipsis">sprite.svg#hamburger</code></p>
        </div>
        <div class="col col--1/4-small text-center">
          <div class="bg--grey-xlight bg--space-y">
            <svg class="icon-svg">
              <use xlink:href="/v2.0/assets/images/icons/sprite.svg#hide" />
            </svg>
          </div>
    
          <p><code class="text-small no-wrap no-wrap--ellipsis">sprite.svg#hide</code></p>
        </div>
        <div class="col col--1/4-small text-center">
          <div class="bg--grey-xlight bg--space-y">
            <svg class="icon-svg">
              <use xlink:href="/v2.0/assets/images/icons/sprite.svg#help-circle" />
            </svg>
          </div>
    
          <p><code class="text-small no-wrap no-wrap--ellipsis">sprite.svg#help-circle</code></p>
        </div>
        <div class="col col--1/4-small text-center">
          <div class="bg--grey-xlight bg--space-y">
            <svg class="icon-svg">
              <use xlink:href="/v2.0/assets/images/icons/sprite.svg#important-circle" />
            </svg>
          </div>
    
          <p><code class="text-small no-wrap no-wrap--ellipsis">sprite.svg#important-circle</code></p>
        </div>
        <div class="col col--1/4-small text-center">
          <div class="bg--grey-xlight bg--space-y">
            <svg class="icon-svg">
              <use xlink:href="/v2.0/assets/images/icons/sprite.svg#info-circle" />
            </svg>
          </div>
    
          <p><code class="text-small no-wrap no-wrap--ellipsis">sprite.svg#info-circle</code></p>
        </div>
        <div class="col col--1/4-small text-center">
          <div class="bg--grey-xlight bg--space-y">
            <svg class="icon-svg">
              <use xlink:href="/v2.0/assets/images/icons/sprite.svg#linkedin" />
            </svg>
          </div>
    
          <p><code class="text-small no-wrap no-wrap--ellipsis">sprite.svg#linkedin</code></p>
        </div>
        <div class="col col--1/4-small text-center">
          <div class="bg--grey-xlight bg--space-y">
            <svg class="icon-svg">
              <use xlink:href="/v2.0/assets/images/icons/sprite.svg#lock" />
            </svg>
          </div>
    
          <p><code class="text-small no-wrap no-wrap--ellipsis">sprite.svg#lock</code></p>
        </div>
        <div class="col col--1/4-small text-center">
          <div class="bg--grey-xlight bg--space-y">
            <svg class="icon-svg">
              <use xlink:href="/v2.0/assets/images/icons/sprite.svg#magnifying-glass" />
            </svg>
          </div>
    
          <p><code class="text-small no-wrap no-wrap--ellipsis">sprite.svg#magnifying-glass</code></p>
        </div>
        <div class="col col--1/4-small text-center">
          <div class="bg--grey-xlight bg--space-y">
            <svg class="icon-svg">
              <use xlink:href="/v2.0/assets/images/icons/sprite.svg#ok-circle" />
            </svg>
          </div>
    
          <p><code class="text-small no-wrap no-wrap--ellipsis">sprite.svg#ok-circle</code></p>
        </div>
        <div class="col col--1/4-small text-center">
          <div class="bg--grey-xlight bg--space-y">
            <svg class="icon-svg">
              <use xlink:href="/v2.0/assets/images/icons/sprite.svg#play-circle" />
            </svg>
          </div>
    
          <p><code class="text-small no-wrap no-wrap--ellipsis">sprite.svg#play-circle</code></p>
        </div>
        <div class="col col--1/4-small text-center">
          <div class="bg--grey-xlight bg--space-y">
            <svg class="icon-svg">
              <use xlink:href="/v2.0/assets/images/icons/sprite.svg#show" />
            </svg>
          </div>
    
          <p><code class="text-small no-wrap no-wrap--ellipsis">sprite.svg#show</code></p>
        </div>
        <div class="col col--1/4-small text-center">
          <div class="bg--grey-xlight bg--space-y">
            <svg class="icon-svg">
              <use xlink:href="/v2.0/assets/images/icons/sprite.svg#signout" />
            </svg>
          </div>
    
          <p><code class="text-small no-wrap no-wrap--ellipsis">sprite.svg#signout</code></p>
        </div>
        <div class="col col--1/4-small text-center">
          <div class="bg--grey-xlight bg--space-y">
            <svg class="icon-svg">
              <use xlink:href="/v2.0/assets/images/icons/sprite.svg#sort" />
            </svg>
          </div>
    
          <p><code class="text-small no-wrap no-wrap--ellipsis">sprite.svg#sort</code></p>
        </div>
        <div class="col col--1/4-small text-center">
          <div class="bg--grey-xlight bg--space-y">
            <svg class="icon-svg">
              <use xlink:href="/v2.0/assets/images/icons/sprite.svg#tick" />
            </svg>
          </div>
    
          <p><code class="text-small no-wrap no-wrap--ellipsis">sprite.svg#tick</code></p>
        </div>
        <div class="col col--1/4-small text-center">
          <div class="bg--grey-xlight bg--space-y">
            <svg class="icon-svg">
              <use xlink:href="/v2.0/assets/images/icons/sprite.svg#times" />
            </svg>
          </div>
    
          <p><code class="text-small no-wrap no-wrap--ellipsis">sprite.svg#times</code></p>
        </div>
        <div class="col col--1/4-small text-center">
          <div class="bg--grey-xlight bg--space-y">
            <svg class="icon-svg">
              <use xlink:href="/v2.0/assets/images/icons/sprite.svg#twitter" />
            </svg>
          </div>
    
          <p><code class="text-small no-wrap no-wrap--ellipsis">sprite.svg#twitter</code></p>
        </div>
        <div class="col col--1/4-small text-center">
          <div class="bg--grey-xlight bg--space-y">
            <svg class="icon-svg">
              <use xlink:href="/v2.0/assets/images/icons/sprite.svg#user" />
            </svg>
          </div>
    
          <p><code class="text-small no-wrap no-wrap--ellipsis">sprite.svg#user</code></p>
        </div>
    </div>

Dependencies

  • src/styles/components/blocks/_icon-svg.scss

Usage

Class/JavaScript Hook Description Required?
.icon-svg Placed on the svg you want to display as an icon. Icons inherit the font size and colour of its parent container. Required.