How do I make an SVG icon monochrome online?

Click Make monochrome. Distinct hex fills become currentColor so CSS color sets the ink.

How is monochrome different from fill → currentColor on a few paths?

Monochrome is the icon intent: every solid fill (and typical stroke) becomes one ink. The currentColor style page is a fill-only rewrite.

Yes. fill="none" is kept so compound icons do not flood.

Yes. Set color on the parent. The icon inherits through currentColor.

FAQ

Quick answers

How do I make an SVG icon monochrome online?: Click Make monochrome. Distinct hex fills become currentColor so CSS color sets the ink.
How is monochrome different from fill → currentColor on a few paths?: Monochrome is the icon intent: every solid fill (and typical stroke) becomes one ink. The currentColor style page is a fill-only rewrite.
Do holes and fill=none stay open?: Yes. fill="none" is kept so compound icons do not flood.
Can I recolor the monochrome icon in CSS?: Yes. Set color on the parent. The icon inherits through currentColor.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B