<h1>SVG Sprites</h1>
<p>A visual demonstration of the SVG sprites technique. More information can be found here: <a href="http://blog.colouringcode.com/svg-sprites">blog.colouringcode.com/svg-sprites</a></p>

<!-- SVG Sprite Social icons -->
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">

  <symbol id="icon-share" viewBox="0 0 38 38">
    <title>Share</title>
    <path d="M24.3,21.6c-0.6,0-1.2,0.3-1.6,0.7l-5.9-2.9c0-0.1,0-0.2,0-0.3c0-0.1,0-0.2,0-0.3l5.9-2.9  c0.4,0.4,1,0.7,1.6,0.7c1.2,0,2.2-1,2.2-2.2s-1-2.2-2.2-2.2c-1.2,0-2.2,1-2.2,2.2c0,0.1,0,0.2,0,0.3l-5.9,2.9  c-0.4-0.4-1-0.7-1.6-0.7c-1.2,0-2.2,1-2.2,2.2c0,1.2,1,2.2,2.2,2.2c0.6,0,1.2-0.3,1.6-0.7l5.9,2.9c0,0.1,0,0.2,0,0.3  c0,1.2,1,2.2,2.2,2.2c1.2,0,2.2-1,2.2-2.2C26.5,22.6,25.5,21.6,24.3,21.6z"></path>
  </symbol>

  <symbol id="icon-twitter" viewBox="0 0 38 38">
    <title>Twitter</title>
    <path d="M27,14.8c-0.1,0-0.2,0-0.3,0.1c-0.5,0.1-0.6,0-0.2-0.4c0.2-0.2,0.3-0.3,0.4-0.5c0.3-0.4,0-0.6-0.4-0.4  c-0.2,0.1-0.3,0.1-0.5,0.2c-0.5,0.2-1.2-0.1-1.7-0.3c-0.6-0.3-1.2-0.5-1.9-0.5c-1,0-1.9,0.3-2.6,1c-0.7,0.6-1.1,1.4-1.1,2.3  c0,0.1,0,0.3,0,0.4c0,0.2-0.4,0.4-0.9,0.3c-1.1-0.1-2.2-0.5-3.2-0.9c-1-0.5-1.9-1.1-2.7-1.8c-0.4-0.3-0.9-0.3-1,0.1  c-0.1,0.3-0.1,0.6-0.1,0.9c0,0.6,0.1,1.1,0.4,1.6c0.1,0.2,0.3,0.5,0.5,0.6c0.3,0.3,0.3,0.5-0.2,0.4c-0.5-0.1-0.8-0.3-0.8-0.3  c0,0,0,0,0,0c0,0.8,0.3,1.5,0.8,2.1c0.3,0.4,0.7,0.7,1.2,0.9c0.5,0.2,0.7,0.3,0.4,0.4c-0.2,0-0.3,0-0.5,0c-0.1,0-0.2,0-0.3,0  c-0.2,0-0.2,0.3,0.1,0.7c0.2,0.3,0.5,0.6,0.9,0.8c0.4,0.2,0.8,0.4,1.2,0.5c0.5,0.1,0.6,0.4,0.2,0.6c-1.1,0.6-2.4,0.9-3.7,0.9  c-0.2,0-0.3,0-0.4,0c-0.2,0-0.1,0.2,0.4,0.4c1.5,0.7,3,1,4.7,1c1.3,0,2.5-0.2,3.6-0.6c1.1-0.4,2.1-0.9,2.9-1.5  c0.8-0.6,1.5-1.3,2.1-2.1c0.6-0.8,1-1.6,1.3-2.5c0.3-0.9,0.4-1.8,0.4-2.6c0-0.1,0-0.2,0-0.2c0-0.1,0.3-0.4,0.7-0.8  c0.2-0.1,0.3-0.3,0.5-0.5C27.7,14.9,27.5,14.7,27,14.8z"></path>
  </symbol>

  <symbol id="icon-facebook" viewBox="0 0 38 38">
    <title>Facebook</title>
    <path d="M16.8,14.3c0,0.4,0,2.1,0,2.1h-1.6V19h1.6v7.6h3.4V19h2.3c0,0,0.2-1.2,0.3-2.6c-0.3,0-2.6,0-2.6,0  s0-1.5,0-1.8c0-0.3,0.4-0.6,0.7-0.6c0.4,0,1.1,0,1.8,0c0-0.3,0-1.6,0-2.7c-0.9,0-2,0-2.5,0C16.8,11.4,16.8,13.9,16.8,14.3z"></path>
  </symbol>

  <symbol id="icon-pinterest" viewBox="0 0 38 38">
    <title>Pinterest</title>
    <path d="M19.4,11c-4.6,0-6.9,3.1-6.9,5.7c0,1.6,0.6,3,2,3.5c0.2,0.1,0.4,0,0.5-0.2c0-0.2,0.1-0.6,0.2-0.7  c0.1-0.2,0-0.3-0.1-0.5c-0.4-0.4-0.6-1-0.6-1.8c0-2.3,1.8-4.4,4.7-4.4c2.6,0,4,1.5,4,3.5c0,2.6-1.2,4.9-3,4.9c-1,0-1.8-0.8-1.5-1.8  c0.3-1.2,0.8-2.4,0.8-3.3c0-0.8-0.4-1.4-1.3-1.4c-1,0-1.9,1-1.9,2.4c0,0.9,0.3,1.5,0.3,1.5s-1.1,4.3-1.2,5c-0.4,1.5-0.1,3.3,0,3.5  c0,0.1,0.2,0.1,0.2,0.1c0.1-0.1,1.3-1.6,1.7-3c0.1-0.4,0.7-2.5,0.7-2.5c0.3,0.6,1.3,1.1,2.3,1.1c3.1,0,5.2-2.7,5.2-6.3  C25.5,13.5,23.1,11,19.4,11z"></path>
  </symbol>

  <symbol id="icon-googleplus" viewBox="0 0 38 38">
    <title>Google Plus</title>
    <path d="M14.6,27c3.2,0,4.9-1.8,4.9-3.6c0-1.4-0.4-2.3-1.7-3.2c-0.5-0.3-1.3-1.1-1.3-1.5c0-0.5,0.2-0.8,1-1.4  c0.8-0.6,1.4-1.5,1.4-2.6c0-1.2-0.6-2.5-1.6-2.9h1.6l1.1-0.8h-5c-2.2,0-4.3,1.7-4.3,3.6c0,2,1.5,3.6,3.8,3.6l0.5,0  c-0.1,0.3-0.3,0.6-0.3,0.9c0,0.6,0.3,1,0.7,1.4l-0.9,0c-2.8,0-4.9,1.8-4.9,3.6C9.5,25.9,11.8,27,14.6,27z M15.1,17.7  c-1.3,0-2.5-1.4-2.7-3.1c-0.2-1.7,0.6-3,1.9-2.9c1.3,0,2.5,1.4,2.7,3.1C17.2,16.4,16.4,17.8,15.1,17.7z M14.9,21  c0.4,0,0.9,0.1,1.2,0.2c1,0.7,1.8,1.1,2,1.9c0,0.2,0.1,0.3,0.1,0.5c0,1.4-0.9,2.6-3.6,2.6c-1.9,0-3.3-1.2-3.3-2.7  C11.3,22.1,13,21,14.9,21z M25,14.5V11h-1.2v3.5h-3.6v1.2h3.6v3.6H25v-3.6h3.6v-1.2H25z"></path>
  </symbol>

  <symbol id="icon-youtube" viewBox="0 0 38 38">
    <title>Youtube</title>
    <path d="M29.8,13.8c-0.3-1.2-1.2-2-2.4-2.2c-2.8-0.3-5.6-0.3-8.4-0.3c-2.8,0-5.6,0-8.4,0.3c-1.2,0.1-2.1,1-2.4,2.2  c-0.4,1.7-0.4,3.5-0.4,5.2c0,1.7,0,3.5,0.4,5.2c0.3,1.2,1.2,2,2.4,2.2c2.8,0.3,5.6,0.3,8.4,0.3c2.8,0,5.6,0,8.4-0.3  c1.2-0.1,2.1-1,2.4-2.2c0.4-1.7,0.4-3.5,0.4-5.2C30.2,17.3,30.2,15.5,29.8,13.8z M16.1,22.4c0-2.4,0-4.8,0-7.2  c2.4,1.2,4.7,2.4,7.1,3.6C20.8,20,18.5,21.2,16.1,22.4z"></path>
  </symbol>

  <symbol id="icon-tripadvisor" viewBox="0 0 38 38">
    <title>Trip Advisor</title>
    <path d="M31.3,16.3c-0.1-0.1-0.1-0.2,0-0.2c0.2-0.8,0.6-1.5,1.1-2.2c0.1-0.1,0.1-0.2,0.2-0.3c0,0,0,0,0,0    c-0.1,0-0.2,0-0.3,0c-1.3,0-2.7,0-4,0c-0.1,0-0.2,0-0.3-0.1c-1.1-0.7-2.4-1.3-3.6-1.7c-0.7-0.2-1.5-0.4-2.2-0.5    c-1-0.1-2.6-0.4-4.5-0.2c-0.8,0.1-1.6,0.2-2.4,0.3c-0.8,0.2-1.6,0.4-2.4,0.6c-1.1,0.4-2.1,0.9-3.1,1.5c-0.1,0-0.1,0.1-0.2,0.1    c-1.4,0-2.7,0-4.1,0c0,0,0,0-0.1,0v0.1c0.1,0.2,0.2,0.3,0.3,0.5c0.4,0.6,0.8,1.3,1,2.1c0,0.1,0,0.1,0,0.2    c-0.5,0.7-0.9,1.5-1.1,2.3c-0.1,0.3-0.4,1.5-0.1,2.7c0.2,1.3,0.8,2.5,1.6,3.5c0.9,1,2,1.7,3.3,2.1c0.9,0.3,1.9,0.3,2.8,0.2    c1.7-0.3,3.1-1.1,4.2-2.4c0,0,0,0,0,0c0,0,0,0,0,0c0.5,0.7,0.9,1.4,1.4,2.2c0.5-0.7,1-1.5,1.5-2.2c0.1,0.1,0.2,0.3,0.4,0.4    c0.9,1,2,1.6,3.3,2c0.5,0.1,1.1,0.2,1.6,0.2c1.3,0,2.5-0.3,3.6-1c1.5-1,2.6-2.4,3-4.2C32.9,19.9,32.5,18,31.3,16.3z M12.3,25.7    c-3,0-5.4-2.4-5.5-5.4c-0.1-3.1,2.5-5.6,5.4-5.6c3,0,5.4,2.4,5.4,5.5C17.6,23.2,15.2,25.7,12.3,25.7z M16.8,15.1    c-1.2-1.1-2.7-1.7-4.3-1.8c2.2-0.9,4.5-1.3,6.9-1.2c2.1,0,4.1,0.4,6.1,1.3c-1.6,0.1-3.1,0.7-4.3,1.8c-1.2,1.1-1.9,2.5-2.2,4.1    C18.7,17.7,18,16.3,16.8,15.1z M25.8,25.7c-3,0-5.4-2.5-5.4-5.5c0-3,2.4-5.4,5.3-5.4c3-0.1,5.5,2.3,5.6,5.5    C31.2,23.3,28.8,25.7,25.8,25.7z M25.8,16.8c-1.8,0-3.4,1.5-3.4,3.4c0,1.9,1.6,3.5,3.5,3.4c1.7-0.1,3.2-1.5,3.2-3.4    C29.1,18.3,27.6,16.8,25.8,16.8z M25.8,22.4c-1.2,0-2.2-1-2.2-2.2c0-1.2,1-2.2,2.2-2.2c1.2,0,2.2,1,2.2,2.2    C28,21.4,27,22.4,25.8,22.4z M12.1,16.8c-1.8,0-3.4,1.4-3.4,3.4c0,1.9,1.6,3.5,3.5,3.4c1.7-0.1,3.2-1.5,3.2-3.4    C15.5,18.3,14,16.8,12.1,16.8z M12.1,22.4c-1.2,0-2.2-1-2.2-2.2c0-1.2,1-2.2,2.2-2.2c1.2,0,2.2,1,2.2,2.2    C14.3,21.4,13.3,22.4,12.1,22.4z M25.8,19c-0.6,0-1.1,0.5-1.1,1.1c0,0.6,0.5,1.1,1.1,1.1c0.6,0,1.1-0.5,1.1-1.1    C26.9,19.6,26.4,19,25.8,19z M12.1,19c-0.6,0-1.1,0.5-1.1,1.1c0,0.6,0.5,1.1,1.1,1.1c0.6,0,1.1-0.5,1.1-1.1    C13.3,19.5,12.7,19,12.1,19z"></path>
  </symbol>

