Convert an Icon to Grayscale
Produce the muted version of an icon that interfaces use for disabled, inactive, and secondary states.
Free preview · No signup · ~10 seconds
Drop an icon
PNG, JPG, WebP or SVG — up to 20 MB
Drop several at once — you can edit them all together in the app.
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.
Or just ask
Describe the edit in your own words
Type what you want changed and the assistant does it on the canvas — each step lands as a layer you can reopen, so nothing it does is baked in.
No edits yet.
Frequently Asked Questions
Related Tools
Guides worth reading
How to Make a Duotone Image in Figma (Building One From Blend Modes)
Figma has no duotone effect. You assemble one from a desaturated image and two blended rectangles — here is the layer stack, the order that matters, and an honest account of what it costs to maintain.
How to Make a Logo White in Photoshop (3 Methods, One of Them Non-Destructive)
Color Overlay, Lock Transparent Pixels, and why Hue/Saturation is the wrong tool even though Lightness looks like it works — plus the fringe that makes a white logo look dirty on a dark background, and how to remove it.
How to Replace a Color in Canva (What's Possible on Elements, and What Isn't on Uploads)
Canva can swap colors on vector elements one swatch at a time. On an uploaded photo or PNG there is no per-color control at all — here is the full picture, including the Duotone approximation and its limits.
Make a grey icon
Upload and download the muted version.