Can I change the color of pre made svg icons using CSS?

I have a standard set of social media icons I want to use in a footer. They are svg format. The body of the icons are black but I want them to be displayed in the footer as white. Can I change this using CSS? I’ve used the img tag to display them on the page. I know I could edit them in Inkscape but I’m wondering if there is a way to do this using just HTML/CSS. Any help would be gratefully received.

If your using the IMG tag, no, because the browser just renders them as an image.

But if you just put SVG code into the HTML, then it’ll work fine in terms of being able to style it using CSS, just works the same as HTML.

Thanks for the response. I went down the SVG tag route and it all worked. Thanks!

1 Like

Yeah, there are quite a few gotchas, but the upsides are pretty great with inline SVGs