Share icons

Small icons black

Linkedin icon
Google+ icon
Twitter icon
Facebook icon
Share icon

Large icons black

Linkedin icon
Google+ icon
Twitter icon
Facebook icon
Share icon

Small icons white

Linkedin icon
Google+ icon
Twitter icon
Facebook icon
Share icon

Large icons white

Linkedin icon
Google+ icon
Twitter icon
Facebook icon
Share icon

<div class="wrapper">
    <div class="col-wrap">
        <div class="col col--fluid-8">
            <p>Small icons black</p>
            <div><span class="icon icon-linkedin--black-small"></span> Linkedin icon</div>
            <div><span class="icon icon-google--black-small"></span> Google+ icon</div>
            <div><span class="icon icon-twitter--black-small"></span> Twitter icon</div>
            <div><span class="icon icon-facebook--black-small"></span> Facebook icon</div>
            <div><span class="icon icon-share--black-small"></span> Share icon</div>
            <p>Large icons black</p>
            <div><span class="icon icon-linkedin--black"></span> Linkedin icon</div>
            <div><span class="icon icon-google--black"></span> Google+ icon</div>
            <div><span class="icon icon-twitter--black"></span> Twitter icon</div>
            <div><span class="icon icon-facebook--black"></span> Facebook icon</div>
            <div><span class="icon icon-share--black"></span> Share icon</div>
        </div>
        <div class="col col--fluid-7" style="background-color:#53565A; color:#FFFFFF;">
            <p>Small icons white</p>
            <div><span class="icon icon-linkedin--white-small"></span> Linkedin icon</div>
            <div><span class="icon icon-google--white-small"></span> Google+ icon</div>
            <div><span class="icon icon-twitter--white-small"></span> Twitter icon</div>
            <div><span class="icon icon-facebook--white-small"></span> Facebook icon</div>
            <div><span class="icon icon-share--white-small"></span> Share icon</div>
            <p>Large icons white</p>
            <div><span class="icon icon-linkedin--white"></span> Linkedin icon</div>
            <div><span class="icon icon-google--white"></span> Google+ icon</div>
            <div><span class="icon icon-twitter--white"></span> Twitter icon</div>
            <div><span class="icon icon-facebook--white"></span> Facebook icon</div>
            <div><span class="icon icon-share--white"></span> Share icon</div>
        </div>
    </div>
</div>

Download icons

Small icons

Pdf file
Word file
Excel file
Csv file
Json file
Generic file

Large icons

Pdf file
Word file
Excel file
Csv file
Json file
Generic file

<p>Small icons</p>
<div><span class="icon icon-pdf--small"></span> Pdf file</div>
<div><span class="icon icon-doc--small"></span> Word file</div>
<div><span class="icon icon-xls--small"></span> Excel file</div>
<div><span class="icon icon-csv--small"></span> Csv file</div>
<div><span class="icon icon-json--small"></span> Json file</div>
<div><span class="icon icon-file--small"></span> Generic file</div>
<p>Large icons</p>
<div><span class="icon icon-pdf--large"></span> Pdf file</div>
<div><span class="icon icon-doc--large"></span> Word file</div>
<div><span class="icon icon-xls--large"></span> Excel file</div>
<div><span class="icon icon-csv--large"></span> Csv file</div>
<div><span class="icon icon-json--large"></span> Json file</div>
<div><span class="icon icon-file--large"></span> Generic file</div>

Other icons

Small icons black

Home
External

Large icons

Home
External

Small icons link colour

External

Large icons link colour

External

Small icons white

Home
External

Large icons

Home
External

<div class="wrapper">
    <div class="col-wrap">
        <div class="col col--fluid-5">
            <p>Small icons black</p>
            <div><span class="icon icon-home--black-small"></span> Home</div>
            <div><span class="icon icon-external--black-small"></span> External</div>
            <p>Large icons</p>
            <div><span class="icon icon-home--black"></span> Home</div>
            <div><span class="icon icon-external--black"></span> External</div>
        </div>
        <div class="col col--fluid-5">
            <p>Small icons link colour</p>
            <div><span class="icon icon-external-small"></span> External</div>
            <p>Large icons link colour</p>
            <div><span class="icon icon-external"></span> External</div>
        </div>
        <div class="col col--fluid-5" style="background-color:#53565A; color:#FFFFFF;">
            <p>Small icons white</p>
            <div><span class="icon icon-home--white-small"></span> Home</div>
            <div><span class="icon icon-external--white-small"></span> External</div>
            <p>Large icons</p>
            <div><span class="icon icon-home--white"></span> Home</div>
            <div><span class="icon icon-external--white"></span> External</div>
        </div>
    </div>
</div>