Icons

SVG icons with a PNG fallback

Table of contents

  1. Arrows
  2. Calendar
  3. Download
  4. External link
  5. Menu
  6. Print
  7. Return
  8. RSS
  9. Search

Arrows


<div class="background--white">
    <span class="icon icon-arrow-up--dark-small"></span>
    <span class="icon icon-arrow-down--dark-small"></span>
    <span class="icon icon-arrow-right--dark"></span>
    <span class="icon icon-arrow-right--dark-small"></span>
    <span class="icon icon-arrow-left--dark"></span>
    <span class="icon icon-arrow-left--dark-small"></span>
</div>

<div class="background--ship-grey">
    <span class="icon icon-arrow-up--light-small"></span>
    <span class="icon icon-arrow-down--light-small"></span>
    <span class="icon icon-arrow-right--light"></span>
    <span class="icon icon-arrow-right--light-small"></span>
    <span class="icon icon-arrow-left--light"></span>
    <span class="icon icon-arrow-left--light-small"></span>
</div>

Calendar


<div class="background--white">
    <span class="icon icon-calendar--dark"></span>
    <span class="icon icon-calendar--dark-small"></span>
</div>
<div class="background--ship-grey">
    <span class="icon icon-calendar--light"></span>
    <span class="icon icon-calendar--light-small"></span>
</div>

Download


<div class="background--white">
    <span class="icon icon-download--dark"></span>
    <span class="icon icon-download--dark-small"></span>
</div>
<div class="background--ship-grey">
    <span class="icon icon-download--light"></span>
    <span class="icon icon-download--light-small"></span>
</div>

External link


<div class="background--white">
    <span class="icon icon-external--dark"></span>
    <span class="icon icon-external--dark-small"></span>
</div>
<div class="background--ship-grey">
    <span class="icon icon-external--light"></span>
    <span class="icon icon-external--light-small"></span>
</div>

Menu


<div class="background--white">
    <span class="icon icon-menu--dark"></span>
    <span class="icon icon-menu--dark-small"></span>
</div>
<div class="background--ship-grey">
    <span class="icon icon-menu--light"></span>
    <span class="icon icon-menu--light-small"></span>
</div>

Print


<div class="background--iron-light">
    <span class="icon icon-print--dark"></span>
    <span class="icon icon-print--dark-small"></span>
</div>
<div class="background--ship-grey">
    <span class="icon icon-print--light"></span>
    <span class="icon icon-print--light-small"></span>
</div>

Return


<div class="background--white">
    <span class="icon icon-return--dark"></span>
    <span class="icon icon-return--dark-small"></span>
</div>
<div class="background--ship-grey">
    <span class="icon icon-return--light"></span>
    <span class="icon icon-return--light-small"></span>
</div>

RSS


<div class="background--white">
    <span class="icon icon-rss--dark"></span>
    <span class="icon icon-rss--dark-small"></span>
</div>
<div class="background--ship-grey">
    <span class="icon icon-rss--light"></span>
    <span class="icon icon-rss--light-small"></span>
</div>

Search


<div class="background--white">
    <span class="icon icon-search--dark"></span>
    <span class="icon icon-search--dark-small"></span>
</div>
<div class="background--ship-grey">
    <span class="icon icon-search--light"></span>
    <span class="icon icon-search--light-small"></span>
</div>

Related