How do I change SVG stroke color with CSS?

Paste the SVG, click Apply currentColor + copy CSS, then paste the copied rule into your stylesheet and set color on a parent.

currentColor lets the stroke follow the CSS color property, so one class or parent color can theme the icon.

Does the path d attribute change?

No. Geometry stays the same; only stroke / color inheritance is prepared for CSS.

See Change SVG Stroke Color React or Change SVG Stroke Color Tailwind for framework snippets.

FAQ

Quick answers

How do I change SVG stroke color with CSS?: Paste the SVG, click Apply currentColor + copy CSS, then paste the copied rule into your stylesheet and set color on a parent.
Why currentColor?: currentColor lets the stroke follow the CSS color property, so one class or parent color can theme the icon.
Does the path d attribute change?: No. Geometry stays the same; only stroke / color inheritance is prepared for CSS.
Prefer React or Tailwind?: See Change SVG Stroke Color React or Change SVG Stroke Color Tailwind for framework snippets.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B