Create a Translucent Icon
Fade an icon for disabled states, watermarks, and backgrounds where a solid glyph would be too loud.
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 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.
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.
Fade your icon
Upload, set the opacity, and download a translucent PNG.