Social Media Icons

A limited number of icons specifically used for Social Media are imported as SVGs. They should be used as references or direct links out to appropriate social media channels.

Usage

Icons can be called with the macro and options:

{% from '@miz/components/icons/icons.twig' import IconSVG as iconsvg %}

{% set socialsvgOptions = {
  "class":    "miz-icon--md",
  "name":     "facebook"
} %}

{{ socialsvg( socialsvgOptions ) }}

That code will output:

<!-- Icon output -->
<svg class="miz-icon miz-icon__svg miz-icon--md miz-svg--facebook" aria-hidden="true">
    <use xlink:href="/images/icons/svg/sprite.symbol.svg#facebook"></use>
</svg>

Options

Note that name is required for the SVG icon to populate.

Param Default Values Description
class miz-icon
miz-icon__svg
String Additional classes appended to the icon
attributes null Object Attributes to be applied to the icon
name null String The name of the icon to be used.
Options are facebook, twitter, linkedin, youtube,
instagram, google, and snapchat
color miz-svg--name String Color of the icon.
Left empty will default to brand specific colors.
Additional options are black and white
{# Import Icon component #}
{% from '@miz/components/social-media/social-media.twig' import SocialSVG as socialsvg %}


{# Facebook #}
<p>Facebook
{% set socialsvgOptions = {
  "class":    "miz-icon--sm",
  "name":     "facebook"
  } %}

{{ socialsvg( socialsvgOptions ) }}

{% set socialsvgOptions = {
  "class":    "miz-icon--md",
  "name":     "facebook"
} %}

{{ socialsvg( socialsvgOptions ) }}

{% set socialsvgOptions = {
  "class":    "miz-icon--lg",
  "name":     "facebook"
} %}

{{ socialsvg( socialsvgOptions ) }}

{% set socialsvgOptions = {
  "class":    "miz-icon--xl",
  "name":     "facebook"
} %}

{{ socialsvg( socialsvgOptions ) }}</p>

{# Twitter #}
&nbsp;
<p>Twitter
{% set socialsvgOptions = {
  "class":    "miz-icon--sm",
  "name":     "twitter"
} %}

{{ socialsvg( socialsvgOptions ) }}

{% set socialsvgOptions = {
  "class":    "miz-icon--md",
  "name":     "twitter"
} %}

{{ socialsvg( socialsvgOptions ) }}

{% set socialsvgOptions = {
  "class":    "miz-icon--lg",
  "name":     "twitter"
} %}

{{ socialsvg( socialsvgOptions ) }}

{% set socialsvgOptions = {
  "class":    "miz-icon--xl",
  "name":     "twitter"
} %}

{{ socialsvg( socialsvgOptions ) }}</p>

{# LinkedIn #}
&nbsp;
<p>LinkedIn
{% set socialsvgOptions = {
  "class":    "miz-icon--sm",
  "name":     "linkedin"
} %}

{{ socialsvg( socialsvgOptions ) }}

{% set socialsvgOptions = {
  "class":    "miz-icon--md",
  "name":     "linkedin"
} %}

{{ socialsvg( socialsvgOptions ) }}

{% set socialsvgOptions = {
  "class":    "miz-icon--lg",
  "name":     "linkedin"
} %}

{{ socialsvg( socialsvgOptions ) }}

{% set socialsvgOptions = {
  "class":    "miz-icon--xl",
  "name":     "linkedin"
} %}

{{ socialsvg( socialsvgOptions ) }}</p>

{# YouTube #}
&nbsp;
<p>YouTube
{% set socialsvgOptions = {
  "class":    "miz-icon--sm",
  "name":     "youtube"
} %}

{{ socialsvg( socialsvgOptions ) }}

{% set socialsvgOptions = {
  "class":    "miz-icon--md",
  "name":     "youtube"
} %}

{{ socialsvg( socialsvgOptions ) }}

{% set socialsvgOptions = {
  "class":    "miz-icon--lg",
  "name":     "youtube"
} %}

{{ socialsvg( socialsvgOptions ) }}

{% set socialsvgOptions = {
  "class":    "miz-icon--xl",
  "name":     "youtube"
} %}

{{ socialsvg( socialsvgOptions ) }}</p>

{# Instagram #}
&nbsp;
<p>Instagram
{% set socialsvgOptions = {
  "class":    "miz-icon--sm",
  "name":     "instagram"
} %}

{{ socialsvg( socialsvgOptions ) }}

{% set socialsvgOptions = {
  "class":    "miz-icon--md",
  "name":     "instagram"
} %}

{{ socialsvg( socialsvgOptions ) }}

{% set socialsvgOptions = {
  "class":    "miz-icon--lg",
  "name":     "instagram"
} %}

{{ socialsvg( socialsvgOptions ) }}

{% set socialsvgOptions = {
  "class":    "miz-icon--xl",
  "name":     "instagram"
} %}

{{ socialsvg( socialsvgOptions ) }}
</p>

{# Google #}
&nbsp;
<p>Google
{% set socialsvgOptions = {
  "class":    "miz-icon--sm",
  "name":     "google"
} %}

{{ socialsvg( socialsvgOptions ) }}

{% set socialsvgOptions = {
  "class":    "miz-icon--md",
  "name":     "google"
} %}

{{ socialsvg( socialsvgOptions ) }}

{% set socialsvgOptions = {
  "class":    "miz-icon--lg",
  "name":     "google"
} %}

{{ socialsvg( socialsvgOptions ) }}

{% set socialsvgOptions = {
  "class":    "miz-icon--xl",
  "name":     "google"
} %}

{{ socialsvg( socialsvgOptions ) }}
</p>

{# Snapchat #}
&nbsp;
<p>Snapchat
{% set socialsvgOptions = {
  "class":    "miz-icon--sm",
  "name":     "snapchat"
} %}

{{ socialsvg( socialsvgOptions ) }}

{% set socialsvgOptions = {
  "class":    "miz-icon--md",
  "name":     "snapchat"
} %}

{{ socialsvg( socialsvgOptions ) }}

{% set socialsvgOptions = {
  "class":    "miz-icon--lg",
  "name":     "snapchat"
} %}

{{ socialsvg( socialsvgOptions ) }}

{% set socialsvgOptions = {
  "class":    "miz-icon--xl",
  "name":     "snapchat"
} %}

{{ socialsvg( socialsvgOptions ) }}

</p>
<p>

    Facebook

    <svg class="miz-icon miz-icon__svg miz-icon--sm miz-svg--facebook" aria-hidden="true">
    <use xlink:href="/images/icons/svg/sprite.symbol.svg#facebook"></use>
  </svg>

    <svg class="miz-icon miz-icon__svg miz-icon--md miz-svg--facebook" aria-hidden="true">
    <use xlink:href="/images/icons/svg/sprite.symbol.svg#facebook"></use>
  </svg>

    <svg class="miz-icon miz-icon__svg miz-icon--lg miz-svg--facebook" aria-hidden="true">
    <use xlink:href="/images/icons/svg/sprite.symbol.svg#facebook"></use>
  </svg>

    <svg class="miz-icon miz-icon__svg miz-icon--xl miz-svg--facebook" aria-hidden="true">
    <use xlink:href="/images/icons/svg/sprite.symbol.svg#facebook"></use>
  </svg></p>

&nbsp;
<p>Twitter

    <svg class="miz-icon miz-icon__svg miz-icon--sm miz-svg--twitter" aria-hidden="true">
    <use xlink:href="/images/icons/svg/sprite.symbol.svg#twitter"></use>
  </svg>

    <svg class="miz-icon miz-icon__svg miz-icon--md miz-svg--twitter" aria-hidden="true">
    <use xlink:href="/images/icons/svg/sprite.symbol.svg#twitter"></use>
  </svg>

    <svg class="miz-icon miz-icon__svg miz-icon--lg miz-svg--twitter" aria-hidden="true">
    <use xlink:href="/images/icons/svg/sprite.symbol.svg#twitter"></use>
  </svg>

    <svg class="miz-icon miz-icon__svg miz-icon--xl miz-svg--twitter" aria-hidden="true">
    <use xlink:href="/images/icons/svg/sprite.symbol.svg#twitter"></use>
  </svg></p>

&nbsp;
<p>LinkedIn

    <svg class="miz-icon miz-icon__svg miz-icon--sm miz-svg--linkedin" aria-hidden="true">
    <use xlink:href="/images/icons/svg/sprite.symbol.svg#linkedin"></use>
  </svg>

    <svg class="miz-icon miz-icon__svg miz-icon--md miz-svg--linkedin" aria-hidden="true">
    <use xlink:href="/images/icons/svg/sprite.symbol.svg#linkedin"></use>
  </svg>

    <svg class="miz-icon miz-icon__svg miz-icon--lg miz-svg--linkedin" aria-hidden="true">
    <use xlink:href="/images/icons/svg/sprite.symbol.svg#linkedin"></use>
  </svg>

    <svg class="miz-icon miz-icon__svg miz-icon--xl miz-svg--linkedin" aria-hidden="true">
    <use xlink:href="/images/icons/svg/sprite.symbol.svg#linkedin"></use>
  </svg></p>

&nbsp;
<p>YouTube

    <svg class="miz-icon miz-icon__svg miz-icon--sm miz-svg--youtube" aria-hidden="true">
    <use xlink:href="/images/icons/svg/sprite.symbol.svg#youtube"></use>
  </svg>

    <svg class="miz-icon miz-icon__svg miz-icon--md miz-svg--youtube" aria-hidden="true">
    <use xlink:href="/images/icons/svg/sprite.symbol.svg#youtube"></use>
  </svg>

    <svg class="miz-icon miz-icon__svg miz-icon--lg miz-svg--youtube" aria-hidden="true">
    <use xlink:href="/images/icons/svg/sprite.symbol.svg#youtube"></use>
  </svg>

    <svg class="miz-icon miz-icon__svg miz-icon--xl miz-svg--youtube" aria-hidden="true">
    <use xlink:href="/images/icons/svg/sprite.symbol.svg#youtube"></use>
  </svg></p>

&nbsp;
<p>Instagram

    <svg class="miz-icon miz-icon__svg miz-icon--sm miz-svg--instagram" aria-hidden="true">
    <use xlink:href="/images/icons/svg/sprite.symbol.svg#instagram"></use>
  </svg>

    <svg class="miz-icon miz-icon__svg miz-icon--md miz-svg--instagram" aria-hidden="true">
    <use xlink:href="/images/icons/svg/sprite.symbol.svg#instagram"></use>
  </svg>

    <svg class="miz-icon miz-icon__svg miz-icon--lg miz-svg--instagram" aria-hidden="true">
    <use xlink:href="/images/icons/svg/sprite.symbol.svg#instagram"></use>
  </svg>

    <svg class="miz-icon miz-icon__svg miz-icon--xl miz-svg--instagram" aria-hidden="true">
    <use xlink:href="/images/icons/svg/sprite.symbol.svg#instagram"></use>
  </svg>
</p>

&nbsp;
<p>Google

    <svg class="miz-icon miz-icon__svg miz-icon--sm miz-svg--google" aria-hidden="true">
    <use xlink:href="/images/icons/svg/sprite.symbol.svg#google"></use>
  </svg>

    <svg class="miz-icon miz-icon__svg miz-icon--md miz-svg--google" aria-hidden="true">
    <use xlink:href="/images/icons/svg/sprite.symbol.svg#google"></use>
  </svg>

    <svg class="miz-icon miz-icon__svg miz-icon--lg miz-svg--google" aria-hidden="true">
    <use xlink:href="/images/icons/svg/sprite.symbol.svg#google"></use>
  </svg>

    <svg class="miz-icon miz-icon__svg miz-icon--xl miz-svg--google" aria-hidden="true">
    <use xlink:href="/images/icons/svg/sprite.symbol.svg#google"></use>
  </svg>
</p>

&nbsp;
<p>Snapchat

    <svg class="miz-icon miz-icon__svg miz-icon--sm miz-svg--snapchat" aria-hidden="true">
    <use xlink:href="/images/icons/svg/sprite.symbol.svg#snapchat"></use>
  </svg>

    <svg class="miz-icon miz-icon__svg miz-icon--md miz-svg--snapchat" aria-hidden="true">
    <use xlink:href="/images/icons/svg/sprite.symbol.svg#snapchat"></use>
  </svg>

    <svg class="miz-icon miz-icon__svg miz-icon--lg miz-svg--snapchat" aria-hidden="true">
    <use xlink:href="/images/icons/svg/sprite.symbol.svg#snapchat"></use>
  </svg>

    <svg class="miz-icon miz-icon__svg miz-icon--xl miz-svg--snapchat" aria-hidden="true">
    <use xlink:href="/images/icons/svg/sprite.symbol.svg#snapchat"></use>
  </svg>

</p>
/* No context defined for this component. */
  • Content:
    /* ========================================================================
        Icons
     ======================================================================= */
    
    //  Import Google Material Design Icon font
    @import 'https://fonts.googleapis.com/icon?family=Material+Icons';
    
    // Base style for icons
    .miz-icon {
      vertical-align: middle;
      display: inline-block;
    }
    
    // Small icons
    .miz-icon--sm {
      font-size: $miz-icon__font-size--sm;
    }
    
    .miz-icon__svg.miz-icon--sm {
      width: 18px;
      height: 18px;
    }
    
    // Medium (Default) icons
    .miz-icon--md {
      font-size: $miz-icon__font-size;
    }
    
    .miz-icon__svg.miz-icon--md {
      width: 24px;
      height: 24px;
    }
    
    // Large icons
    .miz-icon--lg {
      font-size: $miz-icon__font-size--lg;
    }
    
    .miz-icon__svg.miz-icon--lg {
      width: 36px;
      height: 36px;
    }
    
    // Extra large icons
    .miz-icon--xl {
      font-size: $miz-icon__font-size--xl;
    }
    
    .miz-icon__svg.miz-icon--xl {
      width: 48px;
      height: 48px;
    }
    
    // Icons used in buttons to adjust position
    .miz-icon--button {
      position: relative;
      top: -0.0625em;
    }
    
    // Used to "un"adjust the icon.
    .miz-icon--button-no-adjust {
      top: initial;
      right: initial;
    }
    
    /* SVG Colors
    ======================================================================== */
    
    .miz-svg--white { fill: $miz-white !important; }
    .miz-svg--black { fill: $miz-black !important; }
    .miz-svg--black-200 { fill: $miz-black-200 !important; }
    .miz-svg--black-300 { fill: $miz-black-300 !important; }
    
    .miz-svg--gold { fill: $miz-gold !important; }
    .miz-svg--gold-200 { fill: $miz-gold-200 !important; }
    .miz-svg--gold-300 { fill: $miz-gold-300 !important; }
    
    .miz-svg--red { fill: $miz-red !important; }
    .miz-svg--orange { fill: $miz-orange !important; }
    .miz-svg--blue { fill: $miz-blue !important; }
    .miz-svg--green { fill: $miz-green !important; }
    
    // Social fills for SVG
    .miz-svg--facebook { fill: $miz-color-facebook; }
    .miz-svg--twitter { fill: $miz-color-twitter; }
    .miz-svg--linkedin { fill: $miz-color-linkedin; }
    .miz-svg--youtube { fill: $miz-color-youtube; }
    .miz-svg--instagram { fill: $miz-color-instagram; }
    .miz-svg--google { fill: $miz-color-google; }
    .miz-svg--snapchat { fill: $miz-color-snapchat; }
    
    a > .miz-icon__svg {
      &:hover,
      &:focus,
      &:active {
        opacity: 0.75;
      }
    }
    
  • URL: /components/raw/miz-social-media/social-media.scss
  • Filesystem Path: fractal/pattern-library/miz/components/social-media/social-media.scss
  • Size: 2.2 KB