Change SVG Color

How to change the color of an SVG

1. Load your SVG. Click Upload SVG, drop a file on the preview, or choose Paste code and paste the markup. You can also press Ctrl+V (Cmd+V on a Mac) anywhere on the page with SVG code copied.
2. Change a color. Each swatch under Colors is one color used in the file. Pick a new value and every shape that uses it updates.
3. Or recolor everything at once. Choose a palette style and click Apply palette. Click again for a different palette. Colors are matched from dark to light, so outlines stay darker than fills and the artwork keeps its shading.
4. Go back if you need to. The arrows undo and redo, and Original colors restores the file as you loaded it. Copy copies every current hex code.
5. Download. Download SVG keeps the vector file with your new colors. Download PNG saves a raster image with a transparent background.

Which colors the tool can change

The tool reads colors from the places SVG files usually keep them:

• fill and stroke attributes, including gradient stop-color values
• inline style attributes, such as style="fill:#ff0000"
• rules inside a <style> block in the file
• currentColor, which icon sets like Heroicons and Lucide use; it is treated as black, as it renders in a standalone file
• shapes with no fill set at all, which render black by default

It cannot change colors inside embedded photos or bitmaps, or colors that come from a stylesheet outside the file. If a swatch you expect is missing, the color is probably set in one of those places.

How to change SVG color with CSS

If the SVG is inline in your HTML, you can recolor it with CSS instead of editing the file. Set fill (and stroke for outlined icons) on the shapes:

.icon path {
  fill: #2563eb;
}

For icons that should match the text around them, set the shapes to fill="currentColor" once. After that, the icon takes the CSS color of its parent, which makes hover and dark mode colors easy:

<button class="like">
  <svg viewBox="0 0 24 24" width="24" height="24"><path fill="currentColor" d="..."/></svg>
  Like
</button>

.like { color: #6b7280; }
.like:hover { color: #e11d48; }

CSS on the page cannot reach inside an SVG loaded with <img> or as a background-image. For those, change the colors in the file itself with the tool above, or use the SVG as a CSS mask-image and set its color with background-color.

Find colors for your SVG

Need a starting point? Build a scheme in the color palette generator, browse ready-made color palettes, or pick matching hues on the color wheel. Paste the hex codes into the swatches above.

---

Found an SVG the tool cannot recolor? Send it to us through the contact form.