Skip to main content

​
Pick Your Framework

Start by selecting your framework of choice. Motion Icons React works seamlessly with all modern React frameworks.

Next.js

Set up Motion Icons React in your Next.js application (App Router or Pages Router)

Vite

Set up Motion Icons React in your Vite + React application

​
Quick Installation

If you just want to install the packages quickly, use one of these commands: 
npm install motion-icons-react lucide-react
Why lucide-react? Motion Icons React is built on top of Lucide React icons. Lucide provides the icon shapes, while Motion Icons adds the animation layer.

​
General Setup

After installation, follow these general steps for any React project:

​
Step 1: Import CSS

Import the required CSS file in your main application file: 
import 'motion-icons-react/style.css';

​
Step 2: Use Animated Icons

Import and use the MotionIcon component: 
import { MotionIcon } from 'motion-icons-react';

function App() {
  return (
    <div>
      <MotionIcon 
        name="Heart" 
        animation="heartbeat" 
        size={32}
        color="red"
      />
    </div>
  );
}
That’s it! For framework-specific instructions, see the guides above.

​
TypeScript Configuration

Motion Icons React includes full TypeScript support out of the box. No additional configuration is needed. If you’re using TypeScript, you’ll get:
  • Full type safety for all props
  • IntelliSense for icon names
  • Autocomplete for animation types
  • Type checking for all component properties

​
Verification

Test your installation with this simple component. Copy and paste this into any component file: 
import { MotionIcon } from 'motion-icons-react';

function TestComponent() {
  return (
    <div style={{ padding: '20px', textAlign: 'center' }}>
      <h1>Motion Icons React Test</h1>
      <MotionIcon 
        name="CheckCircle" 
        animation="bounce" 
        size={32} 
        color="blue" 
      />
      <p>If you see a bouncing blue check mark, everything is working!</p>
    </div>
  );
}

export default TestComponent;
What to expect:
  • ✅ A blue check mark icon appears
  • ✅ The icon bounces up and down smoothly
  • ❌ If the icon is static, check that you imported the CSS file
  • ❌ If nothing appears, check the browser console for errors

​
Troubleshooting

Problem: Icons appear but animations don’t work.Solution: Make sure you’ve imported the CSS file:
import 'motion-icons-react/style.css';
Problem: Cannot resolve module 'motion-icons-react'Solution:
  1. Ensure the package is installed: npm list motion-icons-react
  2. Try deleting node_modules and reinstalling: rm -rf node_modules && npm install
  3. Check that you’re importing from the correct package name
Problem: TypeScript compilation errorsSolution:
  1. Ensure you have TypeScript 4.0 or higher
  2. Check that both packages are properly installed
  3. Restart your TypeScript language server
Problem: Nothing appears where the icon should beSolution:
  1. Verify the icon name exists in Lucide: lucide.dev/icons
  2. Check for console errors
  3. Ensure the component is properly imported

​
Bundle Size

Motion Icons React is designed to be lightweight:
  • Core library: ~15KB gzipped
  • CSS animations: ~8KB gzipped
  • Total impact: ~23KB gzipped
The library uses tree-shaking to ensure you only bundle the code you actually use.

​
Browser Support

Motion Icons React supports all modern browsers:
  • Chrome 60+
  • Firefox 55+
  • Safari 12+
  • Edge 79+
Animations automatically fall back gracefully in older browsers and respect the user’s prefers-reduced-motion setting.
⌘I