<!-- Default -->
<!-- Render the icons with svg "use". Note the role, aria label and title for accessibility -->
<svg role="img" aria-label="twitter icon" class="social-icon">
  <title>twitter icon</title>
  <use xlink:href="../../images/social-media.svg#icon-twitter" />
</svg>

<!-- Facebook -->
<!-- Render the icons with svg "use". Note the role, aria label and title for accessibility -->
<svg role="img" aria-label="Facebook icon" class="social-icon">
  <title>Facebook icon</title>
  <use xlink:href="../../images/social-media.svg#icon-facebook-square" />
</svg>

<!-- Instagram -->
<!-- Render the icons with svg "use". Note the role, aria label and title for accessibility -->
<svg role="img" aria-label="Instagram icon" class="social-icon">
  <title>Instagram icon</title>
  <use xlink:href="../../images/social-media.svg#icon-instagram" />
</svg>

<!-- Linkedin -->
<!-- Render the icons with svg "use". Note the role, aria label and title for accessibility -->
<svg role="img" aria-label="Linkedin icon" class="social-icon">
  <title>Linkedin icon</title>
  <use xlink:href="../../images/social-media.svg#icon-linkedin-square" />
</svg>

<!-- Snapchat -->
<!-- Render the icons with svg "use". Note the role, aria label and title for accessibility -->
<svg role="img" aria-label="Snapchat icon" class="social-icon">
  <title>Snapchat icon</title>
  <use xlink:href="../../images/social-media.svg#icon-snapchat-ghost" />
</svg>

<!-- Vimeo -->
<!-- Render the icons with svg "use". Note the role, aria label and title for accessibility -->
<svg role="img" aria-label="Vimeo icon" class="social-icon">
  <title>Vimeo icon</title>
  <use xlink:href="../../images/social-media.svg#icon-vimeo-square" />
</svg>

<!-- Youtube -->
<!-- Render the icons with svg "use". Note the role, aria label and title for accessibility -->
<svg role="img" aria-label="Youtube icon" class="social-icon">
  <title>Youtube icon</title>
  <use xlink:href="../../images/social-media.svg#icon-youtube-play" />
</svg>

<!-- Github -->
<!-- Render the icons with svg "use". Note the role, aria label and title for accessibility -->
<svg role="img" aria-label="Github icon" class="social-icon">
  <title>Github icon</title>
  <use xlink:href="../../images/social-media.svg#icon-github" />
</svg>

<!-- Pinterest -->
<!-- Render the icons with svg "use". Note the role, aria label and title for accessibility -->
<svg role="img" aria-label="Pinterest icon" class="social-icon">
  <title>Pinterest icon</title>
  <use xlink:href="../../images/social-media.svg#icon-pinterest-square" />
</svg>

<!-- Flickr -->
<!-- Render the icons with svg "use". Note the role, aria label and title for accessibility -->
<svg role="img" aria-label="Flickr icon" class="social-icon">
  <title>Flickr icon</title>
  <use xlink:href="../../images/social-media.svg#icon-flickr" />
</svg>

<!-- Tumblr -->
<!-- Render the icons with svg "use". Note the role, aria label and title for accessibility -->
<svg role="img" aria-label="Tumblr icon" class="social-icon">
  <title>Tumblr icon</title>
  <use xlink:href="../../images/social-media.svg#icon-tumblr-square" />
</svg>

<!-- Slack -->
<!-- Render the icons with svg "use". Note the role, aria label and title for accessibility -->
<svg role="img" aria-label="Slack icon" class="social-icon">
  <title>Slack icon</title>
  <use xlink:href="../../images/social-media.svg#icon-slack" />
</svg>

<!-- Render the icons with svg "use". Note the role, aria label and title for accessibility -->
<svg role="img" aria-label="{{ icon.name }} icon" class="social-icon">
  <title>{{ icon.name }} icon</title>
  <use xlink:href="../../images/{{ filename }}#{{ icon.id }}" />
</svg>
/* Default */
{
  "filename": "social-media.svg",
  "icon": {
    "name": "twitter",
    "id": "icon-twitter"
  }
}

/* Facebook */
{
  "filename": "social-media.svg",
  "icon": {
    "name": "Facebook",
    "id": "icon-facebook-square"
  }
}

/* Instagram */
{
  "filename": "social-media.svg",
  "icon": {
    "name": "Instagram",
    "id": "icon-instagram"
  }
}

/* Linkedin */
{
  "filename": "social-media.svg",
  "icon": {
    "name": "Linkedin",
    "id": "icon-linkedin-square"
  }
}

/* Snapchat */
{
  "filename": "social-media.svg",
  "icon": {
    "name": "Snapchat",
    "id": "icon-snapchat-ghost"
  }
}

/* Vimeo */
{
  "filename": "social-media.svg",
  "icon": {
    "name": "Vimeo",
    "id": "icon-vimeo-square"
  }
}

/* Youtube */
{
  "filename": "social-media.svg",
  "icon": {
    "name": "Youtube",
    "id": "icon-youtube-play"
  }
}

/* Github */
{
  "filename": "social-media.svg",
  "icon": {
    "name": "Github",
    "id": "icon-github"
  }
}

/* Pinterest */
{
  "filename": "social-media.svg",
  "icon": {
    "name": "Pinterest",
    "id": "icon-pinterest-square"
  }
}

/* Flickr */
{
  "filename": "social-media.svg",
  "icon": {
    "name": "Flickr",
    "id": "icon-flickr"
  }
}

/* Tumblr */
{
  "filename": "social-media.svg",
  "icon": {
    "name": "Tumblr",
    "id": "icon-tumblr-square"
  }
}

/* Slack */
{
  "filename": "social-media.svg",
  "icon": {
    "name": "Slack",
    "id": "icon-slack"
  }
}

  • Content:
    /*
      Social Media Icons
    */
    .social-icon {
      height: 2rem;
      width: 2rem;
      margin: 0 .5rem;
      fill: rgba(0,0,0,.3);
      transition: all 200ms ease-in-out;
    }
    .social-icon:hover {
      fill: rgba(0,0,0,.6);
    }
    
  • URL: /components/raw/social-icons/_sass.scss
  • Filesystem Path: components/02-modules/icons/social-icons/_sass.scss
  • Size: 202 Bytes

Social Media Icons

SVG icons for common social media sites. Sprite must be inlined in HTML doc head to support IE8-11. To use an external sprite with older IE versions you’ll need SVG for Everybody or svgxuse.

Use role, aria-label, and title for accessibility. See source code and this Stack Overflow discussion. http://stackoverflow.com/questions/4697100/accessibility-recommended-alt-text-convention-for-svg-and-mathml

social-media.svg generated by icomoon