How to make animated isometric icons (flat SVG → animated graphic)
Animated isometric icons — the kind you see on modern SaaS landing pages like Linear, Stripe and Framer — usually require two painful things: illustrating the isometric version in Figma or Illustrator, then animating it in After Effects or a Lottie timeline editor. That's easily an afternoon per icon.
Here's a way to do it in under a minute using two browser-based tools: IsoKit generates the isometric version automatically from a flat SVG, and AutoKit auto-assigns entrance and loop animations to the result.
Why this workflow works
Traditional approach
→ Rebuild every icon in 3D perspective
→ Learn After Effects / Lottie timeline
→ 1-3 hours per animated icon
→ Monthly subscriptions ($18–$45/mo)
IsoKit + AutoKit
→ Flat SVG → 6 isometric angles auto
→ Drag-drop animation presets
→ Under 1 minute per icon
→ One-time $9 each, lifetime access
Isometric projection is deterministic math — given any flat SVG, the six standard camera angles can be generated automatically. Icon-scale motion is similarly bounded — most entrance and loop effects come from a small set of timing curves. Both problems respond well to sensible defaults + shuffle instead of manual timelines.
Step-by-step
1. Make the isometric version in IsoKit
Open iso.ohiyo.app and drop a flat SVG icon. IsoKit generates six isometric camera angles instantly. Pick the one that fits your layout, add thickness and shadow, then export as SVG.
2. Drop the SVG into AutoKit
Open auto.ohiyo.app and drag the exported SVG in. AutoKit parses every element and auto-assigns an entrance animation and a loop animation.
3. Shuffle until it fits
Click the shuffle button to re-roll animations until the motion matches the tone of your page — bouncy for marketing, subtle for dashboards, bold for hero sections.
4. Export or copy CSS
Copy the generated CSS (free) and paste it into your project, or export a self-contained animated SVG file ($9 one-time upgrade) that plays anywhere — slides, Notion, static sites.
When to use this
This workflow is for icons and small illustrations — feature cards, empty states, hero graphics, blog post illustrations, changelog entries. If you need multi-scene storytelling or character animation, you still want a real timeline editor (After Effects, Rive). For everything smaller, sensible-defaults + shuffle finishes faster than opening After Effects.
When not to use it
If your brand has a custom illustration system that requires specific isometric angles, proportions, or art direction, IsoKit's auto-generation won't match. You'd still want a hand-drawn approach. Same for AutoKit: if you need frame-accurate synchronized motion across multiple elements, use a timeline tool.
Try the workflow
Both tools are free to try. Upgrade only if you need vector SVG export.