lucide-animated: Turn Lucide Icons into Animated React Components

Introduction

A regular icon stops moving once you place it inside a button. If you want to add a bit of feedback to search, download, or notification actions, you often have to split up the SVG paths yourself, add keyframes, and fine-tune the animation timing.

I just tried lucide-animated. It turns Lucide icons into animated components that you can add directly to a React project. The animation plays on hover, so you do not have to handle the SVG from scratch.

Try It First

Here are a few icons to play with. On desktop, hover over a card; on mobile, tap it. Search results stay within the existing grid instead of opening in a separate panel that can easily overflow the screen.

For this preview, I picked several common Lucide icons from the repo and adapted them for embedding in the article. For the complete icon collection and original Motion animations, refer to the official website.

How Do You Add It to a React Project?

lucide-animated does not make you install the entire icon collection in your project. Instead, you use the shadcn CLI to add only the components you need. For example, to add activity:

bash

npx shadcn@latest add "https://lucide-animated.com/r/activity.json"

This generates components/icons/activity.tsx in your project. The first installation also adds the motion dependency. You can then import the component directly:

tsx

import { ActivityIcon } from '@/components/icons/activity'

export function Status() {
  return <ActivityIcon className="size-6" aria-label="Activity" />
}

By default, the component plays its animation on hover. It also accepts standard SVG props, so you can change its size, color, events, and accessibility labels. It is currently intended mainly for React 18 and later projects. The official README also lists community ports for Vue, Svelte, Angular, and Flutter.

You Can Also Hand It Directly to an Agent

The project provides more than an icon page for people to browse. It also offers skill.md, llms.txt, and an MCP endpoint. An Agent can search for an icon by name, then retrieve the installation command and usage example for a single component.

The simplest approach is to give the Skill URL and your request to an Agent with web and terminal access:

text

Read https://lucide-animated.com/skill.md,
find an animated icon suitable for "download complete" in this React project,
install it and add it to the download button while preserving the aria-label.

If your Agent supports remote MCP servers, you can also connect it to https://lucide-animated.com/mcp. The official tools can search icons, list them, and retrieve details for a single icon, which is much cleaner than stuffing the entire icon list into a prompt.

Where Does It Fit?

I would not replace every icon with an animated one. Having a dozen icons animate at once in a navigation bar can easily become distracting. It works best where there is clear interaction feedback, such as when a download finishes, content is copied successfully, a menu expands, or a notification appears.

The benefit of this approach is that you only add the components you need, and the code stays directly in your own project. If you want to change the animation timing or trigger, you do not have to wait for the package author to add an API. The tradeoff is that when an icon is updated upstream, you have to decide whether to sync it again yourself.