<!-- This bit includes to the external SVG sprite sheet -->
[[[https://codepen.io/team/lincolnloop/pen/3f9e802caab1c386e6debc8544be0717]]]

<div class="page">
  <div class="contain-icons">
    <svg class="icon icon-heart"><use xlink:href="#icon-heart"></use></svg>

    <svg class="icon icon-cloud"><use xlink:href="#icon-cloud"></use></svg>

    <svg class="icon icon-star"><use xlink:href="#icon-star"></use></svg>

    <svg class="icon icon-bulb"><use xlink:href="#icon-bulb"></use></svg>
  </div>
  
  <div class="contain-icons color-icons">
    <!--Call on icons again, add different class to style separately-->
    <svg class="icon icon-heart-2"><use xlink:href="#icon-heart"></use></svg>

    <svg class="icon icon-cloud-2"><use xlink:href="#icon-cloud"></use></svg>

    <svg class="icon icon-star-2"><use xlink:href="#icon-star"></use></svg>

    <svg class="icon icon-bulb-2"><use xlink:href="#icon-bulb"></use></svg>
  </div>
  
  <button class="color-change">Change Theme</button>
  
</div>
@import "compass/css3";

body {
  padding: 2.25em 1.6875em;
  background-image: repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
  background-size: 3px 3px;
}

.page {
  margin: auto;
  text-align: center;
}

/* Width and height below ensures consistent sizing, which would be especially important if working with icons that had different viewBox dimensions */
.icon {
  margin: 15px;
  width: 100px;
  height: 100px;
}

/* Style repeated icons. Depending on the icons you could be styling fills, strokes, or both */
.icon-heart-2 {
  fill: #D85724;
  /* You could also change the individual sizes here w/ width & height */
}

.icon-cloud-2 {
  fill: #A75489;
}

.icon-star-2 {
  fill: #3AA9FF;
}

.icon-bulb-2 {
  fill: #00EF67;
}

// Color theme 2
.color-icons.change .icon-heart-2 {
  fill: #14e2ba;
}

.color-icons.change .icon-cloud-2 {
  fill: #1ca01c;
}

.color-icons.change .icon-star-2 {
  fill: #aa0bb7;
}

.color-icons.change .icon-bulb-2 {
  fill: #ed6f2f;
}

// Just button stuff
.color-change {
  margin: 20px;
  padding: 5px 10px;
  background: transparent;
  border: 4px solid #333333;
  border-radius: 5px;
  font-family: 'Droid Sans', sans-serif;
  font-size: 20px;
  color: #333333;
  outline: none;
}

@import url(https://fonts.googleapis.com/css?family=Droid+Sans);
View Compiled
/*
Demo for a blog post:
https://lincolnloop.com/blog/svg-sprites-and-icon-systems-are-super/

Resources:
https://css-tricks.com/svg-sprites-use-better-icon-fonts/

https://css-tricks.com/svg-symbol-good-choice-icons/

http://svgpocketguide.com/book/

https://css-tricks.com/gotchas-on-getting-svg-into-production/

https://css-tricks.com/svg-fragment-identifiers-work/

*/

var button = document.getElementsByClassName('color-change');

button[0].addEventListener('click', function(evt) {
  evt.preventDefault();
  
  var icon = document.getElementsByClassName('color-icons')[0];
  var className = icon.getAttribute('class');
  if (className.indexOf('change') < 0) {
  	icon.setAttribute('class', 'color-icons change');
  } else {
    icon.setAttribute('class', ' color-icons');
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js