Convert a PNG Icon to WebP
Shrink a transparent icon for the web without losing the alpha channel — useful when you are shipping dozens of them at once.
Describe the edit — the AI assistant does it on the canvas.
Free preview · No signup · ~10 seconds
Drop a PNG icon
PNG, JPG, WebP or SVG — up to 30 MB
Runs entirely in your browser. Your image is never uploaded.
Where WebP icons make sense
It adds up across a set
On a single icon the saving is a few kilobytes and hardly worth the trouble. Across an interface shipping forty of them, WebP typically removes more weight than any other single change you can make to the asset pipeline.
Alpha is preserved
Unlike JPEG, WebP keeps the transparency an icon depends on. The glyph still drops onto any background without a box behind it.
Be careful at small sizes
Compression artefacts that vanish on a large image are proportionally larger on a 32-pixel glyph. Keep the quality at 90 or above for icons, and check the result at actual size rather than zoomed in.
Browsers only
This is a web-delivery format. Every current browser reads it, but native app bundles, extension manifests and app store submissions still specify PNG, and those requirements are not negotiable.
Sometimes PNG already wins
A flat two-colour glyph with a tiny palette can compress smaller as a PNG than as a WebP. For very simple icons, compare the two file sizes before switching the whole set.
Before converting a whole set
Compare against the PNG
For a flat two-colour glyph, PNG sometimes produces the smaller file. Check one representative icon before converting forty.
Manifests still want PNG
App store, extension and PWA icons are specified as PNG. Convert the ones you serve yourself, not the ones you declare.
Judge at display size
Zooming in makes WebP artefacts look worse than they are. Review the icon at the pixel size it will actually render.
How to convert a png icon to webp
Upload the PNG icon
Bring the transparent version — it stays transparent.
Set the quality
Start at 90 for icons and judge the result at the size you will actually display it.
Download the WebP
Free preview, or the full-resolution file in the app.
When to ship icons as WebP
Trimming an icon set
Cut the combined weight of dozens of interface glyphs at once.
Mobile web apps
Reduce what a phone downloads before the interface is usable.
Modern CMS themes
Match a theme that already serves WebP for everything else.
Icon-heavy dashboards
Lighten a page that loads many small graphics on first paint.
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 Fix Blurry or Fringed Edges on a Transparent PNG
Why your transparent PNG has a white halo, a grey fringe or soft edges — the four real causes, how to tell them apart in seconds, and the fix for each.
SVG vs PNG for Logos: Which File Do You Actually Need?
What SVG and PNG really are, where each one wins, why your developer keeps asking for the SVG, and the three files that cover almost every request.
How to Replace a Color in Photoshop (4 Methods, and Why the Edges Go Wrong)
Replace Color, Hue/Saturation on a targeted range, Color Range plus a fill layer, and Selective Color — which to use when, and why a recolored logo keeps a halo of the old color along its edges.
Convert your PNG icon to WebP
Lighter icons that still sit on any background.