SVGEditor

Free online SVG editor — preview, share, React & PNG

Open source

Change SVG Fill Color With CSS

Rewrite hardcoded fills as a .svg-fill class you can theme in CSS

Strip inline styles? Strip inline stylesColors → CSS variables? Colors → CSS variables

FAQ

Quick answers

How do I change SVG fill color with CSS?
Click Apply CSS fill. Hardcoded fills become class="svg-fill" and a <style> block sets fill.
Is this the same as currentColor?
No. currentColor inherits from CSS color. This page uses an explicit class rule you can edit.
Can I hover the fill after applying CSS?
Use Change SVG Fill Color On Hover for a :hover rule. This page only sets the resting fill.
Do gradient url(#) fills become CSS?
url() paints stay as attributes so gradient defs keep working.
Strip inline styles → Colors → CSS variables → Fill on hover → Monochrome icon →

Privacy Terms

Open full editor →

Source

Type or paste SVG markup. The preview on the right updates as you type.

Ready

Live preview

PNG export · 2× for retina