icons-animated

Overview

icons-animated is a collection of animated icons drawn from four popular sets: Huge Icons, Tabler Icons, Phosphor Icons and Heroicons. It is built by Leonel Ngoya (ln-dev7) and based on lucide-animated. Icons keep the native style of their source library and gain a Motion-powered animation.

Every catalog icon is available as a React, Vue or Svelte component. A framework switch on the site changes what the copy button returns: a standalone .tsx, .vue or .svelte file, or an install command for the shadcn, shadcn-vue or shadcn-svelte CLI. Registry installs pin the Motion versions the animations were tuned against.

Features

• Four icon sets: Huge Icons, Tabler, Phosphor and Heroicons
• Three frameworks: React, Vue 3.5+ and Svelte 5.20+ versions of every icon
• shadcn registries: Install with shadcn, shadcn-vue or shadcn-svelte
• Copy code: Grab a standalone component file straight from the site
• Pinned animation engine: Registry installs supply the verified Motion versions
• Customizable: Set size and CSS color on each icon

Tech stack

• React 19, Vue 3, Svelte 5
• Motion
• Next.js 16, Tailwind CSS v4 (site)

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @icons-animated/tabler-heart