SVG Sprites

by Christopher O

HTML

<!-- Originally from https://codepen.io/chriscoyier/pen/EBHlD -->

<svg class="hide"><defs> 
  <g id="shape-codepen"> <path class="outer-ring"  d="M50,0C22.385,0,0,22.385,0,50c0,27.615,22.385,50,50,50c27.614,0,50-22.385,50-50C100,22.385,77.615,0,50,0z M50,91.789
		C26.958,91.789,8.212,73.042,8.212,50C8.212,26.958,26.958,8.212,50,8.212c23.042,0,41.788,18.747,41.788,41.789
		C91.788,73.042,73.042,91.789,50,91.789z"></path> <path class="inner-logo" ...

CSS

.hide {
  display: none;
}

.icon {
  width: 75px;
  height: 75px;
}

body {
  padding: 20px;
}

/* Targeting inside only */
.outer-ring {
  fill: #999;
}
.inner-logo {
  fill: #666;
}
.shape-codepen-2 {
  -webkit-filter: drop-shadow(5px 5px 2px #ccc); 
  filter: drop-shadow(5px 5px 2px black);
}

.shape-youtube {
  fill: url(#gradient);
}

.shape-twitter-2 {
  fill: #55ACEE
}
.shape-twitter-3 {
  fill: red;
}