- Home
- Make a Round Icon
Make a Round Icon
Mask an icon into a circle with transparent corners — for the avatar slots, chips and launcher shapes that demand one.
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.
When an icon has to be circular
Cut from a centred square
The circle is taken from the largest centred square in the file, so a non-square icon loses its long sides. That is usually right for a glyph, which sits in the middle anyway — but check anything with text or an offset element.
Round is a platform convention
Some launchers and chat interfaces mask everything into a circle whether you supply one or not. Cutting the circle yourself means you control what gets removed rather than discovering it after the fact.
Trim first, or the glyph shrinks
An icon with generous built-in padding produces a circle that is mostly empty with a small glyph in the middle. Trim the icon to its own bounds first, then round it, and the glyph fills the circle properly.
Transparent outside the circle
The corners are removed rather than filled, so the round icon drops onto any background without a box behind it.
Not the same as a squircle
App store icons on several platforms are squircles — a rounded square, not a circle. If you are preparing a store submission, check which shape the spec asks for before masking anything.
Circle, squircle or square?
Circle
Fully round
- Corners removed entirely
- Common in avatars and chips
- Crops a non-square icon
- Transparent surround
Avatar slots and circular UI badges
App store submissions on most platforms
Square
Centred crop
- Keeps all four corners
- Equal sides
- No shape masking
- Fills the slot completely
Grids, tiles and store icons that want a full bleed
A UI that will round it anyway
How to make a round icon
Upload the icon
Trim it to its glyph first if it carries a lot of padding.
Take the circle
The mask applies immediately with transparent corners.
Download
Free preview, or the full-resolution PNG in the app.
Where round icons are used
Avatar slots
Supply an icon for a UI that renders everything as a circle.
Launcher shapes
Control the crop yourself instead of letting the OS choose.
Chips and pills
Fit a glyph into a small circular badge.
Category markers
Build a consistent round icon set for navigation.
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 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.
What to DIY and What to Pay a Designer For
Where design money actually earns its return at pre-seed, where it doesn't, and the honest line between the work worth commissioning and the work worth doing yourself.
Make your icon round
A circle with transparent corners.