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-color
sail-gray
puls
puls-white
puls-red
puls-blue
journal
journal-white
lock-open
lock-open-white
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
cross
cross-white
cross-red
group-plus
group-plus-white
group-plus-orange
group-plus-red
envelope
envelope-white
linkedin
linkedin-white
paper-text
paper-text-white
sharethis
sharethis-white
timer
timer-white
cogs
cogs-white
door-lock-closed
door-lock-closed-white
door-lock-closed-blue
door-lock-closed-orange
eye
eye-white
checkbox
checkbox-white
link
link-white
question
question-white
lightbulb
lightbulb-white
thumbs
thumbs-white
people-checkbox
people-checkbox-white
move
move-white
potion
potion-white
loop
loop-white
monitor
monitor-white
paperclip
paperclip-white
clipboard
clipboard-white
clipboard-orange
monitor-play
monitor-play-white
group
group-white
chat
chat-white
key-old
key-old-white
heart
heart-white
bed
bed-white
location-round
location-round-white
calendar
calendar-white
tag
tag-white
flag-british
alarm-clock
alarm-clock-white
clock
clock-white
newspaper
newspaper-white
external-link
external-link-white
people-multiple
people-multiple-white
people-multiple-red
page-heart
page-heart-white
page-heart-gray
<div class="gallery--three">
<div class="grid__item">
<div class="icon icon-sail-color">sail-color</div>
<div class="icon icon-sail-gray">sail-gray</div>
</div>
<div class="grid__item">
<div class="icon icon-puls">puls</div>
<div class="icon icon-puls-white">puls-white</div>
<div class="icon icon-puls-red">puls-red</div>
<div class="icon icon-puls-blue">puls-blue</div>
</div>
<div class="grid__item">
<div class="icon icon-journal">journal</div>
<div class="icon icon-journal-white">journal-white</div>
</div>
<div class="grid__item">
<div class="icon icon-lock-open">lock-open</div>
<div class="icon icon-lock-open-white">lock-open-white</div>
<div class="icon icon-lock-open-blue">lock-open-white</div>
</div>
<div class="grid__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="grid__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="grid__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="grid__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="grid__item">
<div class="icon icon-magnify">magnify</div>
<div class="icon icon-magnify-white">magnify-white</div>
</div>
<div class="grid__item">
<div class="icon icon-cross">cross</div>
<div class="icon icon-cross-white">cross-white</div>
<div class="icon icon-cross-red">cross-red</div>
</div>
<div class="grid__item">
<div class="icon icon-group-plus">group-plus</div>
<div class="icon icon-group-plus-white">group-plus-white</div>
<div class="icon icon-group-plus-orange">group-plus-orange</div>
<div class="icon icon-group-plus-red">group-plus-red</div>
</div>
<div class="grid__item">
<div class="icon icon-envelope">envelope</div>
<div class="icon icon-envelope-white">envelope-white</div>
</div>
<div class="grid__item">
<div class="icon icon-linkedin">linkedin</div>
<div class="icon icon-linkedin-white">linkedin-white</div>
</div>
<div class="grid__item">
<div class="icon icon-paper-text">paper-text</div>
<div class="icon icon-paper-text-white">paper-text-white</div>
</div>
<div class="grid__item">
<div class="icon icon-sharethis">sharethis</div>
<div class="icon icon-sharethis-white">sharethis-white</div>
</div>
<div class="grid__item">
<div class="icon icon-social-facebook">social-facebook</div>
<div class="icon icon-social-facebook-white">social-facebook-white</div>
</div>
<div class="grid__item">
<div class="icon icon-social-twitter">social-twitter</div>
<div class="icon icon-social-twitter-white">social-twitter-white</div>
</div>
<div class="grid__item">
<div class="icon icon-social-twitter-retweet">social-twitter-retweet</div>
<div class="icon icon-social-twitter-retweet-white">social-twitter-retweet-white</div>
</div>
<div class="grid__item">
<div class="icon icon-social-linkedin">social-linkedin</div>
<div class="icon icon-social-linkedin-white">social-linkedin-white</div>
</div>
<div class="grid__item">
<div class="icon icon-social-googleplus">social-googleplus</div>
<div class="icon icon-social-googleplus-white">social-googleplus-white</div>
</div>
<div class="grid__item">
<div class="icon icon-social-youtube">social-youtube</div>
<div class="icon icon-social-youtube-white">social-youtube-white</div>
</div>
<div class="grid__item">
<div class="icon icon-social-instagram">social-instagram</div>
<div class="icon icon -social-instagram-white">social-instagram-white</div>
</div>
<div class="grid__item">
<div class="icon icon-timer">timer</div>
<div class="icon icon-timer-white">timer-white</div>
</div>
<div class="grid__item">
<div class="icon icon-cogs">cogs</div>
<div class="icon icon-cogs-white">cogs-white</div>
</div>
<div class="grid__item">
<div class="icon icon-door-lock-closed">door-lock-closed</div>
<div class="icon icon-door-lock-closed-white">door-lock-closed-white</div>
<div class="icon icon-door-lock-closed-blue">door-lock-closed-blue</div>
<div class="icon icon-door-lock-closed-orange">door-lock-closed-orange</div>
</div>
<div class="grid__item">
<div class="icon icon-eye">eye</div>
<div class="icon icon-eye-white">eye-white</div>
</div>
<div class="grid__item">
<div class="icon icon-checkbox">checkbox</div>
<div class="icon icon-checkbox-white">checkbox-white</div>
</div>
<div class="grid__item">
<div class="icon icon-link">link</div>
<div class="icon icon-link-white">link-white</div>
</div>
<div class="grid__item">
<div class="icon icon-question">question</div>
<div class="icon icon-question-white">question-white</div>
</div>
<div class="grid__item">
<div class="icon icon-lightbulb">lightbulb</div>
<div class="icon icon-lightbulb-white">lightbulb-white</div>
</div>
<div class="grid__item">
<div class="icon icon-thumbs">thumbs</div>
<div class="icon icon-thumbs-white">thumbs-white</div>
</div>
<div class="grid__item">
<div class="icon icon-people-checkbox">people-checkbox</div>
<div class="icon icon-people-checkbox-white">people-checkbox-white</div>
</div>
<div class="grid__item">
<div class="icon icon-move">move</div>
<div class="icon icon-move-white">move-white</div>
</div>
<div class="grid__item">
<div class="icon icon-potion">potion</div>
<div class="icon icon-potion-white">potion-white</div>
</div>
<div class="grid__item">
<div class="icon icon-loop">loop</div>
<div class="icon icon-loop-white">loop-white</div>
</div>
<div class="grid__item">
<div class="icon icon-monitor">monitor</div>
<div class="icon icon-monitor-white">monitor-white</div>
</div>
<div class="grid__item">
<div class="icon icon-paperclip">paperclip</div>
<div class="icon icon-paperclip-white">paperclip-white</div>
</div>
<div class="grid__item">
<div class="icon icon-clipboard">clipboard</div>
<div class="icon icon-clipboard-white">clipboard-white</div>
<div class="icon icon-clipboard-orange">clipboard-orange</div>
</div>
<div class="grid__item">
<div class="icon icon-monitor-play">monitor-play</div>
<div class="icon icon-monitor-play-white">monitor-play-white</div>
</div>
<div class="grid__item">
<div class="icon icon-group">group</div>
<div class="icon icon-group-white">group-white</div>
</div>
<div class="grid__item">
<div class="icon icon-chat">chat</div>
<div class="icon icon-chat-white">chat-white</div>
</div>
<div class="grid__item">
<div class="icon icon-key-old">key-old</div>
<div class="icon icon-key-old-white">key-old-white</div>
</div>
<div class="grid__item">
<div class="icon icon-heart">heart</div>
<div class="icon icon-heart-white">heart-white</div>
</div>
<div class="grid__item">
<div class="icon icon-bed">bed</div>
<div class="icon icon-bed-white">bed-white</div>
</div>
<div class="grid__item">
<div class="icon icon-location-round">location-round</div>
<div class="icon icon-location-round-white">location-round-white</div>
</div>
<div class="grid__item">
<div class="icon icon-calendar">calendar</div>
<div class="icon icon-calendar-white">calendar-white</div>
</div>
<div class="grid__item">
<div class="icon icon-tag">tag</div>
<div class="icon icon-tag-white">tag-white</div>
</div>
<div class="grid__item">
<div class="icon icon-flag-british">flag-british</div>
</div>
<div class="grid__item">
<div class="icon icon-alarm-clock">alarm-clock</div>
<div class="icon icon-alarm-clock-white">alarm-clock-white</div>
</div>
<div class="grid__item">
<div class="icon icon-clock">clock</div>
<div class="icon icon-clock-white">clock-white</div>
</div>
<div class="grid__item">
<div class="icon icon-newspaper">newspaper</div>
<div class="icon icon-newspaper-white">newspaper-white</div>
</div>
<div class="grid__item">
<div class="icon icon-external-link">external-link</div>
<div class="icon icon-external-link-white">external-link-white</div>
</div>
<div class="grid__item">
<div class="icon icon-people-multiple">people-multiple</div>
<div class="icon icon-people-multiple-white">people-multiple-white</div>
<div class="icon icon-people-multiple-red">people-multiple-red</div>
</div>
<div class="grid__item">
<div class="icon icon-page-heart">page-heart</div>
<div class="icon icon-page-heart-white">page-heart-white</div>
<div class="icon icon-page-heart-gray">page-heart-gray</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 |