Icon

<h3>Arrows</h3>
<div class="demo">
    <span class="icon icon-arrow-long-right icon--brand-primary"></span>
    <span class="icon icon-arrow-long-right icon--brand-secondary"></span>
    <span class="icon icon-arrow-long-right icon--brand-gray"></span>
    <span class="icon icon-arrow-long-right icon--brand-yellow"></span>

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

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

    <span class="icon icon-arrow-short-down icon--brand-primary"></span>
    <span class="icon icon-arrow-short-down icon--brand-secondary"></span>

    <br />
    <span class="icon icon-arrow-drawn-upright icon--brand-primary"></span>
    <span class="icon icon-arrow-drawn-downright icon--brand-primary"></span>
    <span class="icon icon-arrow-drawn-downright-2 icon--brand-primary"></span>
    <span class="icon icon-arrow-drawn-downleft icon--brand-primary"></span>
    <span class="icon icon-arrow-drawn-downleft-2 icon--brand-primary"></span>
    <br />

    <span class="icon icon-arrow-sync icon--brand-primary"></span>
    <span class="icon icon-arrow-sync icon--brand-secondary"></span>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    <span class="icon icon-arrow-short-down icon--brand-primary"></span>
    <span class="icon icon-arrow-short-down icon--brand-secondary"></span>

    <br />
    <span class="icon icon-arrow-drawn-upright icon--brand-primary"></span>
    <span class="icon icon-arrow-drawn-downright icon--brand-primary"></span>
    <span class="icon icon-arrow-drawn-downright-2 icon--brand-primary"></span>
    <span class="icon icon-arrow-drawn-downleft icon--brand-primary"></span>
    <span class="icon icon-arrow-drawn-downleft-2 icon--brand-primary"></span>
    <br />

    <span class="icon icon-arrow-sync icon--brand-primary"></span>
    <span class="icon icon-arrow-sync icon--brand-secondary"></span>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    <span class="icon icon-virtual icon--brand-primary"></span>
    <span class="icon icon-virtual icon--brand-secondary"></span>
</div>
<h3>Logos</h3>
<div class="demo">
    <span class="icon icon-apple-itunes icon--brand-primary"></span>
    <span class="icon icon-apple-itunes icon--brand-secondary"></span>
    <span class="icon icon-facebook icon--brand-primary"></span>
    <span class="icon icon-facebook icon--brand-secondary"></span>
    <span class="icon icon-github icon--brand-primary"></span>
    <span class="icon icon-github icon--brand-secondary"></span>
    <span class="icon icon-leanpub icon--brand-primary"></span>
    <span class="icon icon-leanpub icon--brand-secondary"></span>
    <span class="icon icon-linkedin icon--brand-primary"></span>
    <span class="icon icon-linkedin icon--brand-secondary"></span>
    <span class="icon icon-rss-1 icon--brand-primary"></span>
    <span class="icon icon-rss-1 icon--brand-secondary"></span>
    <span class="icon icon-rss icon--brand-primary"></span>
    <span class="icon icon-rss icon--brand-secondary"></span>
    <span class="icon icon-spotify icon--brand-primary"></span>
    <span class="icon icon-spotify icon--brand-secondary"></span>
    <span class="icon icon-twitter icon--brand-primary"></span>
    <span class="icon icon-twitter icon--brand-secondary"></span>
    <span class="icon icon-xing icon--brand-primary"></span>
    <span class="icon icon-xing icon--brand-secondary"></span>
    <span class="icon icon-youtube icon--brand-primary"></span>
    <span class="icon icon-youtube icon--brand-secondary"></span>
</div>
<div class="demo demo--inverted">
    <span class="icon icon-facebook icon--brand-white"></span>
    <span class="icon icon-github icon--brand-white"></span>
    <span class="icon icon-leanpub icon--brand-white"></span>
    <span class="icon icon-linkedin icon--brand-white"></span>
    <span class="icon icon-rss-1 icon--brand-white"></span>
    <span class="icon icon-twitter icon--brand-white"></span>
    <span class="icon icon-xing icon--brand-white"></span>
    <span class="icon icon-youtube icon--brand-white"></span>
</div>
/* No context defined. */
  • Content:
    .icon {
      display: inline-flex;
      width: $spacer-md;
      height: $spacer-md;
      align-self: center;
      background: $brand-gray;
      mask-repeat: no-repeat;
      mask-size: contain;
    }
    
    //Sizes
    .icon--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-short-down {
      mask-image: asset-url("icons/arrow-short-down.svg");
    }
    
    .icon-arrow-sync {
      mask-image: asset-url("icons/arrow-sync.svg");
    }
    
    .icon-arrow-drawn-upright {
      width: 9.375rem; // magic number
      height: 4rem; // magic number
      mask-image: asset-url("icons/arrow-drawn-upright.svg");
    }
    
    .icon-arrow-drawn-downright {
      width: 12.5rem; // magic number
      height: 7.125rem; // magic number
      mask-image: asset-url("icons/arrow-drawn-downright.svg");
    }
    
    .icon-arrow-drawn-downleft {
      width: 8.8125rem; // magic number
      height: 5.25rem; // magic number
      mask-image: asset-url("icons/arrow-drawn-downleft.svg");
    }
    
    .icon-arrow-drawn-downleft-2 {
      width: 9.375rem; // magic number
      height: 6.375rem; // magic number
      mask-image: asset-url("icons/arrow-drawn-downleft-alternative.svg");
    }
    
    .icon-arrow-drawn-downright-2 {
      width: 7.1875rem; // magic number
      height: 5.625rem; // magic number
      mask-image: asset-url("icons/arrow-drawn-downright-alternative.svg");
    }
    
    .icon-chevron-down {
      mask-image: asset-url("icons/chevron-down.svg");
    }
    
    .icon-chevron-up {
      mask-image: asset-url("icons/chevron-up.svg");
    }
    
    .icon-chevron-down-filled {
      mask-image: asset-url("icons/chevron-down-filled.svg");
    }
    
    // Interface Icons
    .icon-bookshelf {
      mask-image: asset-url("icons/bookshelf.svg");
    }
    
    .icon-certificate {
      mask-image: asset-url("icons/certificate.svg");
    }
    
    .icon-close {
      mask-image: asset-url("icons/close.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-info {
      mask-image: asset-url("icons/info-bubble.svg");
    }
    
    .icon-interactive {
      mask-image: asset-url("icons/interactive.svg");
    }
    
    .icon-learning {
      mask-image: asset-url("icons/learning.svg");
    }
    
    .icon-location {
      mask-image: asset-url("icons/pin.svg");
    }
    
    .icon-rooms {
      mask-image: asset-url("icons/rooms.svg");
    }
    
    .icon-search {
      mask-image: asset-url("icons/search.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/05-atoms/media/icon/_icon.scss
  • Size: 4.5 KB

No notes defined.