Free Lottie Icon Constructor
Generate animated line icons — check, X, plus, arrow, menu — as Lottie with a draw-on stroke effect, fully customizable.
Icon settings
Live Preview
Size
-
Duration
-
FPS
30fps
The Free Lottie Icon Constructor Online
Need an animated line icon — a checkmark, X, plus, arrow or menu — that draws itself on? Our free icon constructor builds one as a Lottie in seconds.
Each icon is a vector stroke that animates on with a satisfying draw-on effect. Set the color, weight, size and speed, watch the live preview, and download a loopable Lottie. No design tool, no upload — it is generated in your browser and is fully deterministic.
How to Create an Animated Icon
Building an animated icon usually means After Effects and trim paths. Do it in a few clicks:
Pick an icon
Choose check, X, plus, arrow, or menu.
Style it
Set the stroke color, weight and canvas size to match your design.
Tune the speed
Adjust how fast the icon draws on.
Preview and download
Watch it draw and loop, then download the Lottie JSON.
No upload, no account — generate an animated icon in under a minute.
Key Features
Five Line Icons
Checkmark, X, plus, arrow and menu — the icons apps reach for most, animated and ready to use.
Draw-On Effect
The stroke traces itself onto the canvas with a trim-path animation, then loops — clean and satisfying.
Fully Styled
Control the stroke color, weight, size and speed so the icon fits right into your UI.
Live Preview
Every change updates the preview instantly, so you can dial in the look before you download.
Popular Use Cases
Success Checkmarks
Add a drawing checkmark to confirm an action completed.
Close / Dismiss
Use the animated X for close buttons and dismissible elements.
Add / Expand
The plus icon works for add actions and expandable sections.
Arrows & Navigation
Drop an animated arrow into buttons, carousels and next-step prompts.
Menu Toggles
Use the hamburger menu icon for navigation triggers.
Icon Set for a UI Kit
Generate a matching set of animated icons for a design system.
Pro Tips
Match your stroke weight
Set the weight close to your other icons so the animated one blends into the set.
Faster for micro-interactions
A quick draw (higher speed) feels snappy for button feedback; slower feels more deliberate.
Size to your target
Set the canvas size to your intended pixel size so the stroke weight reads correctly.
Recolor per theme
Generate the same icon in a couple of colors for light and dark themes.
Privacy and Security
We take your privacy seriously. Unlike most online converters that upload your files to remote servers, our tool processes everything locally.
No uploads – Your files are processed entirely in your browser. They never touch our servers.
No tracking – We don't log which files you convert or what settings you use.
No accounts – Use the tool immediately. No registration, no personal data required.
Inspect it yourself – Open DevTools and watch the network tab. You'll see zero file uploads.
Frequently Asked Questions
Everything you need to know about Lottie animations and our tools.
What icons can I generate?
Five common line icons: checkmark, X (close), plus, arrow, and menu (hamburger) — each animated with a draw-on stroke effect.
What is the draw-on effect?
The icon’s stroke draws itself onto the canvas, as if traced by a pen, using a trim-path animation. It loops, so it redraws each cycle.
How do I use the generated Lottie?
Download the JSON and play it with any Lottie player (web, iOS, Android, Flutter) wherever you want an animated icon.
Can I match my brand?
Yes. Set the stroke color, weight, size and speed to fit your design.
Are these icons scalable?
They’re vector strokes, so they stay crisp at any size. Set the canvas size to your target dimensions.
Is it deterministic?
Yes — the same settings always produce the same icon animation.
Are my settings uploaded to a server?
No. The Lottie is generated entirely in your browser. Nothing is uploaded.
Is it free?
Completely free, with no registration, watermarks, or usage limits.