Make an Icon Square
Crop an icon to a perfect centred square — the ratio manifests, tiles and store listings expect.
Describe the edit — the AI assistant does it on the canvas.
Free preview · 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.
Getting an icon back to 1:1
Manifests assume 1:1
App manifests, PWA icon sets, browser extension icons and favicon files are all specified as squares. A rectangular icon in one of those slots is either rejected outright or stretched by whatever renders it, and stretched is worse.
A trimmed icon is rarely square
If you have just trimmed an icon to its glyph, it almost certainly is not square any more — most glyphs are wider or taller than they are the other way. This is the step that puts it back.
Crops rather than pads
This takes a centred square out of the icon. That keeps the glyph at full size but removes the long sides, so anything running close to a left or right edge will be clipped. Pad to square instead if the glyph fills the frame.
Transparency intact
The square keeps the alpha channel exactly, so the icon still drops into an interface with nothing behind it.
Square, then resize
Get the ratio right first and the pixel size second. Manifests usually want a specific dimension as well as a square, and resizing a square is a single unambiguous step.
Icon ratio checklist
Trim, square, resize
That order gets you a glyph-tight, 1:1, correctly sized icon. Any other order means doing at least one step twice.
Crop clips, padding does not
If the glyph already runs to the edge, squaring by crop will cut it. Pad to square instead in that case.
Keep a 1024 master
Square the largest version you have and generate every declared size from it, never the other way round.
How to make an icon square
Upload the icon
A trimmed glyph is the usual input.
Take the square
The centred 1:1 crop applies immediately.
Download
Free preview, or the full-resolution icon in the app.
Where a square icon is required
App manifests
Meet the 1:1 requirement for a PWA or app icon set.
Extension icons
Supply the square sizes a manifest declares.
Favicons
Square a glyph before generating the favicon set.
Tile layouts
Give every icon the same ratio so a grid stops jumping.
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 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.
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.
How to Remove a Background in Canva (And What the Free Plan Actually Gives You)
Canva's BG Remover is a paid feature — and so is downloading the result with transparency. Here is what works on a free account, what the two separate paywalls are, and how to get a clean cut-out either way.