How do I change SVG stroke color on hover?

Paste the SVG, click Apply hover recipe, then paste the copied CSS so :hover sets a new color on the parent or icon class.

Why does the SVG need currentColor?

Hover CSS typically changes color; currentColor makes the stroke follow that property without editing every stroke attribute on hover.

Hover CSS cannot restyle strokes inside an external img file. Use inline SVG (or a sprite) for hover recolors.

Open Change SVG Stroke Color Tailwind for a stroke-current + utility-class approach.

FAQ

Quick answers

How do I change SVG stroke color on hover?: Paste the SVG, click Apply hover recipe, then paste the copied CSS so :hover sets a new color on the parent or icon class.
Why does the SVG need currentColor?: Hover CSS typically changes color; currentColor makes the stroke follow that property without editing every stroke attribute on hover.
Works with <img> tags?: Hover CSS cannot restyle strokes inside an external img file. Use inline SVG (or a sprite) for hover recolors.
Want Tailwind hover utilities?: Open Change SVG Stroke Color Tailwind for a stroke-current + utility-class approach.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B