lucide-animated

React library with Lucide-style icons and animations (hover/controlled) using Motion.

🔗 Live Demo

Installation

In your React project:

npm install lucide-animated react motion
# or
pnpm add lucide-animated react motion
# or
yarn add lucide-animated react motion
# or
bun add lucided-animated react motion

Peer dependencies: react (>=18) and motion (>=11).

Usage

Import icons

import { CircleCheckIcon, TrendingUpIcon, ListIcon } from 'lucide-animated'

Basic usage (hover animation)

By default, the animation triggers when hovering over the icon:

<CircleCheckIcon className="text-blue-500" size={32} />
<TrendingUpIcon size={28} />

Controlled by ref

You can control the animation programmatically using the ref. When using a ref, the hover will not trigger the animation automatically:

import { useRef } from 'react'
import { CircleCheckIcon, type CircleCheckIconHandle } from 'lucide-animated'

function MyComponent() {
  const iconRef = useRef<CircleCheckIconHandle>(null)

  return (
    <>
      <CircleCheckIcon ref={iconRef} size={28} />
      <button onClick={() => iconRef.current?.startAnimation()}>
        Animate
      </button>
      <button onClick={() => iconRef.current?.stopAnimation()}>
        Stop
      </button>
    </>
  )
}

Common props

All icons accept:

• size (number): size in pixels (default varies by icon, e.g.: 24 or 28).
• animateOnHover (boolean): triggers animation on mouse enter (default: true).
• className: CSS classes (e.g., Tailwind for color text-current, text-blue-500).
• All HTMLAttributes<HTMLDivElement> props: onMouseEnter, onMouseLeave, style, etc.

The stroke color follows currentColor, so use className="text-..." to set the color.

Available icons

| Component | Description | |---------------------|------------------| | CircleCheckIcon | Circle with check | | CircleCheckBigIcon| Big circle with check | | DatabaseIcon | Database icon | | GitBranchIcon | Git branch | | ListIcon | List | | MessageCircleIcon | Message bubble | | SquareStackIcon | Square stack | | TrendingUpIcon | Trending up graph | | TrendingDownIcon | Trending down graph |

Build the library

To generate the package in the dist/ folder:

npm install
npm run build

To publish to npm, adjust the name in package.json (e.g., @your-username/lucide-animated) and use npm publish.

License

MIT