Icon

WIP

HTML
View
Context
Assets
Info
Notes


        
        <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-bluesky icon--brand-primary"></span>
    <span class="icon icon-bluesky 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-mastodon icon--brand-primary"></span>
    <span class="icon icon-mastodon 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-speakerdeck icon--brand-primary"></span>
    <span class="icon icon-speakerdeck 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-bluesky icon--brand-white"></span>
    <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-mastodon icon--brand-white"></span>
    <span class="icon icon-rss-1 icon--brand-white"></span>
    <span class="icon icon-speakerdeck 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-bluesky icon--brand-primary"></span>
    <span class="icon icon-bluesky 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-mastodon icon--brand-primary"></span>
    <span class="icon icon-mastodon 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-speakerdeck icon--brand-primary"></span>
    <span class="icon icon-speakerdeck 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-bluesky icon--brand-white"></span>
    <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-mastodon icon--brand-white"></span>
    <span class="icon icon-rss-1 icon--brand-white"></span>
    <span class="icon icon-speakerdeck 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. */

File:

Content:


                                .icon {
  display: inline-flex;
  align-self: center;

  width: $spacer-md;
  height: $spacer-md;

  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-bluesky {
  mask-image: asset-url('icons/bluesky.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-mastodon {
  mask-image: asset-url('icons/mastodon.svg');
}

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

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

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

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

.icon-twitter {
  mask-image: asset-url('icons/twitter-x.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.7 KB

Handle: @icon
Preview:
- With layout
- Component only
Filesystem Path: components/05-atoms/media/icon/icon.html

No notes defined.