Individually lovely icons animate like strangers without a system.
The short version
Individually lovely icons animate like strangers without a system. This guide skips the theory and keeps what has worked across hundreds of shipped campaigns.
Points worth stealing
- Define one easing family and a 3-stop duration set — then never deviate
- Design entrances and exits, not just loops
- Ship Lottie files with a usage doc: sizes, triggers, reduced-motion
- Test at 16px; legibility there rules the system
- Version the system like code — icons outlive campaigns
What we measured
10,000 — first-week users greeted by an animated onboarding icon set on one launch.
One last thing
A system is what makes your tenth icon as good as your first.
Want a version of this built for your product? Get a tailored walkthrough in one 20-minute call.
