Icon

Most of icons in use are from Modern UI Icons. They are set up in a 24x24 square with some underlaying guidelies to how they should be positioned in the content area.

To use the icons in html, the class icon together with icon-[icon-name] must be added to the html tag.

If you want to add a icon in css, it can be added with sass @extend. You'll need to extend both icon @extend .icon and the icon you want to use @extend .icon-[icon-name].

Below are all the available icons. When adding more icons, make sure it follows the guidelines, add it to the folder source/images/sprite and run gulp sprite. This task generates a .svg sprite with .png fallback.

sail
sail
puls
puls-white
journal
journal-white
lock-open
lock-open-white
chevron-right
chevron-right-orange
chevron-right-white
arrow-right
arrow-right-blue
arrow-right-white
check
check-blue
check-white
quote
quote-gray
quote-white
magnify
magnify-white
group-plus
group-plus-white
envelope
envelope-white
linkedin
linkedin-white
paper-text
paper-text-white
sharethis
sharethis-white
<div class="gallery--four">
    <div class="gallery__item">
        <div class="icon icon-sail-color">sail</div>
        <div class="icon icon-sail-gray">sail</div>
    </div>
    <div class="gallery__item">
        <div class="icon icon-puls">puls</div>
        <div class="icon icon-puls-white">puls-white</div>
    </div>
    <div class="gallery__item">
        <div class="icon icon-journal">journal</div>
        <div class="icon icon-journal-white">journal-white</div>
    </div>   
    <div class="gallery__item">
        <div class="icon icon-lock-open">lock-open</div>
        <div class="icon icon-lock-open-white">lock-open-white</div>
    </div>
    <div class="gallery__item">
        <div class="icon icon-chevron-right">chevron-right</div>
        <div class="icon icon-chevron-right-orange">chevron-right-orange</div>
        <div class="icon icon-chevron-right-white">chevron-right-white</div>
    </div>
    <div class="gallery__item">
        <div class="icon icon-arrow-right">arrow-right</div>
        <div class="icon icon-arrow-right-blue">arrow-right-blue</div>
        <div class="icon icon-arrow-right-white">arrow-right-white</div>
    </div>
    <div class="gallery__item">
        <div class="icon icon-check">check</div>
        <div class="icon icon-check-blue">check-blue</div>
        <div class="icon icon-check-white">check-white</div>
    </div>
    <div class="gallery__item">
        <div class="icon icon-quote">quote</div>
        <div class="icon icon-quote-gray">quote-gray</div>
        <div class="icon icon-quote-white">quote-white</div>
    </div>
    <div class="gallery__item">
        <div class="icon icon-magnify">magnify</div>
        <div class="icon icon-magnify-white">magnify-white</div>
    </div>
    <div class="gallery__item">
        <div class="icon icon-group-plus">group-plus</div>
        <div class="icon icon-group-plus-white">group-plus-white</div>
    </div>
    <div class="gallery__item">
        <div class="icon icon-envelope">envelope</div>
        <div class="icon icon-envelope-white">envelope-white</div>
    </div>
    <div class="gallery__item">
        <div class="icon icon-linkedin">linkedin</div>
        <div class="icon icon-linkedin-white">linkedin-white</div>
    </div>
    <div class="gallery__item">
        <div class="icon icon-paper-text">paper-text</div>
        <div class="icon icon-paper-text-white">paper-text-white</div>
    </div>
    <div class="gallery__item">
        <div class="icon icon-sharethis">sharethis</div>
        <div class="icon icon-sharethis-white">sharethis-white</div>
    </div>
</div>

Icon size

Sizes can be applied to any icon. In html, just include one of the classes together with icon.

If you want to apply it in css, the mixin @include icon-size([size]) can be used. Replace [size] with one of the class names.

Small size

Normal size

Large size

Xlarge size

<p class="icon icon-sail-color small">Small size</p>
<p class="icon icon-sail-color">Normal size</p>
<p class="icon icon-sail-color large">Large size</p>
<p class="icon icon-sail-color xlarge">Xlarge size</p>

Class name	Comment
`small`	Small icon
`large`	Large icon
`xlarge`	Extra large icon