Hugeicons Animated Vue

Overview

Hugeicons Animated Vue is a collection of 6,122 animated Hugeicons for Vue 3, by Mickael Rebeau and inspired by the React project enesgules/hugeicons-animated. Icons can be installed from npm as hugeicons-animated-vue or copied into the project one at a time as source through the shadcn registry. It is MIT licensed.

Animation quality varies across the set: icons on gallery pages 1 to 13 (a-arrow-down through calling) have a unique, hand-authored hover gesture based on each pictogram's name and geometry, including 165 original hand-crafted icons. The rest use a generated recipe from their name and shape. Each registry item ships the .vue component plus a shared useIconAnimation composable.

Features

• 6,122 icons: The full Hugeicons set, animated for Vue 3.
• Hover playback: Icons animate on hover, with startAnimation() and stopAnimation() for programmatic control.
• Gesture handling: Finite gestures finish their beat, and looping gestures return to rest.
• Reduced motion: Respects prefers-reduced-motion.
• Tree-shakeable imports: Deep import paths so bundlers only pull the icons in use.
• Two install modes: npm package or copy-paste via the shadcn CLI.

Tech stack

• Vue 3.5+
• motion-v
• TypeScript

Registry

Install via the shadcn CLI registry:

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