rankato

Recolor SVGs without opening a design tool

Pick colors from your SVG with an eyedropper, replace them with new colors, or strip them entirely for CSS-based theming. Batch across your whole icon set.

Source
Colors found (3)
#3b82f6×1
#1e40af×1
#ef4444×1
Preview

Recoloring icons one by one in a design tool is tedious — you open each file, select each fill, pick a new color, save. The Rankato SVG Color Changer does the same thing in bulk: drop your icons, use the eyedropper to select any color present in the SVGs, and pick a replacement. The tool finds every fill and stroke matching that color across all files and swaps it. It's perfect for adapting an icon set to a new brand palette or converting a hard-coded set to currentColor for CSS theming.

How color detection works

The tool parses every SVG for fill="…", stroke="…", inline style declarations, and colors inside <style> blocks. Colors are normalized to lowercase hex (rgb(255, 0, 0), #F00, and red all become #ff0000) so a single palette entry catches every representation of the same color. The color list on the left panel shows every unique color in your batch with a swatch and a count of how many uses.

Eyedropper and palette import

Three ways to specify replacement colors: (1) Click a swatch in the color list and pick a new color from the color picker. (2) Use the eyedropper to sample any pixel on the canvas. (3) Import a palette — Coolors, Adobe Color, or a custom hex list — and drag each source color onto a palette entry to map. Palette import is the fastest way to rebrand an icon set to a new visual identity.

currentColor conversion

The Convert to currentColor preset finds all fills and strokes that share the icon's dominant color and replaces them with currentColor. That makes the icon themeable via CSS color property — critical for dark mode, hover states, and accent-color theming. The preset auto-detects the dominant color per file, so a batch of icons with slightly different exports still gets normalized.

Preview before commit

Every color swap is previewed live on the canvas. Toggle individual files in the sidebar to see how the swap affects each one. If a swap looks wrong on one specific file (rare, but happens when a file uses a color as both a fill and as part of a gradient stop), you can override that file to keep its original colors.

Batch export

Once you're happy, hit Export all for a ZIP with every recolored SVG (filenames unchanged). Or export as a JSON lookup of filename → data URI for embedding into a JS module. If you use the SVG Icon Generator downstream, the recolored SVGs slot straight in.

Tool FAQs

Everything you need to know about using SVG Color Changer.

Can I swap colors defined inside a <style> block?+

Yes — the tool parses CSS inside <style> as well as inline attributes. Named colors, hex, rgb(), and hsl() are all recognized and swapped.

Does it handle gradients?+

Yes for stop-color values inside gradients; those show up in the color list and can be swapped like any other color. Gradient direction, opacity, and interpolation are preserved.

Will the tool change my SVG structure?+

No — only color values change. Every element, attribute, and comment is preserved. The output is a semantic diff of colors only.

Can I use this to make monochrome versions of a multi-color icon?+

Yes — pick every color in the palette and map them all to the same target. The tool warns before you commit a change that maps distinct colors to the same target (in case you didn't mean to).

Is currentColor conversion reversible?+

Only if you have the original files. The tool doesn't preserve the pre-conversion color internally — save the originals before running currentColor conversion.