Mon 25 Jan 2021

Changing the color of an SVG icon

Today, for work, I had to change the color of an SVG icon from black to red (#ff0000) when a certain event occurred. I used the img element to display the SVG icon. Just adding a class with color set to the aforementioned hexadecimal color code didn't work. So I Googled and found an article called Change Color of SVG on Hover by Chris Coyier.

I decided to give the filter trick mentioned in this article a try and used the recommended online tool created by Barrett Sonntag which calculates the correct filter settings. When the class got added to the img element it indeed changed to red.