Animated-icons

Tiny icon animations that make interfaces feel alive. animated-icons teaches your agent the SVG motion primitives to animate any icon you own — plain SVG + CSS, no libraries — plus twelve tuned recipes for the classics. Everything below runs on the real recipes.

Icon palette just examples — press an icon, or type 1–0

These are the tuned recipes — not the limit. The same five primitives (transform, stroke draw, crossfade, mask, currentColor) compose animations for any icon in your set.

Interaction patterns live

03-fill-pop.md
save · like · bookmark recipe →
11-sun-moon.md
theme toggle recipe →
12-trash-lid.md
hover to peek recipe →

Benchmarks graded evals, with the skill vs without

Every release runs three real-world prompts twice — once with the skill installed, once without — and grades both against the same assertions (accessibility state, interruptible transitions, reduced-motion guards, correct SVG transform origins). Methodology →

Install

$ npx skills add AdzeB/animated-icons

Usage

you sayyou get
"make my wifi icon pulse while it reconnects — use animated-icons"composed from primitives
"use the animated-icons skill: make the copy button on my code blocks turn into a checkmark"copy → check
"animate my hamburger menu icon with animated-icons"hamburger → X
"give the bookmark button a pop like twitter's — use animated-icons"fill pop