</svg>

<div id="icons">
  <svg class="social twitter svg" aria-label="">
  <use xlink:href="#icon-twitter" />
  </svg>
  <svg class="social facebook svg" aria-label="">
  <use xlink:href="#icon-facebook" />
  </svg>
  <svg class="social pinterest svg" aria-label="">
  <use xlink:href="#icon-pinterest" />
  </svg>
  <svg class="social googleplus svg" aria-label="">
  <use xlink:href="#icon-googleplus" />
  </svg>
</div>
$body: #eee;

$social: (
  twitter: #55acee,
  facebook: #3b5998,
  pinterest: #cc2127,
  googleplus: #dd4b39
);

* {
  margin: 0;
  padding: 0;
}

body {
  background: $body;
  
  padding: {
    top: 80px;
  }
  
  text-align: center;
  line-height: 1.4;
}

h1 {
  font: {
    family: arial;
    size: 36px;
    weight: normal;
  }
  margin: {
    bottom: 20px;
  }
}

p {
  max-width: 510px;
  
  font: {
    family: arial;
    size: 16px;
    weight: normal;
  }
  
  color: #666;
  
  margin: 0 auto 80px;
  
  a {
    color: #555;
    text-decoration: none;
  }
}

#icons {
  width: 330px;
  
  margin: 0 auto;
}

.social { 
  background: #ddd;
  border-radius: 12px;
  
  width: 60px; 
  height: 60px; 
  
  display: block; 
  float: left; 
  
  margin: { right: 30px; }
  
  cursor: pointer;
  
  &.twitter {
    fill: map-get($social, twitter);
    &:hover, &:focus {
      background: map-get($social, twitter);
      fill: #fff;
    }
  }
  
  &.facebook {
    fill: map-get($social, facebook);
    &:hover, &:focus {
      background: map-get($social, facebook);
      fill: #fff;
    }
  }
  
  &.pinterest {
    fill: map-get($social, pinterest);
    &:hover, &:focus {
      background: map-get($social, pinterest);
      fill: #fff;
    }
  }
  
  &.googleplus {
    fill: map-get($social, googleplus);
    &:hover, &:focus {
      background: map-get($social, googleplus);
      fill: #fff;
    }
  }
  
  &:last-of-type {
    margin: 0;
  }
  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.