FREE SVG SHAPE GENERATOR
Generate clean geometric shapes.
Squircles, shields, badges, geometric marks – generate crisp vector shapes with exact control over fill, stroke, and shadow, then export as SVG or PNG. The building blocks of icons, avatars, and UI chrome.
SETTINGS
RESULT · …
Seven precision shapes – including the true iOS-style squircle CSS can’t draw – with fill, stroke, and outline controls. To compose shapes with icons, continue in the Studio.
The shapes CSS can’t do
True squircles (superellipses), shield outlines, and badge frames are painful or impossible in CSS – as SVG they’re one export away.
Compose with any icon
Every shape doubles as a background plate: put any of 2,400+ icons inside a shield, squircle, or circle with one click.
Exact geometry
Vector shapes have mathematically perfect curves at every size – no border-radius approximations, no rendering inconsistencies.
STEP BY STEP
How to generate SVG shapes
- Pick a shape Squircle, circle, square, shield, star, hexagon, or badge – one click each in the generator above.
- Style it Fill color, stroke color and width, or flip to outline-only – all with live preview.
- Export Download the SVG or copy the path code for your own compositions. For PNG at fixed sizes, run it through SVG to PNG.
Why app icons use squircles (and where to get one)
The squircle – a superellipse blending square and circle – is the shape language of iOS icons and most modern app design. CSS border-radius can’t draw one: real squircles need continuous-curvature corners that only a vector path provides. Generate one here, drop your mark inside it, and your app icon matches the platform natively.
The same library covers avatar frames, notification badges, status shields, and the geometric primitives of logo design. For repeating arrangements of shapes, see the pattern generator.
FAQ
Frequently asked questions
What shapes can I generate?
Circles, squares, squircles, shields, badges, stars, and geometric logo marks – plus any catalog icon composed inside any of them.
What is a squircle exactly?
A superellipse – a square-circle hybrid with continuously curving corners. It’s the iOS app icon shape, and it requires vector paths; CSS border-radius only approximates it.
Can I use these shapes as CSS backgrounds?
Yes – export and copy as a Data URI from the Code tab, then use it in background-image.
Are the shapes free for commercial projects?
Yes – like everything in the Studio, free for personal and commercial use without attribution.
KEEP EXPLORING
Related tools & guides
SVG Generator
Generate icons and graphics from 2,400+ customizable bases.
Icon Generator
Create custom icons from 2,400+ restyleable SVG bases.
Pattern Generator
Seamless vector patterns with copy-paste templates.
SVG Editor
Visual + code editing for SVG files, free in your browser.
Design, convert, and ship SVGs in one place.
The full Free SVG Online studio – catalog, visual editor, and code inspector. No account, no limits, free forever.