← all skills

heroicons-animated

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

Add a Motion-animated Heroicon to a Next.js app from the heroicons-animated registry instead of hand-animating an SVG. Each icon is a shadcn-registry component installed with shadcn add @heroicons-animated/<name>, built on the motion runtime. 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 (stack.framework next/monorepo) — for React Native use rn-animations-gestures. Not for: static icons (use the plain heroicons/lucide set), a whole motion system (use transitions), or installing the animation runtime itself (use module-add motion).