Change the color of a SVG icon similar to grayscale but to shades of blue with CSS-CodePudding

I have a list of SVG icons that has colors in them which I use to display like below

I want to be able to re-use these SVG elsewhere in my webapp but change the color of the icons so that instead of showing color it only shows a certain shade of color. (Blue)

Is there a way to change this to blue similar to grayscale via CSS? (I'd rather not upload a separate SVG to do this)

The closest I got was something from following this How change hue of image with different colors with css filter to hue of blue

But I don’t want the blue background right behind the icon. (I just want the SVG to change color)

.background {
  padding: 16px;
  background: rgb(199, 229, 242);
}

.donut {
  width: 32px;
  height: 32px;
  position: relative;
}


.donut::before, .donut::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.donut::before {
  background-color: gray;
  mix-blend-mode: color;
}
.donut::after {
  mix-blend-mode: overlay;
  background-color: blue;
}

<div >
  <div >
    <svg  fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
      <path d="M23.778 4.36A14 14 0 0016 2v5a9 9 0 11-9 9H2A14 14 0 1023.778 4.36z" fill="#E1BD16"/>
      <path d="M6.1 6.1A14 14 0 002 16h5a9 9 0 019-9V2a14 14 0 00-9.9 4.1z" fill="#F85F4E"/>
    </svg>
  </div>
</div>

CodePudding user response：

I found that you can add a position absolute SVG with a fill of the color that you want. Then using mix-blend-mode: overlay; and filter: grayscale(1); you can get the shade of color that you want

.background {
  padding: 16px;
  background: rgb(199, 229, 242);
}

.donut {
  width: 32px;
  height: 32px;
  filter: grayscale(1);
  mix-blend-mode: overlay;
  z-index: 1;
}

.donut-background {
  width: 32px;
  height: 32px;
  position: absolute;
  z-index: 0;
}

.donut-background * {
  fill: #2C93BF;
}

<div >
    <svg  fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
      <path d="M23.778 4.36A14 14 0 0016 2v5a9 9 0 11-9 9H2A14 14 0 1023.778 4.36z" fill="#E1BD16"/>
      <path d="M6.1 6.1A14 14 0 002 16h5a9 9 0 019-9V2a14 14 0 00-9.9 4.1z" fill="#F85F4E"/>
    </svg>
    
    
    <svg  fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
      <path d="M23.778 4.36A14 14 0 0016 2v5a9 9 0 11-9 9H2A14 14 0 1023.778 4.36z" fill="#E1BD16"/>
      <path d="M6.1 6.1A14 14 0 002 16h5a9 9 0 019-9V2a14 14 0 00-9.9 4.1z" fill="#F85F4E"/>
    </svg>
</div>

CodePudding user response：

You can change the SVG's fill, stroke and background colors to what ever you want... Remove the SVG's fill attribute within the <path> tag and add and extra CSS rule like this example:

.donut svg {
  background-color: lightgray;
  fill: blue;
  stroke: white;
}

.background {
  padding: 16px;
  background: rgb(199, 229, 242);
}

.donut {
  width: 32px;
  height: 32px;
  position: relative;
}

/*
.donut::before, .donut::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.donut::before {
  background-color: gray;
  mix-blend-mode: color;
}
.donut::after {
  mix-blend-mode: overlay;
  background-color: blue;
}
*/

.donut svg {
  background-color: lightgray;
  fill: blue;
  stroke: white;
}

<div >
  <div >
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
      <path d="M23.778 4.36A14 14 0 0016 2v5a9 9 0 11-9 9H2A14 14 0 1023.778 4.36z"/>
      <path d="M6.1 6.1A14 14 0 002 16h5a9 9 0 019-9V2a14 14 0 00-9.9 4.1z"/>
    </svg>
  </div>
</div>