Staaarter Tools

Icon Background Changer

Uploads an icon PNG and swaps its existing solid-color background for a new one: it first keys out the old background color to transparency, then flattens the result onto the new background color, giving you a recolored backdrop in a single pass. A free online tool from Staaarter, right in your browser.

Runs locallyUpdated 2026-07-27
editorimagecanvaspng

Overview

Introduction

This tool changes an icon's solid background from one color to another in a single pass, entirely in your browser.

It's built by chaining two already-shipped operations rather than inventing new pixel math: background removal followed by background flattening.

What Is Icon Background Changer?

A composition tool: first it keys out the icon's current background color to transparency (chroma-key matching), then it alpha-blends the result onto a new solid background color.

The net effect is an icon with its backdrop swapped, with anti-aliased edges staying smooth throughout both steps.

How Icon Background Changer Works

Step one measures each pixel's RGB distance from the old background color and, within tolerance, sets its alpha to zero. Step two then blends every pixel (now including the newly-transparent ones) over the new background color using standard alpha compositing.

Because both steps reuse the exact math from the standalone remover and adder tools, the combined result behaves predictably and consistently with those tools.

When To Use Icon Background Changer

Use it when an icon was exported over the wrong flat color and you need it on a different flat color without two separate tool passes.

It's handy for quickly previewing an icon against several UI theme backdrops.

Often used alongside Logo Background Changer, Icon Background Adder and Icon Background Remover.

Features

Advantages

  • Runs entirely client-side; nothing is uploaded to a server.
  • Combines background removal and background addition into one step.
  • Reuses the same well-tested chroma-key and alpha-blend operations as the standalone tools.

Limitations

  • Only works cleanly on flat, single-color backgrounds — busy or gradient backdrops won't key out correctly.
  • Only a flat new background color is supported, not a gradient or pattern.

Examples

White to dark navy

Input

128x128 PNG icon on #FFFFFF, new background #0F172A, tolerance 32

Output

Same icon now backed by solid navy

The white is keyed out first, then the navy is blended in behind the isolated icon.

Light gray to brand orange

Input

64x64 PNG icon on #F3F4F6, new background #F97316, tolerance 20

Output

Icon now backed by solid orange

A moderate tolerance removes the flat gray cleanly without eating into lighter icon details.

Best Practices & Notes

Best Practices

  • Start with a lower tolerance and increase only if a colored ring remains around the icon's edge.
  • Use the Icon Color Picker first to get the exact hex of the current background.

Developer Notes

The lib function composes the already-shipped `removePngBackground` and `addBackgroundToPng` functions in sequence; no new pixel-level math was written, since 'change the background' is just 'remove, then add' applied to the same PixelBuffer.

Icon Background Changer Use Cases

  • Rebranding an icon asset library to a new backdrop color
  • Testing an icon against several candidate background colors quickly
  • Fixing an icon that was exported over the wrong flat color

Common Mistakes

  • Using a high tolerance that also recolors light internal parts of the icon.
  • Expecting a transparent result — this tool always outputs an opaque image.

Tips

  • Pick both colors as hex values ahead of time for a predictable result.
  • If edges look off, try the Icon Background Remover and Icon Background Adder tools separately to debug which step needs tuning.

References

Frequently Asked Questions