← all skills

animated-icons

• Web
• operative — changes the codebase
• 112 lines
• 2 references

Add a Motion-animated icon to a Next.js app from a shadcn registry instead of hand-animating an SVG. Two registries, picked from the project's icon set: heroicons-animated (316 icons, shadcn add @heroicons-animated/<name>) and hugeicons-animated (165 icons, shadcn add @hugeicons-animated/<name>, which also installs a shared lib/use-icon-animation.ts). Both MIT, both on the motion runtime, both copied into your repo as source. This skill owns the install plus the two things the raw components lack: a prefers-reduced-motion guard and timing aligned to the project motion tokens (lib/motion/). Use when the user says "animated icon", "animate this icon", "make the bell/heart/menu icon animate on hover", "aggiungi un'icona animata", or wants an icon micro-interaction. Refuses outside Next.js web — for React Native use rn-animations-gestures. Not for: static icons, a whole motion system (transitions), or installing the runtime itself (module-add motion).