Create a Translucent Icon
Fade an icon for disabled states, watermarks, and backgrounds where a solid glyph would be too loud.
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 reduced opacity signals
Opacity is the alpha channel
Lowering opacity scales the transparency of every pixel proportionally, so an icon that was already cut out fades evenly rather than gaining a faint square around it.
The usual levels
Design systems tend to use around 38 to 50 percent for disabled, and 10 to 20 percent for a decorative background glyph. Anything under 10 is effectively invisible at icon sizes.
Do not fade below legibility
A disabled icon still has to be recognisable — the user needs to know what the control does. Fading past about 30 percent starts to destroy that, especially at 16 and 24 pixels.
PNG only
JPG has no alpha channel, so a faded icon saved as JPG comes back solid with a white box. The output here is always PNG.
Bake it in or use CSS
On the web, opacity in CSS is more flexible and costs nothing. Bake it into the file for slides, PDFs, email, and anywhere there is no styling layer to apply it.
How to create a translucent icon
Upload the icon
Drop in the icon, ideally already transparent.
Set the opacity
Drag the slider down. The checkerboard shows exactly how much is showing through.
Download
Take a free preview, or download the full-resolution PNG with one credit.
Where a faded icon is used
Disabled states
Produce the faded treatment a design system specifies for unavailable actions.
Background glyphs
Place a large faint icon behind a card or an empty state.
Slide decoration
Use an icon as a subtle background element rather than a focal point.
Watermark bugs
Add a faint corner mark that does not compete with the content.
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.
Fade your icon
Upload, set the opacity, and download a translucent PNG.