A curated collection of hand-animated Hugeicons built with motion, distributed as copy-paste components via the shadcn CLI. Inspired by pqoqubbw/icons.
npx shadcn@latest add @hugeicons-animated/notification-03import { Notification03Icon } from '@/components/ui/notification-03';
// hover animates automatically
<Notification03Icon size={28} />
// or control it imperatively
const ref = useRef<Notification03IconHandle>(null);
ref.current?.startAnimation();Finite gestures finish their beat even if the pointer leaves halfway through. Looping gestures stop and return to rest. Reduced-motion preferences are respected automatically.
- Name the action and animate only the geometry that communicates it.
- Preserve SVG primitives between poses. Rotate shared shapes and morph only paths with compatible commands; do not crossfade whole icons.
- Prefer a short, discrete, productive gesture. Use expressive or indefinite motion only when it communicates an important or genuinely ongoing state.
- Respect reduced-motion preferences. Nonessential autoplay must finish within five seconds or provide a pause control.
- Every finite gesture returns to the original Hugeicon pose.
The full animation guidelines combine the geometry approach from Morphing icons with Claude with platform motion and accessibility guidance. The article's exact three-line constraint is for a cross-icon morphing system; standalone Hugeicons preserve the native primitives needed by each icon instead.
-
Add the component directly to
icons/. Use the matching geometry from@hugeicons/core-free-icons, then hand-tune its Motion variants in that component. -
Regenerate the site manifest and installable registry:
pnpm registry:build
The grid in
app/page.tsxpicks up new icons automatically viaapp/icons-manifest.ts.
The components in icons/ are the animation source of truth.
pnpm registry:build reads them but never writes to that directory.
pnpm devMIT. Icon shapes from the free Hugeicons set (@hugeicons/core-free-icons, MIT).