Overview
Introduction
This tool recolors an icon by swapping one specific color for another, entirely in your browser, using an adjustable tolerance to catch anti-aliased near-matches.
It's designed for quickly retinting a single-color or flat-color icon without needing a full image editor.
What Is Icon Colors Changer?
A client-side color-replacement tool: it reads an icon's pixel data, measures how close each pixel's RGB value is to a source color you specify, and overwrites the RGB channels of close-enough pixels with a target color.
Alpha and non-matching pixels pass through completely unchanged.
How Icon Colors Changer Works
For every pixel, the tool computes the Euclidean distance in RGB space between that pixel and the source color, then squares both values to avoid a costly square root per pixel.
If the squared distance is within the squared tolerance you set, the pixel's red, green, and blue channels are overwritten with the target color's values; otherwise the pixel is left untouched.
When To Use Icon Colors Changer
Use it to match an icon's color to your brand palette, or to quickly generate colored variants of the same icon for different UI states.
It's also useful for correcting a single wrong shade in an otherwise-finished icon.
Often used alongside Transparent Icon Maker and Icon Colors Extractor.
Features
Advantages
- Runs entirely client-side; your icon is never uploaded to a server.
- Tolerance-based matching catches anti-aliased edge pixels, not just exact color matches.
- Non-matching pixels and alpha values are always preserved exactly.
Limitations
- Only recolors pixels near a single target hue — multi-color icons need one pass per color you want to change.
- A tolerance set too high can bleed the color swap into unrelated shades that happen to sit nearby in RGB space.
Examples
Best Practices & Notes
Best Practices
- Use the Icon Colors Extractor tool first to find the icon's exact dominant hex value before choosing a source color.
- Start with a low tolerance and preview the result before increasing it, to avoid recoloring unrelated pixels.
Developer Notes
changeIconColors is a thin wrap around the existing changePngColors function from png-colors-changer.ts — the same Euclidean-distance RGB matching and replacement math, just re-exported under an icon-focused name, since an icon is simply a PNG once decoded into a PixelBuffer.
Icon Colors Changer Use Cases
- Matching an icon's accent color to a brand palette
- Generating colored variants of the same icon for hover/active UI states
- Fixing a single incorrect color in an otherwise-finished icon
Common Mistakes
- Setting tolerance too high and unintentionally recoloring pixels of a different, nearby hue.
- Forgetting that multiple distinct colors in an icon each need their own separate recolor pass.
Tips
- Sample the exact source hex value from a solid area of the icon rather than guessing, for the most accurate match.
- Chain multiple passes of this tool if an icon has more than one color to change.