Convert an Icon to Grayscale
Produce the muted version of an icon that interfaces use for disabled, inactive, and secondary states.
Describe the edit — the AI assistant does it on the canvas.
2 free credits · No signup · ~10 seconds
Drop an icon
PNG, JPG, WebP or SVG — up to 30 MB
Runs entirely in your browser. Your image is never uploaded.
What grayscale is for in an interface
The conventional disabled state
Removing colour is how interfaces have signalled unavailable for decades. It reads as inactive without hiding the icon, so the user still knows what the control would do if it were enabled.
Luminance weighting matters
Channels are weighted by perceived brightness rather than averaged. A naive average would flatten a saturated icon into a single mid-grey and lose the internal contrast that makes the glyph legible at small sizes.
Grey alone is not enough
Colour is not a sufficient signal on its own. A disabled control also needs reduced opacity, a cursor change, or a label, so that users who cannot distinguish the difference still understand the state.
Transparency is preserved
Only colour is removed, so a transparent icon keeps its alpha channel and exact silhouette.
Grey plus faded is the usual pair
Most design systems combine desaturation with reduced opacity for disabled states. Run this, then the Translucent Icon tool, to produce that combination as a single file.
How to convert an icon to grayscale
Upload the icon
Drop in the colour version.
The result appears immediately
Conversion runs the moment the file loads. There is nothing to configure.
Download
Take a free preview, or download the full-resolution file with one credit.
Where a grey icon belongs
Disabled controls
Signal that a button or action is currently unavailable.
Inactive tabs
Mute icons in tabs and menus that are not currently selected.
Mono documentation
Use icons in manuals and guides printed in one ink.
Consistent icon states
Produce the same muted treatment across an entire set.
Used by designers, indie devs & students at
What people use it for
The jobs the editor was built around — and what it does differently on each one.
Colourways you can revisit
Every edit is a layer, not a bake. When the brand shifts, reopen the file and change the colour rather than rebuilding the variant from the original.
Cutouts with awkward edges
AI background removal that keeps hair, foliage and soft shadows instead of stamping a hard outline around them. The output is a transparent PNG, ready to place.
No export, edit, re-import loop
The Framer plugin runs on the canvas you are already working in, so a recolour or a cutout does not mean a round trip through a second application.
Ten options in the time one used to take
Recolour once and step through the alternatives, so a client review can look at the whole range instead of the one version there was time to make.
Brand colours matched exactly
Pick a colour straight off an existing asset and get the hex, rather than eyeballing it against a screenshot and hoping it is close enough.
Free to preview, priced per export
Previewing is unlimited and costs nothing. A credit is spent only when you download a full-resolution file, so exploring an idea is never the expensive part.
Frequently Asked Questions
Related Tools
Guides worth reading
How to Get Your Website Ready for Google WebMCP
A step-by-step guide to exposing WebMCP tools on your site — the imperative and declarative APIs, how to test them, and the real security downsides.
The Best Free Design Tools for Indie Developers
A working set of free design tools for developers shipping solo — UI, icons, fonts, colour, illustration and asset prep — with the real free-tier limits.
How to Batch Recolor Images (Without Opening Each One)
Three honest ways to recolor a whole folder at once: a browser batch tool, a Photoshop action, and ImageMagick — plus which operations survive batching.
Make a grey icon
Upload and download the muted version.