Skip to main content

​
Installation

This guide will walk you through installing and using Motion Icons React in your project. The entire setup takes less than 2 minutes.

​
Prerequisites

Before you begin, make sure you have:
  • Node.js 14 or higher installed
  • A React project (16.8+ for hooks support)
  • Basic familiarity with React components

​
Step 1: Install the Package

Install both Motion Icons React and Lucide React using your preferred package manager: 
npm install motion-icons-react lucide-react
Why lucide-react? Motion Icons React is built on top of Lucide React icons, so you’ll need both packages. Lucide provides the icon shapes, while Motion Icons adds the animation layer.

​
Step 2: Import the Styles

The animations require CSS to work. Import the stylesheet in your main application file: Where to add this:
  • Create React App: src/index.tsx or src/App.tsx
  • Next.js: pages/_app.tsx or app/layout.tsx
  • Vite: src/main.tsx
import 'motion-icons-react/style.css';

​
Step 3: Use Your First Animated Icon

Now you’re ready to use animated icons! Here’s how to convert a regular Lucide icon to an animated one: 
import { Heart } from 'lucide-react';

function LikeButton() {
  return <Heart size={24} color="red" />;
}
What changed?
  1. Import MotionIcon instead of individual icon components
  2. Use the name prop to specify which icon (e.g., “Heart”, “Star”, “Bell”)
  3. Add the animation prop to choose an animation type
That’s it! Your icon now has a smooth heartbeat animation.

​
Try Different Animations

Motion Icons React includes 10+ built-in animations. Here are some popular ones:
  • Spin Animation
  • Bounce Animation
  • Pulse Animation
<MotionIcon
  name="Loader2"
  animation="spin"
  size={24}
/>
Perfect for loading indicators.

​
Add Entrance Effects

Entrance animations play once when the icon first appears on screen. You can combine them with regular animations: 
<MotionIcon
  name="Star"
  entrance="zoomIn"      // Plays once on mount
  animation="pulse"      // Loops continuously
  size={32}
  color="#FFD700"
/>
How it works:
  1. Icon zooms in when it first appears (entrance)
  2. Then continues pulsing indefinitely (animation)

​
Make Icons Interactive

Control when animations play using the trigger prop: 
<MotionIcon
  name="Heart"
  animation="heartbeat"
  trigger="hover"        // Animation only plays on hover
  interactive           // Makes icon focusable and clickable
  size={24}
  onClick={() => console.log('Icon clicked!')}
/>
Trigger options:
  • "always" (default): Animation plays continuously
  • "hover": Animation plays only when hovering
  • "click": Animation plays on each click
  • "focus": Animation plays when focused (keyboard navigation)

​
Next Steps

Now that you have Motion Icons React working, explore more features:

Animation Types

Discover all 10+ available animations and entrance effects

Props Reference

Learn about all available props and customization options

Examples

See real-world examples and common patterns

Accessibility

Learn about accessibility features and best practices

​
Common Issues

Make sure you’ve imported the CSS file:
import 'motion-icons-react/style.css';
Ensure you’re using the correct Lucide icon name. Check the Lucide icon library for available icons.
Make sure you have the latest version of TypeScript and that both packages are properly installed.
Pro tip: Start with simple animations like pulse or spin, then experiment with more complex ones as you get comfortable with the library.
⌘I