CSS - Add Color to Black & White PNG Image Using a Filter

Question

Is it possible in CSS to add color to a black & white image using a filter? I'm talking about using filters like it's possible in Photoshop, and an even better example would be the ones in Microsoft PowerPoint.

What I'm trying to do is this: I have an image file of a black icon. I want to add a filter to it such that everything in the image (the background is transparent) will have the color I choose by using the filter, such that I'd be able to have the icon in whatever color I want. Like I said in the title, it's a PNG image, so as far as I know, I can't use SVG filters.

How can I do this? I'm trying to write a theme for a website using the original icons, and I'm stuck on this.

Update: I want to use the original PNG images. I'm not going to replace them with SVGs, or pre-edited PNGs.

Thanks a lot in advance!

Answer 1

sepia() adds yellow color to b/w and other filters will work with that color now.

.foo {
    filter: sepia(1) saturate(5) brightness(0.5) hue-rotate(135deg);
}