<h1>Using Sprite image with css</h1>
<div>
  <span class="icon dark-a"></span>
  <span class="icon dark-b"></span>
  <span class="icon dark-c"></span>
  <span class="icon light-a"></span>
  <span class="icon light-b"></span>
  <span class="icon light-c"></span>
</div>
h1 {
  text-decoration: underline;
}

.icon {
  background: url("https://gist.github.com/assets/47686322/1d5e957d-45b3-4cc8-b9cb-d986b03c2e15");
  width: 16px;
  height: 16px;
  display: inline-block;
}

.dark-a {
  background-position: 0 0;
}

.dark-b {
  background-position: -16px 0;
}

.dark-c {
  background-position: -32px 0;
}

.light-a {
  background-position: 0 -16px;
}

.light-b {
  background-position: -16px -16px;
}

.light-c {
  background-position: -32px -16px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.