Skip to SVG icon customizer

SVG Icon Customizer — Change SVG Colors, Size & Stroke Online

Change SVG colors online for free. Upload an SVG or paste its code, edit fill and stroke, resize, adjust stroke width, preview the result, then copy or download the customized SVG. Everything runs in your browser.

SVG color changer

Drag and drop an .svg file here. Files stay in your browser.

Detected colors

Load an SVG to list fill, stroke, and stop colors.

Advanced controls
Preview background

Live preview

Upload or paste an SVG to preview it here. Nothing is sent to a server.

Your SVG is processed locally in your browser and is not uploaded by this tool.

Advertisement

Change SVG colors online

Upload an SVG or paste its markup, recolor fills and strokes, resize, and change stroke width. The preview updates in the browser. Copy the code or download SVG or PNG. The file is not uploaded by this tool.

What is an SVG icon customizer?

An SVG icon customizer edits vector markup you already have. It changes paint and size attributes so the same path can be blue in one product and currentColor in another. It is not a drawing program and it does not invent new shapes.

How to change an SVG color online

  1. Upload an .svg file, paste markup, or load a sample.
  2. Pick a detected color, or set fill and stroke separately.
  3. Adjust size and stroke width if the icon needs it.
  4. Preview original and customized, then copy or download.

What you can customize in an SVG icon

Change SVG fill color

Fill is the inside paint. A detected swatch replaces every matching fill, including colors hidden in style attributes. Gradient url(#id) fills are left intact; their stop colors appear as separate swatches.

Change SVG stroke color

Stroke is the outline paint. You can recolor strokes without touching fills, which is what most outline icon sets need.

Adjust SVG stroke width

Stroke width is line thickness in viewBox units, not CSS pixels. Dropping 2 to 1.5 is common when you shrink a 24px icon into a 16px slot.

Resize an SVG icon

Width and height change the rendered size. viewBox stays put so the drawing does not stretch when aspect lock is on.

Convert SVG colors to currentColor

Convert to currentColor replaces solid fills and/or strokes with currentColor. The icon then inherits CSS color. After that, convert SVG to JSX for React.

How SVG fill, stroke and viewBox work

  • fill — inside paint
  • stroke — outline paint
  • stroke-width — line thickness
  • width/height — rendered dimensions
  • viewBox — coordinate system
  • currentColor — inherited CSS color
  • gradient stop — one color inside a gradient
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
  <circle cx="12" cy="12" r="9" />
</svg>

Common SVG color problems and fixes

If an icon will not change color, the paint is usually hardcoded on a child, stuck in a style attribute, or coming from a gradient stop. CSS fill on a parent cannot override a child fill="#000". Recolor those values here, or convert them to currentColor.

External image SVGs referenced as <img src="icon.svg"> also ignore page CSS. Inline the customized markup, or keep currentColor and set color on the inline SVG. After you pick a fill, check color contrast against the background.

Real SVG icon customization examples

Black fill to blue fill

Before

<path fill="#111827" d="..." />

After

<path fill="#2563eb" d="..." />

Replace the detected black swatch. Paths, viewBox, and transforms stay in place.

Stroke color only

Before

<circle fill="none" stroke="#111827" stroke-width="2" />

After

<circle fill="none" stroke="#ef4444" stroke-width="2" />

Use stroke color or the stroke swatch. Fill none is left alone.

Stroke width 2 to 1.5

Before

stroke-width="2"

After

stroke-width="1.5"

Thinner strokes sit better at 16px and 20px UI sizes.

24×24 to 48×48

Before

width="24" height="24" viewBox="0 0 24 24"

After

width="48" height="48" viewBox="0 0 24 24"

The coordinate system stays 24×24, so the icon scales without distortion.

Fixed color to currentColor

Before

fill="#111827"

After

fill="currentColor"

The icon then follows CSS color, Tailwind text-* classes, or a React color prop.

SVG icon customizer for React, HTML and CSS

In HTML, paste the inline SVG and set color on the element or a parent when the icon uses currentColor. In React, pass className or a color prop after converting the markup. In Tailwind, text-blue-600 drives currentColor. Need a backdrop for the icon button? Generate CSS gradients, create border radius values, or generate box shadows.

<span class="text-blue-600">
  <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">...</svg>
</span>

Common SVG icon mistakes

  1. Missing viewBox, so resize distorts or clips.
  2. Fixed child fills that CSS cannot override.
  3. Inline style fills that a root-only editor never reaches.
  4. stroke="none" while you keep changing stroke color.
  5. A stroke width that is too heavy at small sizes.
  6. Fixed width and height with no viewBox.
  7. Expecting currentColor to work on an SVG loaded as an external image.
  8. Treating a photo exported as SVG like a simple icon path.

When the mark is ready for a browser tab, create a favicon.

Frequently asked questions

What is an SVG icon customizer?

It edits SVG markup you already have. You can recolor fills and strokes, change stroke width, resize, convert paints to currentColor, then copy or download the result.

How do I change an SVG color online?

Load the SVG, click a detected color or set fill/stroke, and preview the change. Copy the code or download the file. Processing stays in the browser.

How do I recolor an SVG file?

Upload the .svg file. Matching fill, stroke, style, and gradient-stop colors appear as swatches. Change a swatch to replace every matching occurrence.

Can I change SVG fill and stroke separately?

Yes. Fill and stroke have their own controls, and swatches list whether a color was used as fill, stroke, or a gradient stop.

How do I change SVG stroke width?

Use the stroke width field. The value is in viewBox units. Existing stroke-width attributes and style declarations are updated.

Can I resize an SVG without losing quality?

Yes. Vectors do not pixelate. This tool changes width and height and keeps the viewBox, so the paths are not distorted when aspect lock is on.

Why won't my SVG change color?

Child fills, inline styles, and gradient stops override parent CSS. Recolor those values here, or convert them to currentColor. An SVG loaded as an <img> also ignores page CSS.

What is currentColor in SVG?

currentColor makes fill or stroke use the CSS color of the element. That is how Tailwind text-* classes and React color props theme inline icons.

Can I edit an SVG without installing software?

Yes. This page runs in a browser. It customizes icons; it does not draw new shapes from scratch.

Is this SVG editor browser-based?

Yes. Recoloring, resizing, preview, copy, and download all run locally in your browser.

Does EverydayTools upload my SVG?

Your SVG is processed locally in your browser and is not uploaded by this tool.

Can I copy the customized SVG code?

Yes. Copy SVG copies the customized markup. You can also download SVG or a PNG snapshot of the preview.