AnimateIcons

Overview

AnimateIcons is a free, open-source library of 1,170 hand-crafted animated icons, designed and built by @avijit07x. The set combines two icon styles under one motion system: 669 Lucide icons for minimal product interfaces and 501 Huge icons for bolder dashboards and richer layouts.

Each icon installs through the shadcn CLI as a single editable file animated with motion/react, or comes from the @animateicons/react npm package. Size, color and animation duration are props, and the site includes a playground for tuning and copying icons. The library has recently expanded beyond React to Vue, Angular and plain JavaScript.

Features

• 1,170 animated icons: Every icon moves on hover, across UI, arrows, alerts, calendars, brands and more.
• Two libraries: Lucide (669 icons) and Huge (501 icons) share the same animation approach.
• Single-file installs: Each icon is added through the shadcn registry as one editable component.
• Configurable props: Control size, color and duration, for example <NotificationIcon size={160} duration={0.4} />.
• npm package: Install @animateicons/react instead of copying source.
• Framework support: React, plus Vue, Angular and plain JavaScript.
• MCP and CLI docs: Documentation covers the shadcn CLI and MCP installs.

Tech stack

• React
• Motion (motion/react)
• shadcn CLI registry

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @animateicons/component-name