SVG Color

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

by Glynne Turner

HTML

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

Custom:
<div class="icon colored"></div>
<div class="icon large colored"></div>
<br>
<img><svg viewBox="0 0 29 29" style="width:24px"><path  d="M5.135 5.37c-1.531 0-2.772 1.209-2.772 2.7v12.958c0 1.491 1.241 2.7 2.772 2.7h18.848c1.53 0 2.771-1.209 2.771-2.7V8.07c0-1.491-1.24-2.7-2.771-2.7H5.135zm0-1.62h18.848c2.449 0 4.434 1.934 4.434 4.32v12.958c0 2.386-1.985 4.32-4.434 4.32H5.135c-2.45 0-4.435-1.934-4.435-4.32V8.07c0-2.386 1.986-4.32 4.435-4.32z"></path><path  d="M23.998 7.48c.335.306.35.819.036 1.145l-5.898 6.103 5.88 5.728c.298.29.323.745.075 1.062l-.075.083a.847.847 0 01-1.176 0l-5.844-5.693-1.832 1.896a.847.847 0 01-1.21 0l-1.833-1.896L6.277 21.6a.847.847 0 01-1.176 0 .795.795 0 010-1.145l5.88-5.728-5.897-6.103a.795.795 0 01.035-1.145.847.847 0 011.176.035l8.264 8.552 8.264-8.552a.847.847 0 011.175-.035z"></path></svg>
</img>
<a href="https://icons8.com" target="blank">Icons 8</a>

CSS

/* IMPORTANT */

/* Colored Icon */
.colored {
  background-color: red; /* defines the background color of the image */
  mask: url(https://thanet-web-design.com/CTE/wp-content/uploads/2021/11/runner.svg) no-repeat center / contain;
  -webkit-mask: url(https://thanet-web-design.com/CTE/wp-content/uploads/2021/11/runner.svg) no-repeat center / contain;
}
.colored:hover{background-color:pink; cursor:pointer}


/* ADDITONAL */

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

.icon {
  width:100px;
  height: 150px;
  margin-top: 4px;
}
.icon.large {
  width:150px;
  height: 225px;
  margin-top: 4px;
  background-color:blue;
}
.icon.large:hover{background-color:violet;}


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