Springboard

Social Media Icons 

<!-- 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