How do I remove SVG fill?

Click Remove fill. Every shape with a real fill (hex, name, or url(#gradient)) gets fill="none". Strokes, stroke-width, and clipPath stay.

How is remove fill different from convert fill to stroke?

Fill → stroke copies the old fill onto stroke and then clears fill, so you get an outline in the fill’s color. This page only clears fill; it does not invent or recolor a stroke.

Does this set fills to currentColor for theming?

No. Remove Hardcoded Fill From SVG Paths and Fill → currentColor write currentColor so CSS color can theme the icon. This page makes the fill actually gone.

Do strokes stay after the fill is removed?

Yes. A shape that had fill and stroke becomes an outline. A fill-only shape with no stroke will vanish visually until you add a stroke.

Remove SVG Fill — Free Tool

FAQ

Quick answers

How do I remove SVG fill?: Click Remove fill. Every shape with a real fill (hex, name, or url(#gradient)) gets fill="none". Strokes, stroke-width, and clipPath stay.
How is remove fill different from convert fill to stroke?: Fill → stroke copies the old fill onto stroke and then clears fill, so you get an outline in the fill’s color. This page only clears fill; it does not invent or recolor a stroke.
Does this set fills to currentColor for theming?: No. Remove Hardcoded Fill From SVG Paths and Fill → currentColor write currentColor so CSS color can theme the icon. This page makes the fill actually gone.
Do strokes stay after the fill is removed?: Yes. A shape that had fill and stroke becomes an outline. A fill-only shape with no stroke will vanish visually until you add a stroke.

Set opacity → Fill → stroke → Hardcoded fills → currentColor → Fill → currentColor →

Privacy Terms

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B

Remove SVG Fill

Live preview