Quick Start

Get Motion Icons React up and running in under 2 minutes

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

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:

Before (Lucide React)

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.

Good Defaults

All animation props are optional. Motion Icons React uses subtle, production-friendly defaults:

• Size: 24px (standard icon size)
• Color: currentColor (inherits from parent)
• Animation: none (static by default)
• Duration: 1000ms (1 second)
• Trigger: always (continuous animation)
• Weight: regular (balanced stroke)

You only specify what you want to change:

// Minimal - uses all defaults except animation
<MotionIcon name="Heart" animation="pulse" />

// Custom size and color
<MotionIcon name="Star" size={32} color="#FFD700" />

// Full control (only when needed)
<MotionIcon
  name="Bell"
  size={48}
  color="red"
  animation="shake"
  animationDuration={500}
  trigger="hover"
/>

Try Different Animations

Motion Icons React includes 15+ built-in animations. Here are some popular ones:

Spin Animation

<MotionIcon
  name="Loader2"
  animation="spin"
  size={24}
/>

Perfect for loading indicators.

Bounce Animation

<MotionIcon
  name="ArrowUp"
  animation="bounce"
  size={24}
/>

Great for call-to-action buttons.

Pulse Animation

<MotionIcon
  name="Bell"
  animation="pulse"
  size={24}
/>

Ideal for notifications.

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

Animations not working

Make sure you’ve imported the CSS file:

import 'motion-icons-react/style.css';

Icon not found

Ensure you’re using the correct Lucide icon name. Check the Lucide icon library for available icons.

TypeScript errors

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.