animating-iconslisted

Author, review, or batch-produce SVG icon hover gestures and icon↔icon morphs (Hugeicons/Lucide/Phosphor). Use for animated icon, icon hover, per-icon gesture, icon morph, menu↔cross, stroke-dashoffset draw-on, pathLength, transform-box. Not for page transitions, Lottie, or general UI chrome motion.
SoraLabsOSS/skills · ★ 27 · Web & Frontend · score 78

Install: claude install-skill SoraLabsOSS/skills

# Animating Icons An icon is not a picture you move. It is an object that **does something**, and the animation is that thing happening once. **Core principle: the gesture is the icon's meaning acting on itself.** A bell rings, a plug disconnects, a package lands. The motion has to be something only _that_ object could do. Whole-`<svg>` shakes that would look identical on any glyph are decoration — delete them. ## Read next | Situation | Open | | ------------------------------------- | ------------------------------------------------------------------------------------------------------- | | Hover gesture on one glyph | [references/FAMILIES.md](references/FAMILIES.md), then [references/EXAMPLES.md](references/EXAMPLES.md) | | Shape itself bends (book, hand, flap) | [references/MORPH.md](references/MORPH.md) | | Icon A becomes icon B (menu↔cross) | [references/ICON-MORPH.md](references/ICON-MORPH.md) | | Authoring CSS / SVG / driver | [references/TECHNIQUE.md](references/TECHNIQUE.md) + [references/FAILURES.md](references/FAILURES.md) | | Fill (Phosphor-style) ink | [references/FILL.md](references/FILL.md) | | Easing / peak speed