How to change the colors of an SVG

Where SVG colors live

Colors appear in a few places, and a file often mixes them:

• fill and stroke attributes on shapes: <path fill="#1e293b" />
• inline styles: <path style="fill:#1e293b" />
• stop-color on the <stop>s of a gradient
• rules in a <style> block, usually on classes: .cls-1 { fill: #1e293b; }

A shape with no fill of its own inherits one from its parent <g>, and defaults to black if nothing sets it.

1. Replace the colors in the markup

For a one-off change, replace each color value wherever it appears. With a code editor, search for the hex value and replace it everywhere; remember to check gradient stops and <style> rules, not only fill attributes.

The quickest route is a recolor tool that lists every color in the file and lets you pick a replacement for each, leaving everything else untouched.

2. Make the icon follow the text color with currentColor

For icons on a website, set the color to currentColor. The SVG then paints with the CSS color of the element it sits in, so it changes with hover states, themes and dark mode:

<button class="text-blue-600 hover:text-blue-800">
  <svg viewBox="0 0 24 24" width="20" height="20">
    <path fill="currentColor" d="M12 2 2 22h20L12 2z" />
  </svg>
  Warning
</button>

This only works when the SVG is inline in the page (or a React component). An SVG loaded through <img> or a CSS background can't see the page's styles.

3. Override colors with CSS

Inline SVGs can also be recolored from your stylesheet. CSS beats presentation attributes like fill="…", but not inline style="…" declarations:

.logo path { fill: #0f766e; }
.logo .accent { fill: #f59e0b; }

Recoloring a whole illustration

For multi-color artwork, work from its palette rather than shape by shape: list the colors it uses, decide the new palette, then map old to new. That keeps shades that were meant to match still matching.