Turn black icons white, match a logo to your brand color or give a set of icons a gradient. The shape and its smooth transparent edges are kept exactly; only the color changes. Recolor a whole batch at once in your browser.
Last updated:
3 sample icons
Dark parts take the new color, light parts (like a white symbol inside a dark badge) stay light.
For JPGs or flat PNGs of a dark icon on white: the white becomes transparent with smooth edges.
Advertisement
Advertisement
How to use the Recolor PNG Icon
Add your icons: drop PNG, SVG or JPG files, paste from the clipboard or press Choose icons. Three sample icons are loaded so you can try it first.
Pick the new color: type a hex code, use the picker or click a swatch. Switch to Gradient for a two-color fill.
Fine-tune: keep light inner details, set opacity and choose an output size.
Check the preview on a checkerboard, white or dark background to make sure the icon reads well.
Download each PNG or press Download all as ZIP.
How icon recoloring works
A PNG icon stores four values per pixel: red, green, blue and alpha (opacity). In a single-color icon the shape is really defined by the alpha channel: the inside is opaque, the background is fully transparent and the anti-aliased edge pixels sit in between. This tool keeps the alpha value of every pixel and replaces only the red, green and blue values with your chosen color, so the silhouette and its smooth edges stay pixel-perfect.
For a gradient, each pixel's position inside the icon's visible bounding box decides how far along the gradient it is: for a linear gradient that is the distance along the chosen angle, for a radial gradient the distance from the center. Opaque images without transparency are first converted using the darkness of each pixel as its opacity: alpha = (background brightness − pixel brightness) ÷ (background brightness − darkest ink).
Common icon colors
Use
Typical color
Hex
Icons on a dark header or button
White
#ffffff
Body text icons on a light page
Near black
#1f2937
Disabled or secondary icons
Medium gray
#6b7280
Success, confirmation
Green
#16a34a
Error, delete actions
Red
#dc2626
Warnings
Amber
#d97706
Links and info
Blue
#2563eb
These are common choices, not a standard; always use your own brand palette when you have one.
Tips for clean results
Start from the largest version of the icon you have and pick a smaller output size; downscaling keeps edges crisp, upscaling makes them soft.
Check contrast on both the white and the dark preview background. Small UI icons should reach at least a 3:1 contrast ratio with their background to stay recognizable.
For a JPG icon with a gray or tinted background, remove the background first with the Make Image Transparent tool, then recolor it here.
Recolor a whole icon set in one batch so every file gets exactly the same hex value.
Frequently asked questions
How do I change the color of a PNG icon?
Add the PNG to the tool and choose a new color. Every visible pixel is painted with that color while its transparency (alpha) is kept, so the outline and anti-aliased edges look exactly as before. Then download the new PNG.
Will the transparent background stay transparent?
Yes. Fully transparent pixels stay transparent and semi-transparent edge pixels keep their original opacity, so the recolored icon still blends smoothly onto any background.
Can I recolor an icon that has a white background?
Yes. If the image has no transparency, as with most JPGs, the tool treats the light background as empty space and turns it transparent, using the darkness of each pixel as its opacity. This works best for dark icons on a white or very light background.
What does Keep light inner details do?
Some icons combine a dark shape with lighter details, such as a white check mark inside a black circle. With this option on, the dark parts get the new color and the lighter parts stay light, so the detail does not disappear. Turn it off to flood the whole shape with one color.
Does this work for multi-color logos?
It is designed for single-color icons and logos. A multi-color logo becomes one color (or one gradient) with its shape kept, which is useful for monochrome versions. To swap just one of several colors, use the Replace Color in Image tool instead.
Can I recolor SVG icons?
Yes. SVG files are rendered at 512 pixels or more and saved as PNG. If you need the result as an SVG, it is usually easier to change the fill attribute in the SVG code itself.
Are my icons uploaded to a server?
No. All recoloring happens with the canvas API inside your browser, so your files never leave your device and the tool keeps working offline once loaded.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.