Skip to content
GenSVGGenSVG

Free SVG utility

SVG Color Replacer

Paste an SVG and instantly replace any color in it.

  • Processes locally
  • No account required
  • Export without a watermark

SVG Color Replacer

SVG input
Live previewsanitized

SVG · 339 B

Why this tool exists

A focused workflow, without the design-app overhead

Recoloring an icon should not require opening a full design file. This tool reads the colors already used in your SVG, lets you replace them precisely, and keeps the original geometry intact.

Useful for

  • Adapting an icon set to a brand palette
  • Creating hover, active, and dark-mode variants
  • Fixing hard-coded fills before shipping a component

How to use it

From input to finished asset

  1. 01

    Add your SVG

    Drop a file, paste SVG markup, or start with the example already in the editor.

  2. 02

    Map the colors

    Choose a detected source color and set its replacement. Add more mappings when the artwork has a larger palette.

  3. 03

    Export the result

    Check the live preview, then copy clean SVG markup or download a new file.

Geometry stays untouched

The tool changes matching fill and stroke values. Paths, groups, viewBox, transforms, and element order remain as supplied.

Exact color matching

Replacement is case-insensitive for hex values and only targets the source colors you select.

Useful for component libraries

Swap exported design colors for currentColor or a shared token before adding the asset to a React or CSS workflow.

Private by default

Color replacement runs locally in your browser. The SVG is not uploaded to GenSVG.

Keep working

Related tools

SVG Optimizer

Optimize and clean SVG files online for free. Remove comments, XML declarations, and extra whitespace to shrink markup without changing the design.

SVG to JSX Converter

Convert SVG code to JSX for React online for free. Turn any SVG into a React component with camelCase attributes, ready to paste.

SVG to Data URI / Base64 Converter

Convert SVG to a data URI or base64 string online for free. Embed SVGs directly in CSS, img tags, and HTML without a separate file.

Good to know

Common questions

How do I change the color of an SVG file?+

Paste your SVG into the tool, pick the color you want to replace and the new color, then copy the updated SVG code or download the file.

Can I recolor multiple colors at once?+

Yes. You can add multiple replace pairs — each pair swaps one source color for a new color across the whole SVG.

Do I need to upload my file to use SVG Color Replacer?+

No. This tool runs in your browser, so your SVG stays in the current tab and is not uploaded to GenSVG.

Can I use the exported SVG in a commercial project?+

The tool does not add a watermark or a new license. Your right to use the result depends on the license and ownership of the source artwork you provide.