Hugeicons Animated
165 hand-animated Hugeicons installed as React source via the shadcn CLI
Hugeicons Animated is a free MIT collection of hand-animated icons built by Enes Gules on top of Hugeicons' core-free-icons set. Each icon is a React component that uses `motion` and a shared `use-icon-animation` hook, forwards a ref exposing startAnimation/stopAnimation, and takes a `size` prop, so you can trigger the animation on hover, on focus, or imperatively. There is no npm package: `npx shadcn add @hugeicons-animated/<name>` copies the .tsx plus lib/use-icon-animation.ts into your own repo, so you own and can edit the source. The public registry currently lists 165 icons covering navigation, files, media, comms, weather, commerce and user management.
npx shadcn add @hugeicons-animated/notification-03Fetch https://hugeicons-animated.com/r/registry.json first and match against the real slugs — they carry Hugeicons' numeric suffixes (notification-03, arrow-down-02, share-08, sun-03), so a guessed name like 'notification' will 404. Each icon pulls in `motion` and writes lib/use-icon-animation.ts, so install one icon before batching a dozen to make sure that shared lib lands only once, and remember these are DOM-wrapped (each renders a div with HTMLAttributes) rather than bare SVGs — they will not drop into a slot expecting an <svg>. Use it for a handful of accent icons in menus and empty states; keep a static set like lucide for the other 200 icons in the app rather than animating everything.
Why it is here. Animated icons are usually either a paid Lottie pack or a hand-rolled one-off; this gives you a coherent, MIT, shadcn-native set drawn from a well-known icon family, with the animation source in your own repo.
- 165 icons in the public registry
- shadcn CLI install, no npm dependency or lock-in
- imperative startAnimation/stopAnimation handle per icon
- built on motion and Hugeicons core-free-icons
- site copy still advertises 85 icons
Verified 2026-08-15. HTTP 200. https://hugeicons-animated.com/ (raw HTML + WebFetch), https://hugeicons-animated.com/r/registry.json (165 items parsed), https://hugeicons-animated.com/r/notification-03.json, https://github.com/enesgules/hugeicons-animated via gh api
