Icon 

<div>
    <h2>Icons from icon font</h2>
    <p>
        <i class="icon icon-info"></i> Check
        http://app.fontastic.me/#customize/AiqMQEnybHD8PBE9PTcC4V
    </p>
    <h2>SVG icon Overview</h2>
    <h3>Arrows</h3>
    <div class="demo">
        <span class="icon-svg icon-arrow-long-right icon--brand-primary"></span><span class="icon-svg icon-arrow-long-right icon--brand-secondary"></span><span class="icon-svg icon-arrow-long-right icon--brand-gray"></span><span class="icon-svg icon-arrow-long-right icon--brand-yellow"></span><span class="icon-svg icon-arrow-long-down icon--brand-primary"></span><span class="icon-svg icon-arrow-long-down icon--brand-secondary"></span><span class="icon-svg icon-arrow-long-down icon--brand-gray"></span><span class="icon-svg icon-arrow-medium-left icon--brand-primary"></span><span class="icon-svg icon-arrow-medium-left icon--brand-secondary"></span><br /><span class="icon-svg icon-arrow-sync icon--brand-primary"></span><span class="icon-svg icon-arrow-sync icon--brand-secondary"></span>
    </div>
    <div class="demo demo--inverted">
        <span class="icon-svg icon-arrow-long-right icon--brand-white"></span><span class="icon-svg icon-arrow-long-down icon--brand-white"></span>
    </div>
    <h3>Interface Icons</h3>
    <div class="demo">
        <span class="icon-svg icon-bookshelf icon--brand-primary"></span><span class="icon-svg icon-bookshelf icon--brand-secondary"></span><span class="icon-svg icon-certificate icon--brand-primary"></span><span class="icon-svg icon-certificate icon--brand-secondary"></span><span class="icon-svg icon-certificate icon--brand-primary"></span><span class="icon-svg icon-certificate icon--brand-secondary"></span><span class="icon-svg icon-email icon--brand-primary"></span><span class="icon-svg icon-email icon--brand-secondary"></span><span class="icon-svg icon-feedback icon--brand-primary"></span><span class="icon-svg icon-feedback icon--brand-secondary"></span><span class="icon-svg icon-flame icon--brand-primary"></span><span class="icon-svg icon-flame icon--brand-secondary"></span><span class="icon-svg icon-globe icon--brand-primary"></span><span class="icon-svg icon-globe icon--brand-secondary"></span><span class="icon-svg icon-group-idea icon--brand-primary"></span><span class="icon-svg icon-group-idea icon--brand-secondary"></span><span class="icon-svg icon-interactive icon--brand-primary"></span><span class="icon-svg icon-interactive icon--brand-secondary"></span><span class="icon-svg icon-learning icon--brand-primary"></span><span class="icon-svg icon-learning icon--brand-secondary"></span><span class="icon-svg icon-minus icon-svg--small icon--brand-primary"></span><span class="icon-svg icon-plus icon-svg--small icon--brand-primary"></span><span class="icon-svg icon-rooms icon--brand-primary"></span><span class="icon-svg icon-rooms icon--brand-secondary"></span><span class="icon-svg icon-support icon--brand-primary"></span><span class="icon-svg icon-support icon--brand-secondary"></span><span class="icon-svg icon-text icon--brand-primary"></span><span class="icon-svg icon-text icon--brand-secondary"></span><span class="icon-svg icon-trainer icon--brand-primary"></span><span class="icon-svg icon-trainer icon--brand-secondary"></span><span class="icon-svg icon-virtual icon--brand-primary"></span><span class="icon-svg icon-virtual icon--brand-secondary"></span>
    </div>
    <h3>Logos</h3>
    <div class="demo">
        <span class="icon-svg icon-apple-itunes icon--brand-primary"></span><span class="icon-svg icon-apple-itunes icon--brand-secondary"></span><span class="icon-svg icon-facebook icon--brand-primary"></span><span class="icon-svg icon-facebook icon--brand-secondary"></span><span class="icon-svg icon-github icon--brand-primary"></span><span class="icon-svg icon-github icon--brand-secondary"></span><span class="icon-svg icon-leanpub icon--brand-primary"></span><span class="icon-svg icon-leanpub icon--brand-secondary"></span><span class="icon-svg icon-linkedin icon--brand-primary"></span><span class="icon-svg icon-linkedin icon--brand-secondary"></span><span class="icon-svg icon-rss-1 icon--brand-primary"></span><span class="icon-svg icon-rss-1 icon--brand-secondary"></span><span class="icon-svg icon-rss icon--brand-primary"></span><span class="icon-svg icon-rss icon--brand-secondary"></span><span class="icon-svg icon-spotify icon--brand-primary"></span><span class="icon-svg icon-spotify icon--brand-secondary"></span><span class="icon-svg icon-twitter icon--brand-primary"></span><span class="icon-svg icon-twitter icon--brand-secondary"></span><span class="icon-svg icon-xing icon--brand-primary"></span><span class="icon-svg icon-xing icon--brand-secondary"></span><span class="icon-svg icon-youtube icon--brand-primary"></span><span class="icon-svg icon-youtube icon--brand-secondary"></span>
    </div>
    <div class="demo demo--inverted">
        <span class="icon-svg icon-facebook icon--brand-white"></span><span class="icon-svg icon-github icon--brand-white"></span><span class="icon-svg icon-leanpub icon--brand-white"></span><span class="icon-svg icon-linkedin icon--brand-white"></span><span class="icon-svg icon-rss-1 icon--brand-white"></span><span class="icon-svg icon-twitter icon--brand-white"></span><span class="icon-svg icon-xing icon--brand-white"></span><span class="icon-svg icon-youtube icon--brand-white"></span>
    </div>
