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 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.
How to Remove a Background in Figma (There Is No Built-In Way — Here Is What Works)
Figma has no background removal feature. The honest options are a third-party plugin that uploads your image to its vendor, or a hand-drawn vector mask — plus when each is actually the right call.
How to Make a Duotone in Photoshop (Gradient Map vs Duotone Mode)
Photoshop has two duotone features and the one named Duotone is usually the wrong one. Why Image > Mode > Duotone demands a Grayscale conversion, why Gradient Map is what you actually want, and how to keep it editable.
Make a grey icon
Upload and download the muted version.