FTSE Russell Styleguide

Icons 

<div class='grid grid__icons'>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-apple"></use>
            </svg>
        <div>
            <h6>ico-apple</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-back-forth"></use>
            </svg>
        <div>
            <h6>ico-back-forth</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-back"></use>
            </svg>
        <div>
            <h6>ico-back</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-box"></use>
            </svg>
        <div>
            <h6>ico-box</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-bubbles"></use>
            </svg>
        <div>
            <h6>ico-bubbles</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-buildings"></use>
            </svg>
        <div>
            <h6>ico-buildings</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-calculator"></use>
            </svg>
        <div>
            <h6>ico-calculator</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-calendar"></use>
            </svg>
        <div>
            <h6>ico-calendar</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-calendar_add"></use>
            </svg>
        <div>
            <h6>ico-calendar_add</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-caret"></use>
            </svg>
        <div>
            <h6>ico-caret</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-cells"></use>
            </svg>
        <div>
            <h6>ico-cells</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-chartbar"></use>
            </svg>
        <div>
            <h6>ico-chartbar</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-chat"></use>
            </svg>
        <div>
            <h6>ico-chat</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-check"></use>
            </svg>
        <div>
            <h6>ico-check</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use>
            </svg>
        <div>
            <h6>ico-chevron-down</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-chevron-up"></use>
            </svg>
        <div>
            <h6>ico-chevron-up</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-clock"></use>
            </svg>
        <div>
            <h6>ico-clock</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-close"></use>
            </svg>
        <div>
            <h6>ico-close</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-cloud"></use>
            </svg>
        <div>
            <h6>ico-cloud</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-connected"></use>
            </svg>
        <div>
            <h6>ico-connected</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-connections"></use>
            </svg>
        <div>
            <h6>ico-connections</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-copy"></use>
            </svg>
        <div>
            <h6>ico-copy</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-correct"></use>
            </svg>
        <div>
            <h6>ico-correct</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-cycle"></use>
            </svg>
        <div>
            <h6>ico-cycle</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-dashboard"></use>
            </svg>
        <div>
            <h6>ico-dashboard</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-data"></use>
            </svg>
        <div>
            <h6>ico-data</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-database"></use>
            </svg>
        <div>
            <h6>ico-database</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-detail"></use>
            </svg>
        <div>
            <h6>ico-detail</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-doughnut"></use>
            </svg>
        <div>
            <h6>ico-doughnut</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-download"></use>
            </svg>
        <div>
            <h6>ico-download</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-edit"></use>
            </svg>
        <div>
            <h6>ico-edit</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-email"></use>
            </svg>
        <div>
            <h6>ico-email</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-energy"></use>
            </svg>
        <div>
            <h6>ico-energy</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-exit"></use>
            </svg>
        <div>
            <h6>ico-exit</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-external"></use>
            </svg>
        <div>
            <h6>ico-external</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-facebook"></use>
            </svg>
        <div>
            <h6>ico-facebook</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-flame"></use>
            </svg>
        <div>
            <h6>ico-flame</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-function"></use>
            </svg>
        <div>
            <h6>ico-function</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-gear"></use>
            </svg>
        <div>
            <h6>ico-gear</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-global-equity"></use>
            </svg>
        <div>
            <h6>ico-global-equity</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-global"></use>
            </svg>
        <div>
            <h6>ico-global</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-globe-pin"></use>
            </svg>
        <div>
            <h6>ico-globe-pin</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-google"></use>
            </svg>
        <div>
            <h6>ico-google</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-grid"></use>
            </svg>
        <div>
            <h6>ico-grid</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-growing"></use>
            </svg>
        <div>
            <h6>ico-growing</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-growth"></use>
            </svg>
        <div>
            <h6>ico-growth</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-idea"></use>
            </svg>
        <div>
            <h6>ico-idea</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-industrial"></use>
            </svg>
        <div>
            <h6>ico-industrial</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-infinite-loop"></use>
            </svg>
        <div>
            <h6>ico-infinite-loop</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-intensity"></use>
            </svg>
        <div>
            <h6>ico-intensity</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-interactions"></use>
            </svg>
        <div>
            <h6>ico-interactions</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-left-alignment"></use>
            </svg>
        <div>
            <h6>ico-left-alignment</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-linechart"></use>
            </svg>
        <div>
            <h6>ico-linechart</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-linked"></use>
            </svg>
        <div>
            <h6>ico-linked</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-linkedin"></use>
            </svg>
        <div>
            <h6>ico-linkedin</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-linkedin-circle"></use>
            </svg>
        <div>
            <h6>ico-linkedin-circle</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-list"></use>
            </svg>
        <div>
            <h6>ico-list</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-location-pin"></use>
            </svg>
        <div>
            <h6>ico-location-pin</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-location"></use>
            </svg>
        <div>
            <h6>ico-location</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-lock"></use>
            </svg>
        <div>
            <h6>ico-lock</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-loop"></use>
            </svg>
        <div>
            <h6>ico-loop</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-mindset"></use>
            </svg>
        <div>
            <h6>ico-mindset</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-molecules"></use>
            </svg>
        <div>
            <h6>ico-molecules</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-moveup"></use>
            </svg>
        <div>
            <h6>ico-moveup</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-moving-forward"></use>
            </svg>
        <div>
            <h6>ico-moving-forward</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-opposite"></use>
            </svg>
        <div>
            <h6>ico-opposite</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-order"></use>
            </svg>
        <div>
            <h6>ico-order</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-organism"></use>
            </svg>
        <div>
            <h6>ico-organism</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-phone"></use>
            </svg>
        <div>
            <h6>ico-phone</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-package"></use>
            </svg>
        <div>
            <h6>ico-package</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-pie"></use>
            </svg>
        <div>
            <h6>ico-pie</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-pinterest"></use>
            </svg>
        <div>
            <h6>ico-pinterest</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-plane"></use>
            </svg>
        <div>
            <h6>ico-plane</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-plusone"></use>
            </svg>
        <div>
            <h6>ico-plusone</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-polarchart"></use>
            </svg>
        <div>
            <h6>ico-polarchart</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-presentation"></use>
            </svg>
        <div>
            <h6>ico-presentation</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-press"></use>
            </svg>
        <div>
            <h6>ico-press</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-recycle"></use>
            </svg>
        <div>
            <h6>ico-recycle</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-refresh"></use>
            </svg>
        <div>
            <h6>ico-refresh</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-replace"></use>
            </svg>
        <div>
            <h6>ico-replace</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-repo"></use>
            </svg>
        <div>
            <h6>ico-repo</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-results"></use>
            </svg>
        <div>
            <h6>ico-results</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-right-arrow"></use>
            </svg>
        <div>
            <h6>ico-right-arrow</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-rocket"></use>
            </svg>
        <div>
            <h6>ico-rocket</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-search"></use>
            </svg>
        <div>
            <h6>ico-search</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-share"></use>
            </svg>
        <div>
            <h6>ico-share</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-share-stroke"></use>
            </svg>
        <div>
            <h6>ico-share-stroke</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-star"></use>
            </svg>
        <div>
            <h6>ico-star</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-statistics"></use>
            </svg>
        <div>
            <h6>ico-statistics</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-strategy"></use>
            </svg>
        <div>
            <h6>ico-strategy</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-sustainability"></use>
            </svg>
        <div>
            <h6>ico-sustainability</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-tag"></use>
            </svg>
        <div>
            <h6>ico-tag</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-temple"></use>
            </svg>
        <div>
            <h6>ico-temple</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-timeleft"></use>
            </svg>
        <div>
            <h6>ico-timeleft</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-todolist"></use>
            </svg>
        <div>
            <h6>ico-todolist</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-tools"></use>
            </svg>
        <div>
            <h6>ico-tools</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-tree"></use>
            </svg>
        <div>
            <h6>ico-tree</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-trending"></use>
            </svg>
        <div>
            <h6>ico-trending</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-twitter"></use>
            </svg>
        <div>
            <h6>ico-twitter</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-twitter-circle"></use>
            </svg>
        <div>
            <h6>ico-twitter-circle</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-uk"></use>
            </svg>
        <div>
            <h6>ico-uk</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-unverified"></use>
            </svg>
        <div>
            <h6>ico-unverified</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-user"></use>
            </svg>
        <div>
            <h6>ico-user</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-warning"></use>
            </svg>
        <div>
            <h6>ico-warning</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-watch"></use>
            </svg>
        <div>
            <h6>ico-watch</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-water"></use>
            </svg>
        <div>
            <h6>ico-water</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-windmill"></use>
            </svg>
        <div>
            <h6>ico-windmill</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-windows"></use>
            </svg>
        <div>
            <h6>ico-windows</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-yahoo"></use>
            </svg>
        <div>
            <h6>ico-yahoo</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-youtube"></use>
            </svg>
        <div>
            <h6>ico-youtube</h6>
        </div>
    </div>

    <div class='col col-3 col-middle'>
        <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-zoom"></use>
            </svg>
        <div>
            <h6>ico-zoom</h6>
        </div>
    </div>