</div>
 
<div>
    <h2>Icons from icon font</h2>
    <p><i class="icon icon-info"></i> Check http://app.fontastic.me/#customize/AiqMQEnybHD8PBE9PTcC4V</p>
    <h2>SVG icon Overview</h2>
    <h3>Arrows</h3>
    <div class="demo">
        <span class="icon-svg icon-arrow-long-right icon--brand-primary"></span>
        <span class="icon-svg icon-arrow-long-right icon--brand-secondary"></span>
        <span class="icon-svg icon-arrow-long-right icon--brand-gray"></span>
        <span class="icon-svg icon-arrow-long-right icon--brand-yellow"></span>

        <span class="icon-svg icon-arrow-long-down icon--brand-primary"></span>
        <span class="icon-svg icon-arrow-long-down icon--brand-secondary"></span>
        <span class="icon-svg icon-arrow-long-down icon--brand-gray"></span>


        <span class="icon-svg icon-arrow-medium-left icon--brand-primary"></span>
        <span class="icon-svg icon-arrow-medium-left icon--brand-secondary"></span>

        <br />

        <span class="icon-svg icon-arrow-sync icon--brand-primary"></span>
        <span class="icon-svg icon-arrow-sync icon--brand-secondary"></span>
    </div>
    <div class="demo demo--inverted">
        <span class="icon-svg icon-arrow-long-right icon--brand-white"></span>
        <span class="icon-svg icon-arrow-long-down icon--brand-white"></span>
    </div>
    <h3>Interface Icons</h3>
    <div class="demo">
        <span class="icon-svg icon-bookshelf icon--brand-primary"></span>
        <span class="icon-svg icon-bookshelf icon--brand-secondary"></span>

        <span class="icon-svg icon-certificate icon--brand-primary"></span>
        <span class="icon-svg icon-certificate icon--brand-secondary"></span>

        <span class="icon-svg icon-certificate icon--brand-primary"></span>
        <span class="icon-svg icon-certificate icon--brand-secondary"></span>

        <span class="icon-svg icon-email icon--brand-primary"></span>
        <span class="icon-svg icon-email icon--brand-secondary"></span>

        <span class="icon-svg icon-feedback icon--brand-primary"></span>
        <span class="icon-svg icon-feedback icon--brand-secondary"></span>

        <span class="icon-svg icon-flame icon--brand-primary"></span>
        <span class="icon-svg icon-flame icon--brand-secondary"></span>

        <span class="icon-svg icon-globe icon--brand-primary"></span>
        <span class="icon-svg icon-globe icon--brand-secondary"></span>

        <span class="icon-svg icon-group-idea icon--brand-primary"></span>
        <span class="icon-svg icon-group-idea icon--brand-secondary"></span>

        <span class="icon-svg icon-interactive icon--brand-primary"></span>
        <span class="icon-svg icon-interactive icon--brand-secondary"></span>

        <span class="icon-svg icon-learning icon--brand-primary"></span>
        <span class="icon-svg icon-learning icon--brand-secondary"></span>

        <span class="icon-svg icon-minus icon-svg--small icon--brand-primary"></span>
        <span class="icon-svg icon-plus icon-svg--small icon--brand-primary"></span>

        <span class="icon-svg icon-rooms icon--brand-primary"></span>
        <span class="icon-svg icon-rooms icon--brand-secondary"></span>

        <span class="icon-svg icon-support icon--brand-primary"></span>
        <span class="icon-svg icon-support icon--brand-secondary"></span>

        <span class="icon-svg icon-text icon--brand-primary"></span>
        <span class="icon-svg icon-text icon--brand-secondary"></span>

        <span class="icon-svg icon-trainer icon--brand-primary"></span>
        <span class="icon-svg icon-trainer icon--brand-secondary"></span>

        <span class="icon-svg icon-virtual icon--brand-primary"></span>
        <span class="icon-svg icon-virtual icon--brand-secondary"></span>
    </div>
    <h3>Logos</h3>
    <div class="demo">
        <span class="icon-svg icon-apple-itunes icon--brand-primary"></span>
        <span class="icon-svg icon-apple-itunes icon--brand-secondary"></span>
        <span class="icon-svg icon-facebook icon--brand-primary"></span>
        <span class="icon-svg icon-facebook icon--brand-secondary"></span>
        <span class="icon-svg icon-github icon--brand-primary"></span>
        <span class="icon-svg icon-github icon--brand-secondary"></span>
        <span class="icon-svg icon-leanpub icon--brand-primary"></span>
        <span class="icon-svg icon-leanpub icon--brand-secondary"></span>
        <span class="icon-svg icon-linkedin icon--brand-primary"></span>
        <span class="icon-svg icon-linkedin icon--brand-secondary"></span>
        <span class="icon-svg icon-rss-1 icon--brand-primary"></span>
        <span class="icon-svg icon-rss-1 icon--brand-secondary"></span>
        <span class="icon-svg icon-rss icon--brand-primary"></span>
        <span class="icon-svg icon-rss icon--brand-secondary"></span>
        <span class="icon-svg icon-spotify icon--brand-primary"></span>
        <span class="icon-svg icon-spotify icon--brand-secondary"></span>
        <span class="icon-svg icon-twitter icon--brand-primary"></span>
        <span class="icon-svg icon-twitter icon--brand-secondary"></span>
        <span class="icon-svg icon-xing icon--brand-primary"></span>
        <span class="icon-svg icon-xing icon--brand-secondary"></span>
        <span class="icon-svg icon-youtube icon--brand-primary"></span>
        <span class="icon-svg icon-youtube icon--brand-secondary"></span>
    </div>
    <div class="demo demo--inverted">
        <span class="icon-svg icon-facebook icon--brand-white"></span>
        <span class="icon-svg icon-github icon--brand-white"></span>
        <span class="icon-svg icon-leanpub icon--brand-white"></span>
        <span class="icon-svg icon-linkedin icon--brand-white"></span>
        <span class="icon-svg icon-rss-1 icon--brand-white"></span>
        <span class="icon-svg icon-twitter icon--brand-white"></span>
        <span class="icon-svg icon-xing icon--brand-white"></span>
        <span class="icon-svg icon-youtube icon--brand-white"></span>
    </div>

