Svg tint with mask image

Svg tint with mask image

by Csaba Hellinger

HTML

<span id="color"></span>

CSS

body {
  background: gray;
  color: red;
}

#color {
  width: 2rem;
  height: 2rem;
  display: inline-block;
  background: currentColor;
  -webkit-mask: url(https://one-client-web-dev.s3.eu-north-1.amazonaws.com/images/cross_system.svg) center no-repeat;
  
  mask: url(https://one-client-web-dev.s3.eu-north-1.amazonaws.com/images/cross_system.svg) no-repeat;
}