How to turn any SVG icon into a 3D puff sticker (free, browser-only)
Puff stickers — the rounded, inflated, soft-bevelled icons behind claymorphism — are everywhere: App Store feature graphics, Notion covers, Linear changelog entries, SaaS landing page heroes. The style communicates "polished but playful" without the formality of flat design or the overproduction of photorealistic 3D.
Making them the traditional way means Blender or Spline (an hour per icon once you're fluent), Figma 3D plugins (CSS-based, no real lighting, single-color only), or Photoshop bevel filters (pixel-flat, can't handle multi-layer SVGs cleanly). Here's a faster way using PuffKit — drop a flat SVG, pick a mood, export PNG. Multi-color, multi-layer SVGs work natively with per-layer depth. Browser-only, no signup.
Why this workflow works
Traditional approach
→ Model each icon in Blender / Spline
→ Or a Figma 3D plugin — no real lighting, single-color only
→ Or Photoshop bevel — pixel-flat, no multi-layer
→ 30 min – 2 hours per icon
PuffKit
→ Flat SVG in, 3D puff sticker out
→ Multi-color SVGs: each color group becomes its own 3D layer
→ Per-layer depth + color controls
→ Under a minute per icon, one-time $9 (free 10/day)
Puff sticker style is actually a narrow aesthetic — a small range of bevel radii, material finishes and lighting moods read as "puff"; everything else drifts into generic 3D. That's why a dedicated tool with opinionated presets finishes faster than a general 3D editor with knobs you have to tune yourself every session.
Step-by-step
1. Drop your SVG
Open puff.ohiyo.app and drag in a flat SVG — Lucide, Heroicons, Feather, Material Symbols, or a Figma / Illustrator export. Multi-layer files with multiple colors keep their layer structure. Or pick one of the built-in samples to see it run first.
2. Pick a mood preset
Three presets: Neutral (default, balanced), Pastel (soft, warm), Cyber (vivid, high-contrast). Each preset ships lighting and saturation defaults tuned for the puff aesthetic, so one click usually lands close to the final look.
3. Tune the shape and surface
Adjust Puffiness (how inflated the bevel reads), Thickness (overall depth), and Finish (soft matte → glossier). Saturation and Brightness handle scene-level tweaks. For flat-logo-style output (Google / Microsoft-ish), toggle off 3D stacking.
4. Adjust per-layer color and depth
Click any layer in the sidebar (or directly on the 3D preview). A popover gives a color picker and an independent depth slider. Push foreground elements forward, recess the background — this is what turns a flat icon into a layered sticker rather than a uniformly extruded slab.
5. Drag to rotate, export PNG
Orbit the canvas to find the shot. Pick background — dark, light, transparent, or mood. Download at @1× for web, @2× for Retina product shots, @3× for print-scale or App Store assets.
What it works well for
- App icons — turn a flat product icon into matching 3D feature badges for App Store screenshots, marketing site sections, onboarding flows.
- Notion covers — claymorphism has become the default Notion aesthetic; PuffKit outputs the exact look without hand-modelling.
- Landing page heroes — multi-color SVG illustrations become tactile 3D graphics, no illustrator needed.
- App Store screenshots — sticker-style feature callouts that pop off the promotional frame.
- Social cards and YouTube thumbnails — consistent 3D treatment for launch posts on Twitter / LinkedIn / YouTube.
When not to use it
PuffKit is scoped by design. That's the point, but it also means a few cases fall outside:
- SVGs with gradients, filters, masks or text elements — flatten gradients to solid colors and outline text first. PuffKit warns you before processing if it detects things it can't represent in 3D.
- Animation — PNG export only. No GIF, no Lottie, no video. If you want animated icons, use AutoKit instead.
- AI-generated variations — PuffKit is deterministic: your SVG stays your SVG, just in 3D. If you want stylistic drift beyond the preset knobs, a generative tool fits better.
- Full 3D modelling — for character poses, scene composition or modelling from scratch, stay in Blender or Spline. PuffKit does one specific thing.
About the pricing
Free tier: 10 PNG exports per day, full feature set — all presets, all sliders, all export sizes. Pro: $9 one-time, lifetime access, unlimited exports. No subscription, no locked presets, no watermark. The $9 removes the daily cap; that's the whole difference.
7-day refund if it doesn't fit. Support at support@ohiyo.app.