</div>
 
/* No context defined. */
  • Content: 
    // sass-lint:disable no-vendor-prefixes, pseudo-element, empty-line-between-blocks

// icon font
%icon,
.icon {
  position: relative;
  top: 2px;
  text-transform: none;
  line-height: 1;
  font-family: "icons";
  font-size: 0.8em;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  speak: none;
  -webkit-text-stroke-width: 1px;

  // Better Font Rendering
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-search {
  &:before {
    content: $icon-search;
  }
}

.icon-arrow-down {
  &:before {
    content: $icon-arrow-down;
  }
}

.icon-chevron-down {
  &:before {
    content: $icon-chevron-down;
  }
}

.icon-chevron-up {
  &:before {
    content: $icon-chevron-up;
  }
}

.icon-chevron-right {
  &:before {
    content: $icon-chevron-right;
  }
}

.icon-chevron-left {
  &:before {
    content: $icon-chevron-left;
  }
}
.icon-return {
  &:before {
    content: $icon-return;
  }
}

.icon-check {
  &:before {
    content: $icon-check;
  }
}

.icon-close {
  &:before {
    content: $icon-close;
  }
}

.icon-download {
  &:before {
    content: $icon-download;
  }
}

.icon-bubble-conversation-4 {
  &:before {
    content: $icon-bubble-conversation-4;
  }
}

.icon-info {
  &:before {
    content: $icon-info;
  }
}

.icon-phone {
  &:before {
    content: $icon-phone;
  }
}

.icon-location {
  &:before {
    content: $icon-location;
  }
}

.icon-chevron-2-down {
  &:before {
    content: $icon-chevron-2-down;
  }
}

.icon-chevron-2-left {
  &:before {
    content: $icon-chevron-2-left;
  }
}

.icon-chevron-2-right {
  &:before {
    content: $icon-chevron-2-right;
  }
}

.icon-chevron-2-up {
  &:before {
    content: $icon-chevron-2-up;
  }
}

.icon-location-filled {
  &:before {
    content: $icon-location-filled;
  }
}

// SVG icons
// TODO: Clean up svg icon classes after removing icon font
.icon-svg {
  display: inline-flex;
  align-self: center;
  background: $brand-gray;
  width: $spacer-md;
  height: $spacer-md;
  mask-size: contain;
  mask-repeat: no-repeat;
}

//Sizes
.icon-svg--small {
  width: $spacer-sm;
  height: $spacer-sm;
}

.icon--medium {
  width: $spacer-lg;
  height: $spacer-lg;
}

.icon--big {
  width: $spacer-xl;
  height: $spacer-xl;
}

// Colors
.icon--brand-primary {
  background: $brand-primary;
}

.icon--brand-secondary {
  background: $brand-secondary;
}

.icon--brand-white {
  background: $brand-white;
}

.icon--brand-gray {
  background: $brand-gray;
}

.icon--brand-yellow {
  background: $brand-yellow;
}

//Arrows
.icon-arrow-long-down {
  width: 0.75rem; // magic number
  height: 4.5rem; // magic number
  mask-image: asset-url("icons/arrow-long-down.svg");
  mask-repeat: no-repeat;
}

.icon-arrow-long-right {
  width: 4.5rem; // magic number
  height: 0.75rem; // magic number
  mask-image: asset-url("icons/arrow-long-right.svg");
}

.icon-arrow-medium-left {
  width: 2rem; // magic number
  height: 0.75rem; // magic number
  mask-image: asset-url("icons/arrow-medium-left.svg");
}

.icon-arrow-sync {
  mask-image: asset-url("icons/arrow-sync.svg");
}

// Interface Icons
.icon-bookshelf {
  mask-image: asset-url("icons/bookshelf.svg");
}

.icon-certificate {
  mask-image: asset-url("icons/certificate.svg");
}

.icon-email {
  mask-image: asset-url("icons/email.svg");
}

.icon-feedback {
  mask-image: asset-url("icons/feedback.svg");
}

.icon-flame {
  mask-image: asset-url("icons/flame.svg");
}

.icon-globe {
  mask-image: asset-url("icons/globe.svg");
}

.icon-group-idea {
  mask-image: asset-url("icons/group-idea.svg");
}

.icon-interactive {
  mask-image: asset-url("icons/interactive.svg");
}

.icon-learning {
  mask-image: asset-url("icons/learning.svg");
}

.icon-rooms {
  mask-image: asset-url("icons/rooms.svg");
}

.icon-support {
  mask-image: asset-url("icons/support.svg");
}

.icon-trainer {
  mask-image: asset-url("icons/trainer.svg");
}

.icon-virtual {
  mask-image: asset-url("icons/virtual.svg");
}

.icon-minus {
  width: 1rem; // magic number
  height: 0.5rem; // magic number
  mask-image: asset-url("icons/minus.svg");
}

.icon-plus {
  width: 1rem; // magic number
  height: 1rem; // magic number
  mask-image: asset-url("icons/plus.svg");
}

.icon-text {
  mask-image: asset-url("icons/text.svg");
}

// Logos
.icon-apple-itunes {
  mask-image: asset-url("icons/apple-itunes.svg");
}

.icon-facebook {
  mask-image: asset-url("icons/facebook.svg");
}

.icon-leanpub {
  mask-image: asset-url("icons/leanpub.svg");
}

.icon-github {
  mask-image: asset-url("icons/github.svg");
}

.icon-linkedin {
  mask-image: asset-url("icons/linkedin.svg");
}

.icon-rss {
  mask-image: asset-url("icons/rss-boxed.svg");
}

.icon-rss-1 {
  mask-image: asset-url("icons/rss.svg");
}

.icon-spotify {
  mask-image: asset-url("icons/spotify.svg");
}

.icon-twitter {
  mask-image: asset-url("icons/twitter.svg");
}

.icon-xing {
  mask-image: asset-url("icons/xing.svg");
}

.icon-youtube {
  mask-image: asset-url("icons/youtube.svg");
}
  • URL: /components/raw/icon/_icon.scss
  • Filesystem Path: components/01-atoms/media/icon/_icon.scss
  • Size: 5 KB

No notes defined.