Animated icons
Also searched as: animated icons, vector icon motion, svg icon animation, icon morph, symbol animation
Canonical Definition
Animated icons are vector symbols — checkmarks, shields, lightning bolts, and settings gears — that draw on, morph between states, or perform looped actions to reinforce messaging.
15 to 30 frames (0.5s - 1.0s)
spring({ damping: 12, stiffness: 220 })
Icons communicate complex concepts in a fraction of a second. An animated checkmark confirms security; a pulsing shield conveys data protection; morphing arrows illustrate workflow transformation.
By animating SVG stroke paths, scaling accents, and rotating anchor points, icons become expressive motion accents that punctuate bullet lists and feature highlights.
Stroke Drawing & Morph Transitions
Tracing vector geometry from zero to completion on key beats
A vector icon draws its outline with an ease-out stroke dash offset, followed by a secondary scale pop when the fill color activates.
How this works: A vector icon morphs smoothly into a secondary symbol with rotational spring momentum.
- SVG path morphing and scale interpolation
- Parametric icon selection across 100+ standard symbols
- Clean color fill transition on state change
Engineering Guidelines & Common Pitfalls
Best Practices (What to do)
- Animate icons once when they enter, then hold them in a stable settled state.
- Keep stroke widths consistent across all icons in the same scene.
Common Failure Modes (What to avoid)
- Icons that continuously rotate and spin without stopping, creating persistent visual distraction.
Working catalog implementations
Typed Remotion components ready to drop into code.
Icon Swap
A scale-and-blur icon swap primitive for toolbar and action state changes
Icon Morph Beat
An icon morphs between authored state silhouettes, shifts to an accent color, and marks completion with one restrained pulse.
Badge Pop
A transitions.dev-inspired notification badge pop with elastic scale and count reveal
Build animated icons in Animatiq
Prompt our motion agent in natural language. Get back typed Remotion React code with custom easing curves, brand palettes, and frame-accurate timing.
Related motion principles
UI motion & microinteractions
UI motion is the animation of user interface elements — buttons, toggles, sheets, tabs, and modals — demonstrating cause and effect and operational feedback inside software.
Motion & CameraAnnotations & callouts
Annotations and callouts are motivated graphic markers — hand-drawn arrows, highlight rings, speech bubbles, and drawn underlines — that direct visual focus to a specific element.