Add an SVG Sprite as a Background Image

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <i class="Icon Icon--plug"></i>
    <i class="Icon Icon--star"></i>
    <i class="Icon Icon--umbrella"></i>
    
    <br><br><br>
    
    <i class="Icon Icon--small Icon--plug"></i>
    <i class="Icon Icon--small Icon--star"></i>
    <i class="Icon Icon--small Icon--umbrella"></i>
  </body>

</html>

.Icon {
  display: inline-block;
  width: 3em;
  height: 3em;
  background-image: url(http://damonbauer.me/assets/images/implementing-svg/icons_sprite.svg);
  background-repeat: no-repeat;
  background-size: cover;
}

.Icon--small {
  width: 2em;
  height: 2em;
}

.Icon--plug {
  background-position: 0 0;
}

  .Icon--plug.Icon--small {
    background-position: 0 0;
  }

.Icon--star {
  background-position: 0 -3em;
}

  .Icon--star.Icon--small {
    background-position: 0 -2em;
  }

.Icon--umbrella {
  background-position: 0 -6em;
}
  .Icon--umbrella.Icon--small {
    background-position: 0 -4em;
  }


body {
  margin: 20px;
}