SVG Color

You can easily set the fill color of an svg by using it as a mask.

by Marco Abate

HTML

Original:
<div class="icon original"></div>
<br>

Custom:
<div class="icon colored"></div>
<br>


<a href="https://icons8.com" target="blank">Icons 8</a>

CSS

/* IMPORTANT */

/* Colored Icon */
.colored {
  background-color: orange; /* defines the background color of the image */
  mask: url(https://img.icons8.com/stackoverflow) no-repeat center / contain;
  -webkit-mask: url(https://img.icons8.com/stackoverflow) no-repeat center / contain;
  transition: background-color 1s ease;
}

.colored:hover {
  background-color: blue;
  mask: url(https://img.icons8.com/stackoverflow) no-repeat center / contain;
  -webkit-mask: url(https://img.icons8.com/stackoverflow) no-repeat center / contain;
}


/* ADDITONAL */

body {
  font-family: 'Roboto', sans-serif;
}

.icon {
  width: 24px;
  height: 24px;
  margin-top: 4px;
}


/* Original Icon */
.original {
  background: url(https://img.icons8.com/stackoverflow) no-repeat center / contain;
}