The Many Ways to Change an SVG Fill on Hover (and When to Use Them)

Change the color of an SVG icon on hover when it is not an inline SVG.

René Kulik on 03.02.2019

Cassie Evans explains how you can change the color of an SVG icon on hover when it’s not an inline SVG.

SVG is a great format for icons. Vector formats look crisp and razor sharp, no matter the size or device — and we get tons of design control when using them inline.

SVG also gives us another powerful feature: the ability to manipulate their properties with CSS. As a result, we can make quick and simple interactions where it used to take crafty CSS tricks or swapping out entire image files.

https://css-tricks.com/the-many-ways-to-change-an-svg-fill-on-hover-and-when-to-use-them