All SVG Icons LogoAll SVG Icons

Free SVG Color Editor Online

Paste SVG code, remap fill and stroke colors, and preview the change instantly — no design tool, no upload.

Paste valid SVG markup to render a preview.

Color controls

Load example

A real SVG color changer, not a filter

Searches for svg color changer, change svg color online, and svg recolor usually come from someone who has a specific icon or logo and needs it in a specific color, right now, without opening Illustrator or Figma. This tool reads the actual fill and stroke attributes in your SVG markup and rewrites them directly, so the color change is baked into the file you copy or download.

How color detection works

Every distinct fill and stroke color in the pasted SVG is listed separately, with a count of how many elements use it.
Remap individual colors one at a time — useful for duotone icons, flags, and multi-color illustrations.
Or flip on a global override to force every fill (or every stroke) to one new color in a single click.

When to bake in a color vs. use CSS

If an icon needs to change color at runtime — on hover, in dark mode, or per theme — the better long-term approach is CSS with fill: currentColor, covered in the SVG icon color with CSS guide. This tool is for the other, more common case: you know the final color you want, and you want it saved directly into the SVG file, for a logo upload, a static export, or an icon that will never need to change color again.

Common use cases

Match a brand color

Recolor a stock or generated icon to your exact brand hex before shipping it.

Fix a black-only export

Many icon exports default to black or a single fill. Recolor once instead of editing source files.

Prep icons for dark backgrounds

Swap a dark fill for a light one (or vice versa) before dropping an icon onto a colored background.

Multi-color logo tweaks

Remap two or three specific colors in a logo without touching the rest of the artwork.

Stroke-only icon adjustments

Change stroke color and weight together for line-style icon sets.

Quick before/after check

Toggle between original and recolored preview to confirm nothing else in the SVG changed.

Related tools

Clean up an SVG's markup with the SVG optimizer before or after recoloring it, convert the result into a React/JSX component or a PNG, preview it in the SVG viewer, or browse icon collections for source icons to recolor.

Frequently Asked Questions

Paste the SVG markup into this tool. It detects every fill and stroke color used in the file and lets you remap each one to a new color, or switch on a global override to recolor the whole icon at once.

Both, independently. Fill and stroke each have their own detected-color list and their own global override toggle, so you can change fill color without touching stroke color, or vice versa.

Elements with fill="none" or stroke="none" are left alone on purpose, since that usually means the shape is intentionally invisible or stroke-only. If a color still won't change, it may be set via a CSS class or inline style attribute rather than a fill/stroke attribute — those aren't rewritten by this tool.

It depends on the use case. CSS (fill: currentColor plus a color property) is best when an icon needs to change color dynamically at runtime — see the guide to changing SVG icon color with CSS. This tool is best when you want to bake a specific, final color into the SVG file itself, for example before uploading a logo or exporting a static asset.

No. Color detection and recoloring both run in your browser using the DOM SVG parser. Pasted markup never leaves your device.

Yes. Multi-color icons (duotone, flag-style, or illustration-style SVGs) show every distinct color they use, so you can remap each one independently instead of forcing the whole icon to a single color.