hugeicons-animated

A curated collection of hand-animated built with , distributed as copy-paste components via the shadcn CLI. Inspired by .

Usage

tsx

import { Notification03Icon } from '@/components/ui/notification-03';
// hover animates automatically<Notification03Icon size={28} />
// or control it imperativelyconst 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.

Animation rules

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 [blocked] combine the geometry approach from 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.

Adding a new icon

Add the component directly to icons/. Use the matching geometry from , then hand-tune its Motion variants in that component.
Regenerate the site manifest and installable registry:
bash
```
pnpm registry:build
```
The grid in app/page.tsx picks up new icons automatically via app/icons-manifest.ts.

The components in icons/ are the animation source of truth. pnpm registry:build reads them but never writes to that directory.

Development

License

MIT. Icon shapes from the free Hugeicons set (@hugeicons/core-free-icons, MIT).