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 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.
Fade your icon
Upload, set the opacity, and download a translucent PNG.