Skip to main content
Motion Icons React is a React library that adds smooth, customizable animations to Lucide icons. Think of it as Lucide React with superpowers - you get all the icons you love, plus built-in animations like spin, bounce, pulse, and more.

​
Why Use Motion Icons React?

Instead of writing custom CSS animations for every icon, Motion Icons React gives you:
  • Pre-built animations: 10+ ready-to-use animation types
  • Zero configuration: Works out of the box with sensible defaults
  • Full control: Customize timing, triggers, and behavior
  • TypeScript support: Complete type safety and autocomplete
  • Accessibility first: Respects user motion preferences automatically

​
Key Features

Easy to Use

Drop-in replacement for Lucide React icons with zero configuration

Rich Animations

10+ built-in animations including spin, bounce, wiggle, and more

Entrance Effects

Eye-catching entrance animations to grab user attention

Accessible

Automatically respects prefers-reduced-motion settings

Lightweight

Minimal bundle size impact on your application

TypeScript Ready

Full type safety and IntelliSense support included

​
Quick Example

Here’s a simple comparison showing how easy it is to add animations: 
import { Heart } from 'lucide-react';

function LikeButton() {
  return <Heart size={24} color="red" />;
}
// Result: Static heart icon
That’s it! Just replace your Lucide icon with MotionIcon and add an animation prop.

​
Get Started

Ready to animate your icons? Follow our step-by-step guide:

Quick Start Guide

Install and set up Motion Icons React in under 2 minutes

​
Explore the Documentation

Installation

Install the package and set up your first animated icon

Animation Types

Explore all available animations and entrance effects

Props & API

Complete reference for all component props and options

Examples

Real-world examples and common use cases
<MotionIcon
  name="Loader2"
  animation="spin"
  size={20}
  className="text-gray-500"
/>

<MotionIcon
  name="Heart"
  animation="heartbeat"
  trigger="hover"
  interactive
  size={24}
  onClick={() => console.log('Liked!')}
/>

<MotionIcon
  name="Bell"
  animation="shake"
  trigger="click"
  entrance="fadeInUp"
  interactive
  size={24}
  onClick={() => console.log('Notification clicked')}
/>

​
Community & Support

GitHub Issues

Report bugs or request new features

Discussions

Ask questions and share ideas with the community
⌘I