hugeicons-animated-vue

A collection of 6,122 animated Hugeicons for Vue 3. Install from npm, or copy-paste each icon as source you own.

Authored motion covers gallery pages 1–10 (a-arrow-down through border-right-02). Those icons have a unique hover gesture written from the pictogram's name, geometry, and direction. The 165 original hand-crafted icons are unchanged. Every icon after page 10 still uses a generated recipe from its name and shape.

Inspired by enesgules/hugeicons-animated.

• MIT licensed
• Hover playback, plus startAnimation() / stopAnimation()
• Finite gestures finish their beat; looping gestures return to rest
• prefers-reduced-motion is respected

Install

pnpm add hugeicons-animated-vue motion-v

<script setup lang="ts">import Notification03Icon from 'hugeicons-animated-vue/icons/notification-03'import type { AnimatedIconHandle } from 'hugeicons-animated-vue'import { useTemplateRef } from 'vue'import 'hugeicons-animated-vue/style.css'
const icon = useTemplateRef<AnimatedIconHandle>('bell')</script>
<template>  <Notification03Icon :size="28" />  <Notification03Icon ref="bell" :size="28" />  <button type="button" @click="icon?.startAnimation()">Play</button></template>

Peer dependencies: vue ^3.5 and motion-v ^1.7 or ^2.

Named imports from the package root still work (import { Notification03Icon } from 'hugeicons-animated-vue'). Prefer the deep path above so bundlers only pull the icons you use.

Copy-paste

npx shadcn add @hugeicons-animated-vue/notification-03

Until @hugeicons-animated-vue is in the shadcn registry index, register it once in your project:

npx shadcn@latest registry add @hugeicons-animated-vue=https://hugeicons-animated-vue.rebeaumickael.fr/r/{name}.json

Or add this to components.json:

{  "registries": {    "@hugeicons-animated-vue": "https://hugeicons-animated-vue.rebeaumickael.fr/r/{name}.json"  }}

Animation coverage

The site gallery shows 80 icons per page. Unique, per-icon choreography has been authored for pages 1–10:

Hand-crafted originals that fall in that range were left untouched (for example add-circle, alert-circle, arrow-down-02, bookmark-01). Page 11 onward (border-right and after) is still generated.

To continue the walk, see AGENTS.md [blocked].

Animation rules

• Name the action and animate only the geometry that communicates it.
• Preserve SVG primitives between poses.
• Prefer a short, discrete, productive gesture.
• Respect reduced-motion preferences.
• Every finite gesture returns to the original Hugeicon pose.

See docs/animation-guidelines.md [blocked].

Development

pnpm installpnpm dev

Landing: Vite + Vue 3, Lenis, GSAP ScrollTrigger. Icons live in packages/vue.

pnpm --filter hugeicons-animated-vue buildpnpm icons:author     # emit pages in scripts/authored/ (pages 1–10 so far)pnpm icons:convert    # re-port from a local React clonepnpm registry:build   # manifest + shadcn registry

Contributing

Issues, discussions, and pull requests are welcome. See CONTRIBUTING.md [blocked] and the Code of Conduct [blocked].

Security reports: SECURITY.md [blocked].

License

MIT [blocked]. Icon shapes from the free Hugeicons set (@hugeicons/core-free-icons, MIT). Animation patterns inspired by enesgules/hugeicons-animated.