How to Change SVG Colors – Every Method

Recoloring an SVG is a one-attribute edit – when you’re editing in the right place. The confusion (and the eternally-asked “why won’t my CSS change the SVG color?”) comes from there being three different places color can live. Master the three and recoloring becomes trivial.

Method 1: Edit the file’s fill attributes

Color in an SVG is literally written in the markup:

<path d="M3 9l9-7 9 7v11..." fill="#171717" stroke="#0070f3"/>

Change fill and stroke values, and the shape recolors – permanently, everywhere the file is used. Do it by hand in any text editor, or visually in our color editor (paste the SVG, pick colors with live preview, export – it speaks HEX and Tailwind tokens both).

Multi-color graphics have one fill per shape; recoloring means updating each. Watch for two complications:

• CSS-styled SVGs: some files put color in a <style> block or class instead of attributes. Either edit the CSS rule, or normalize styles to attributes (our optimizer does this) – required anyway for platforms like Cricut and Canva that ignore SVG CSS.
• No fill at all: shapes with no fill attribute render black by default. That’s why downloaded icons are so often black – they’re meant to be recolored. (Black SVG troubleshooting.)

Use when: the change is permanent, the file goes to other tools/platforms, or there’s no CSS context (uploads, cut files, email).

Method 2: Style inline SVG with CSS

If the SVG markup is pasted directly into your HTML (not referenced as an image), CSS reaches every shape inside it:

.logo path { fill: #0070f3; }
.icon { fill: #888; }
.icon:hover { fill: #171717; }

Now the same file renders in different colors per context – themes, hover states, dark mode – without duplicate assets.

The trap everyone hits: this does not work for <img src="icon.svg">. An img-loaded SVG is an isolated document; page CSS cannot cross that boundary, full stop. If you need CSS control, inline the markup (or use Method 1 to bake the color in).

Use when: the SVG is inline on your own site and the color should respond to state or theme.

Method 3: currentColor – the icon system trick

The special value currentColor makes SVG parts inherit the CSS color property from their surroundings:

<svg fill="currentColor">…</svg>

button { color: white; }
button.danger { color: #ee0000; }

One icon file now automatically matches the text color of every button, link, and menu it sits in – no per-context variants, no CSS targeting SVG internals. This is how professional icon systems work, and it’s one find-and-replace to enable: change the fill (or stroke, for outline icons) to currentColor in the code editor.

Use when: building reusable icons for a codebase. Every icon in our free catalog exports cleanly into this pattern.

Choosing in five seconds

Situation	Method
Permanent recolor, file used anywhere	1 – edit the fill
Upload to Canva/Cricut/etc.	1 – attributes only (platforms ignore CSS)
Theme/hover/dark-mode variation on your site	2 – inline + CSS
Reusable UI icons	3 – currentColor
Gradient recolors	1 – edit the gradient’s stop colors in code

One last honesty note: recoloring traced images with many near-duplicate shades (auto-traced photos) is tedious by any method – consider re-tracing with fewer colors instead (how tracing works). For everything designed, color is exactly one attribute away.