Hugeicons Animated

Overview

Hugeicons Animated is a curated collection of hand-animated Hugeicons for React, built with Motion and distributed as copy-paste components through the shadcn CLI. Each icon installs as plain source in components/ui, with no package to depend on. It was inspired by pqoqubbw/icons and is MIT licensed, with base shapes from the free @hugeicons/core-free-icons set.

The registry currently lists 227 icons, from arrows and alerts to batteries, calendars and shopping carts. Icons animate on hover by default and can also be triggered from code through a ref handle. The project follows written animation guidelines: animate only the geometry that communicates the action, and return every finite gesture to the original pose.

Features

• Hover animation: Icons animate automatically on hover.
• Imperative control: A ref handle exposes startAnimation() for triggering motion from code.
• Gesture handling: Finite gestures finish their beat if the pointer leaves, and looping gestures return to rest.
• Reduced motion: Respects users' reduced-motion preferences automatically.
• Animation rules: Geometry is preserved between poses rather than crossfading whole icons.
• Source ownership: Each icon is a standalone component you can edit.

Tech stack

• React
• Motion
• @hugeicons/core-free-icons

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @hugeicons-animated/component-name