How do I change SVG fill color on hover?

Click Apply hover fill. Shapes get class svg-hover-fill and a :hover rule in changes the fill.

Why doesn’t hover work on an ?

Hover CSS inside the file does not apply through . Inline the SVG (or an object) so :hover can reach the paths.

No. Hover adds a pointer state. Variables tokenize the palette. Combine them if you want both.

Yes. Edit the :hover fill in the generated block.

FAQ

Quick answers

How do I change SVG fill color on hover?: Click Apply hover fill. Shapes get class svg-hover-fill and a :hover rule in <style> changes the fill.
Why doesn’t hover work on an <img src=…svg>?: Hover CSS inside the file does not apply through <img>. Inline the SVG (or an object) so :hover can reach the paths.
Is hover fill the same as CSS variables?: No. Hover adds a pointer state. Variables tokenize the palette. Combine them if you want both.
Can I pick the hover color in Source?: Yes. Edit the :hover fill in the generated <style> block.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B