ways to colorize SVGs with CSS

SVGs are the closest thing we’ve got to perfect when it comes to iconography in websites and web apps. The only catch is you can’t set the color with CSS if you use SVGs the same way you use images. Luckily, there’s a few ways to make it happen.

1: just embed it

Take that SVG and drop it right in your markup. It’s part of the DOM now, so you style it exactly like you would any other HTML element. Just remember that you adjust the fill property, not the color property.

The good: it’s dead-simple. The bad: since you’re embedding the markup every time you use it on the page, it’s a poor fit for repeat use icons.

2: the mask method

With this method, instead of using the SVG file directly as an image, you’re using it to mask an element that has whatever background you want.

The good: it’s simple, and the background can be whatever. A color, a gradient, an image, it’s all good. The bad: support is still kind of meh for the mask property. Proceed with caution.

3: the blend mode method

This one uses a combination of mix-blend-mode: multiply;, mix-blend-mode: screen;, and possibly some dark incantations make the effect happen.

The good: you can colorize not just the icon, but the text that’s adjacent to it. With one seamless gradient even. Good stuff. The bad: it’s complicated, with a bunch of moving parts compared to the previous two methods. Explaining how it works will give you brain pain.