Tinker Tools

Icon Color Changer Instantly

Change the color of your SVG or PNG icons in seconds. All processing is done locally in your browser—your files never leave your device.

Preview

Drop your icon here or click to browse

Supports SVG and PNG files

How it works

1. Upload Icon

Drag and drop or click to upload an SVG or PNG icon file. Your file is processed locally and never leaves your device.

100% Private

2. Pick a Color

Use the color picker, enter a hex code, or click a preset color. SVG fill/stroke attributes and PNG pixel colors will be changed to your chosen color.

Precise Control

3. Download Result

Compare the original and recolored icons side by side, then download the result. SVG files stay as SVG; PNG files are re-encoded as PNG.

Before & After

What Does This Icon Color Changer Do?

This tool recolors a single icon to one color of your choosing. Upload an SVG or a PNG, pick a target color with the picker, a hex field, or one of ten presets, and the tool rewrites the icon in that color while leaving its shape and transparency intact. Original and result sit side by side on a checkerboard background so you can confirm the outcome before downloading.

The two file types take different paths. For an SVG, the markup itself is edited: every fill and stroke attribute that is not set to none is replaced with your color, and the same substitution is applied to fill and stroke declarations inside style attributes. The output is still an SVG, so it stays resolution-independent and there is no quality loss at all. For a PNG, the image is drawn to a canvas and every pixel with a non-zero alpha value has its red, green, and blue channels overwritten with your color. The alpha channel is copied through untouched, which is what preserves both the transparent background and the soft anti-aliased edges of the artwork.

One color is applied to the whole icon, and that is the deliberate scope of the tool. It is built for the common case of a single-color glyph that needs to match a different brand or state color. It does not let you assign different colors to individual paths, convert hardcoded values to the currentColor keyword, measure contrast ratios, simulate color vision deficiencies, or generate CSS filter chains. Everything happens in your browser through JavaScript and the Canvas API, so the file is never uploaded.

Key Features and Benefits

  • SVG and PNG in one tool — Vector and raster icons are both handled, each with the technique appropriate to it. SVG output stays vector and scales cleanly to any size; PNG output is re-encoded at the source image's original pixel dimensions.
  • Transparency preserved exactly — Elements set to fill="none" or stroke="none" in an SVG are left alone, so open shapes stay open. In a PNG, every pixel keeps its original alpha value, which means transparent backgrounds survive and edges stay smoothly anti-aliased instead of turning jagged.
  • Three ways to choose a color — Use the native color picker for visual selection, type or paste a six-digit hex code when you are matching a specific brand value, or click one of ten preset swatches covering black, white, and the common interface hues. The hex field validates as you type and flags a malformed value immediately.
  • Before and after comparison — The original and recolored versions are shown stacked on a transparency checkerboard, with the applied hex value labelled above the result. Comparing them directly catches the cases where a recolor went wrong, such as an icon that turns out to have had a light background baked into it.
  • Named download output — The result downloads with a -recolored suffix appended to the original filename, keeping the source extension. An SVG stays an SVG and a PNG stays a PNG, so nothing overwrites your original asset by accident.
  • Entirely local processing — SVG markup is read and rewritten in the browser, and PNG pixels are processed on a canvas element in the page. No file is uploaded, stored, or transmitted at any point in the workflow.

How to Change the Color of an Icon

  1. 1

    Upload an SVG or PNG icon

    Drag the file onto the upload area or click to browse. Other formats are ignored, so convert a JPEG or WebP icon to PNG first if that is what you have. Once loaded, the sidebar reports the filename, the detected type, and the icon's dimensions.

  2. 2

    Choose your target color

    Open the color picker, enter a hex code in the text field, or click a preset. Hex input accepts values with or without the leading hash and validates against the six-digit RRGGBB format. Matching an exact brand color is the main reason to type the value rather than pick it visually.

  3. 3

    Apply the recolor

    Press Change Color. An SVG is rewritten and re-rendered essentially instantly. A PNG is redrawn to a canvas, has every visible pixel rewritten, and is re-encoded, which takes a moment longer on a large image but is still fast at typical icon sizes.

  4. 4

    Check the result before saving

    Compare the two previews. Pay particular attention to multi-color icons, which will flatten into a single color, and to SVGs that use gradients or reference other elements for their fill, since those references are replaced by the flat color too. If the result is not what you wanted, pick a different color and apply again, or reset and start over.

  5. 5

    Download the recolored icon

    Save the file with the Download button. It arrives named after your original with a -recolored suffix. Drop it into your project alongside the source asset so you can regenerate a different color later without hunting for the original.

Expert Tips for Icon Color Management

Recolor SVG rather than PNG whenever you have the choice. An SVG is edited as text, so the output is byte-for-byte a vector file that stays crisp at any size and on any display density. A PNG has to be decoded, rewritten pixel by pixel, and re-encoded, and while alpha preservation keeps the edges clean, you are still locked to the pixel dimensions of whatever source you started with. If a design hands you only a PNG for something that will appear at multiple sizes, it is worth asking for the vector before recoloring the raster.

This tool applies one flat color, which makes it a poor fit for icons with more than one meaningful color and a good fit for the single-glyph icons that make up most interface icon sets. A two-tone logo run through it comes out as a silhouette. That is exactly right when you need a monochrome variant of a multi-color mark, and exactly wrong when you meant to change only one of its colors — that edit belongs in a vector editor where you can target individual paths.

For icons that will live inside a web application, consider whether a build-time recolor is the right approach at all. An SVG authored with fill="currentColor" inherits the CSS color of whatever element contains it, so one file serves every state and both light and dark themes without producing a separate asset per color. Generating fixed-color files here is the better path when the icon is going somewhere CSS cannot reach it: an email template, a README, a slide deck, a marketing export, or a third-party platform that only accepts a static image.

Related Tools

Color Converter

Turn an RGB or HSL brand value into the hex code this tool expects

Color Contrast Checker

Confirm your chosen icon color is visible against the background it will sit on

Icon Converter

Render your recolored icon as PNGs at standard favicon and app icon sizes

Recoloring an icon sounds trivial until you are doing it for the twelfth time across a dark theme, an email template, and a partner's brand guidelines. This tool covers that job directly: one file in, one color applied, transparency intact, nothing uploaded. Pair it with the color converter when your brand value is stored in a different notation, the contrast checker when the icon needs to stay visible against a specific background, and the icon converter when the recolored result needs to ship at several fixed sizes.

Frequently Asked Questions

Recommended Tools

Image Resizer

Resize images instantly in your browser. Adjust width, height, and format with aspect ratio lock.

Image Compressor

Compress images with adjustable quality. Reduce file size while preserving visual quality.

Color Converter

Convert colors between HEX, RGB, HSL, and HSB formats with a live color preview.