> ## Documentation Index
> Fetch the complete documentation index at: https://none-9e5c6865.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Installation

> Get started with Motion Icons React in your project

## Pick Your Framework

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

<CardGroup cols={2}>
  <Card title="Next.js" icon="N" href="/essentials/nextjs-setup">
    Set up Motion Icons React in your Next.js application (App Router or Pages Router)
  </Card>

  <Card title="Vite" icon="zap" href="/essentials/vite-setup">
    Set up Motion Icons React in your Vite + React application
  </Card>
</CardGroup>

## Quick Installation

If you just want to install the packages quickly, use one of these commands:

<CodeGroup>
  ```bash npm theme={null}
  npm install motion-icons-react lucide-react
  ```

  ```bash yarn theme={null}
  yarn add motion-icons-react lucide-react
  ```

  ```bash pnpm theme={null}
  pnpm add motion-icons-react lucide-react
  ```

  ```bash bun theme={null}
  bun add motion-icons-react lucide-react
  ```
</CodeGroup>

<Note>
  **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.
</Note>

## 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:

```tsx theme={null}
import 'motion-icons-react/style.css';
```

### Step 2: Use Animated Icons

Import and use the MotionIcon component:

```tsx theme={null}
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:

```tsx theme={null}
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

<AccordionGroup>
  <Accordion title="CSS not loading">
    **Problem:** Icons appear but animations don't work.

    **Solution:** Make sure you've imported the CSS file:

    ```tsx theme={null}
    import 'motion-icons-react/style.css';
    ```
  </Accordion>

  <Accordion title="Module not found error">
    **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
  </Accordion>

  <Accordion title="TypeScript errors">
    **Problem:** TypeScript compilation errors

    **Solution:**

    1. Ensure you have TypeScript 4.0 or higher
    2. Check that both packages are properly installed
    3. Restart your TypeScript language server
  </Accordion>

  <Accordion title="Icons not displaying">
    **Problem:** Nothing appears where the icon should be

    **Solution:**

    1. Verify the icon name exists in Lucide: [lucide.dev/icons](https://lucide.dev/icons/)
    2. Check for console errors
    3. Ensure the component is properly imported
  </Accordion>
</AccordionGroup>

## 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+

<Note>
  Animations automatically fall back gracefully in older browsers and respect the user's `prefers-reduced-motion` setting.
</Note>