</div>
 
<div class='grid grid__icons'>
    {% for icon in icons %}
    <div class='col col-3 col-middle'>
            <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#{{icon.name}}"></use>
            </svg>
        <div>
            <h6>{{ icon.name }}</h6>
        </div>
    </div>
      {% endfor %}
</div>
 
{
  "status": "wip",
  "icons": [
    {
      "name": "ico-apple"
    },
    {
      "name": "ico-back-forth"
    },
    {
      "name": "ico-back"
    },
    {
      "name": "ico-box"
    },
    {
      "name": "ico-bubbles"
    },
    {
      "name": "ico-buildings"
    },
    {
      "name": "ico-calculator"
    },
    {
      "name": "ico-calendar"
    },
    {
      "name": "ico-calendar_add"
    },
    {
      "name": "ico-caret"
    },
    {
      "name": "ico-cells"
    },
    {
      "name": "ico-chartbar"
    },
    {
      "name": "ico-chat"
    },
    {
      "name": "ico-check"
    },
    {
      "name": "ico-chevron-down"
    },
    {
      "name": "ico-chevron-up"
    },
    {
      "name": "ico-clock"
    },
    {
      "name": "ico-close"
    },
    {
      "name": "ico-cloud"
    },
    {
      "name": "ico-connected"
    },
    {
      "name": "ico-connections"
    },
    {
      "name": "ico-copy"
    },
    {
      "name": "ico-correct"
    },
    {
      "name": "ico-cycle"
    },
    {
      "name": "ico-dashboard"
    },
    {
      "name": "ico-data"
    },
    {
      "name": "ico-database"
    },
    {
      "name": "ico-detail"
    },
    {
      "name": "ico-doughnut"
    },
    {
      "name": "ico-download"
    },
    {
      "name": "ico-edit"
    },
    {
      "name": "ico-email"
    },
    {
      "name": "ico-energy"
    },
    {
      "name": "ico-exit"
    },
    {
      "name": "ico-external"
    },
    {
      "name": "ico-facebook"
    },
    {
      "name": "ico-flame"
    },
    {
      "name": "ico-function"
    },
    {
      "name": "ico-gear"
    },
    {
      "name": "ico-global-equity"
    },
    {
      "name": "ico-global"
    },
    {
      "name": "ico-globe-pin"
    },
    {
      "name": "ico-google"
    },
    {
      "name": "ico-grid"
    },
    {
      "name": "ico-growing"
    },
    {
      "name": "ico-growth"
    },
    {
      "name": "ico-idea"
    },
    {
      "name": "ico-industrial"
    },
    {
      "name": "ico-infinite-loop"
    },
    {
      "name": "ico-intensity"
    },
    {
      "name": "ico-interactions"
    },
    {
      "name": "ico-left-alignment"
    },
    {
      "name": "ico-linechart"
    },
    {
      "name": "ico-linked"
    },
    {
      "name": "ico-linkedin"
    },
    {
      "name": "ico-linkedin-circle"
    },
    {
      "name": "ico-list"
    },
    {
      "name": "ico-location-pin"
    },
    {
      "name": "ico-location"
    },
    {
      "name": "ico-lock"
    },
    {
      "name": "ico-loop"
    },
    {
      "name": "ico-mindset"
    },
    {
      "name": "ico-molecules"
    },
    {
      "name": "ico-moveup"
    },
    {
      "name": "ico-moving-forward"
    },
    {
      "name": "ico-opposite"
    },
    {
      "name": "ico-order"
    },
    {
      "name": "ico-organism"
    },
    {
      "name": "ico-phone"
    },
    {
      "name": "ico-package"
    },
    {
      "name": "ico-pie"
    },
    {
      "name": "ico-pinterest"
    },
    {
      "name": "ico-plane"
    },
    {
      "name": "ico-plusone"
    },
    {
      "name": "ico-polarchart"
    },
    {
      "name": "ico-presentation"
    },
    {
      "name": "ico-press"
    },
    {
      "name": "ico-recycle"
    },
    {
      "name": "ico-refresh"
    },
    {
      "name": "ico-replace"
    },
    {
      "name": "ico-repo"
    },
    {
      "name": "ico-results"
    },
    {
      "name": "ico-right-arrow"
    },
    {
      "name": "ico-rocket"
    },
    {
      "name": "ico-search"
    },
    {
      "name": "ico-share"
    },
    {
      "name": "ico-share-stroke"
    },
    {
      "name": "ico-star"
    },
    {
      "name": "ico-statistics"
    },
    {
      "name": "ico-strategy"
    },
    {
      "name": "ico-sustainability"
    },
    {
      "name": "ico-tag"
    },
    {
      "name": "ico-temple"
    },
    {
      "name": "ico-timeleft"
    },
    {
      "name": "ico-todolist"
    },
    {
      "name": "ico-tools"
    },
    {
      "name": "ico-tree"
    },
    {
      "name": "ico-trending"
    },
    {
      "name": "ico-twitter"
    },
    {
      "name": "ico-twitter-circle"
    },
    {
      "name": "ico-uk"
    },
    {
      "name": "ico-unverified"
    },
    {
      "name": "ico-user"
    },
    {
      "name": "ico-warning"
    },
    {
      "name": "ico-watch"
    },
    {
      "name": "ico-water"
    },
    {
      "name": "ico-windmill"
    },
    {
      "name": "ico-windows"
    },
    {
      "name": "ico-yahoo"
    },
    {
      "name": "ico-youtube"
    },
    {
      "name": "ico-zoom"
    }
  ]
}
  • Content: 
    .grid__icons {
  grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
  
  
  .col {
    align-items: center;
    padding: 20px;
  }

  .icon {
    fill: $primary;
    height: 65px;
    width: 65px;
  }


  h6 {
    margin-top: $space-lg;
  }

}

.icon {
  &--small {
    width: 28px;
    height: 28px;
  }
}
  • URL: /components/raw/icons/_icons.scss
  • Filesystem Path: src/components/atoms/icons/_icons.scss
  • Size: 317 Bytes

Using SVG sprite from static assets (recommended)

Use the SVG sprite by serving it as a static asset. Then reference the SVG icon you want to display using a path to the SVG sprite file. To use SVG sprite files, they must be distributed through a web server and while using svgxuse.

<!-- From static assets  -->
<svg>
  <use xlink:href="/assets/sprites/sprite.symbol.svg#ico-chevron-down"></use>
</svg>

CSS

You can override size and color with CSS.

<svg class="icon">
  <use xlink:href="/assets/sprites/sprite.symbol.svg#ico-chevron-down"></use>
</svg>
.icon {
  width: 24px;
  height: 24px;
  fill: red;
}