SVG Color Changer
Replace any color in an SVG file with a new value — instantly preview changes and download the updated SVG.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
How to Change SVG Colors
SVG colors are text values in the file — they're easy to find and replace.
- Text editor: Ctrl+H → find fill='#oldcolor' → replace with fill='#newcolor'
- SVGO plugin: use the cleanupIds and convertColors plugins to normalize color formats
- Inkscape: Edit > Find/Replace → search attribute 'fill' → replace value
- Figma: import SVG, recolor in Figma's UI, export new SVG
- Online SVG editor: drag-drop SVG, click a color region, change the color, download
Batch Color Replacement in SVG
Replacing colors across many SVG files at once.
- bash + sed: sed -i 's/#FF0000/#4F46E5/g' *.svg replaces red with indigo across all SVGs
- Node.js: fs.readFileSync + .replace(/#oldcolor/gi, '#newcolor') then write back
- Design system migration: replace all instances of a deprecated brand color
- Dark mode generation: create a dark-theme SVG variant by swapping all fill colors
Frequently Asked Questions
How do I change all instances of a color in SVG?
Open SVG in a text editor. Ctrl+H (Find & Replace). Search for #OldColor, replace with #NewColor. SVG color values may use hex, rgb(), or named colors — check all formats.
Can I change SVG colors without editing code?
Yes — open in Inkscape, click a path, change the fill in the Fill and Stroke panel. Or import into Figma, select paths, and change fill with the color picker.
How do I change SVG icon color to match my brand?
If the icon uses fill='currentColor': set CSS color property on the SVG element. If it uses hardcoded hex: find and replace in a text editor or use an SVG color changer tool.
Can I make an SVG use CSS variables for colors?
Yes — replace hardcoded fill='#4F46E5' with fill='var(--brand-color, #4F46E5)'. Add :root { --brand-color: #4F46E5; } to your CSS. The SVG color now respects the CSS variable (only works for inline SVG).
How do I create a grayscale version of an SVG?
Apply an SVG filter: <filter id='gray'><feColorMatrix type='saturate' values='0'/></filter>. Or manually replace all hex color fills with their grayscale equivalents.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Convert Image to SVG — Free