icons-animated

Open source

Animated React icons to preview, copy or install with shadcn.

icons.lndev.meln-dev7/icons-animated151

About

An icon can do more than sit still. icons-animated brings together SVG icons from Huge Icons, Tabler and Phosphor, animated with Motion to add movement to React interfaces. The project extends the approach of lucide-animated, created by pqoqubbw, to these three icon families.

Search the catalogue by name or keyword, then preview animations on hover or with the play button on mobile. Each component can be copied as TypeScript or installed from the registry with the shadcn CLI: the source goes straight into your project, ready to customise.

Animations can also be controlled through a React ref with startAnimation() and stopAnimation(). The site offers light and dark themes and commands for npm, pnpm, Yarn and Bun. The code is available on GitHub under the MIT licence.

Features

  • 93 animated icons across Huge Icons, Tabler and Phosphor
  • Search by name and keyword, with animation previews
  • Copy the TypeScript component or install it with the shadcn CLI
  • Motion animations on hover and a play control on mobile
  • Control animations with startAnimation() and stopAnimation()
  • Light and dark themes, with npm, pnpm, Yarn and Bun commands

Stack

  • Next.js
  • React
  • TypeScript
  • Motion
  • Tailwind CSS v4
  • shadcn CLI

Info

Platform
Web
License
MIT
Visit the siteView the code