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

# Props Reference

> Complete reference for all MotionIcon component props

<style>
  {`
    /* Hide Mintlify branding */
    [class*="powered"],
    [class*="mintlify"],
    .footer-branding,
    .powered-by,
    a[href*="mintlify.com"],
    a[href*="mintlify"] {
    display: none !important;
    visibility: hidden !important;
    }

    /* Light theme - dark text on white background */
    body, p, span, div, h1, h2, h3, h4, h5, h6 {
    color: #1E293B !important;
    background-color: white !important;
    }

    /* Dark theme - white text on black background */
    .dark body, .dark p, .dark span, .dark div, 
    .dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
    color: white !important;
    background-color: #000000 !important;
    }

    /* Blue hover states for both themes */
    a:hover {
    color: #2563EB !important;
    }

    /* Links - dark in light mode, white in dark mode */
    a {
    color: #475569 !important;
    }

    .dark a {
    color: white !important;
    }
    `}
</style>

All props are **optional except `name`**. Defaults are subtle and production-friendly.

## Props by Category

Props are organized into logical groups to reduce cognitive load:

* **Core Props** - Essential icon properties (name, size, color, weight)
* **Animation Props** - Control animations (animation, entrance, trigger)
* **Timing Props** - Fine-tune timing (animationDuration, animationDelay)
* **Interaction Props** - Handle user interaction (interactive, onClick, etc.)
* **Accessibility Props** - Screen reader support (aria-label, role, etc.)

## Minimal Examples

Most use cases need only 1-2 props:

```tsx theme={null}
// Basic animation
<MotionIcon name="Heart" animation="pulse" />

// Entrance only
<MotionIcon name="Bell" entrance="fadeInUp" />

// Interactive hover
<MotionIcon name="ThumbsUp" interactive />
```

## Complete Example

Here's every prop in one place (you rarely need all of these):

```tsx theme={null}
<MotionIcon
  // Required
  name="Heart"
  
  // Appearance
  size={24}
  color="red"
  weight="regular"
  className="my-icon"
  
  // Animation
  animation="heartbeat"
  entrance="zoomIn"
  trigger="hover"
  animationDuration={1000}
  animationDelay={200}
  
  // Interaction
  interactive
  onClick={handleClick}
  onMouseEnter={handleHover}
  
  // Accessibility
  aria-label="Like button"
  role="button"
  tabIndex={0}
/>
```

***

## Core Props

These control the basic appearance of your icon.

### name

<ParamField path="name" type="string" required>
  The name of the Lucide icon to render. Must match exactly with a Lucide icon name.
</ParamField>

```tsx theme={null}
<MotionIcon name="Heart" />
<MotionIcon name="Star" />
<MotionIcon name="Settings" />
<MotionIcon name="AlertTriangle" />
```

**Important notes:**

* Icon names are **case-sensitive** (use "Heart", not "heart")
* Must match exact Lucide icon names (use "CheckCircle", not "CheckCircle2")
* Browse all available icons at [lucide.dev/icons](https://lucide.dev/icons/)

**Common mistakes:**

```tsx theme={null}
// ❌ Wrong - lowercase
<MotionIcon name="heart" />

// ❌ Wrong - incorrect name
<MotionIcon name="check-circle" />

// ✅ Correct
<MotionIcon name="Heart" />
<MotionIcon name="CheckCircle" />
```

### size

<ParamField path="size" type="number" default="24">
  The size of the icon in pixels. Applied to both width and height.
</ParamField>

```tsx theme={null}
<MotionIcon name="Heart" size={16} />  {/* Small */}
<MotionIcon name="Heart" size={24} />  {/* Default */}
<MotionIcon name="Heart" size={32} />  {/* Large */}
<MotionIcon name="Heart" size={48} />  {/* Extra large */}
```

### color

<ParamField path="color" type="string" default="currentColor">
  The color of the icon. Accepts any valid CSS color value.
</ParamField>

```tsx theme={null}
<MotionIcon name="Heart" color="red" />
<MotionIcon name="Heart" color="#ff0000" />
<MotionIcon name="Heart" color="rgb(255, 0, 0)" />
<MotionIcon name="Heart" color="hsl(0, 100%, 50%)" />
```

### weight

<ParamField path="weight" type="'light' | 'regular' | 'bold'" default="regular">
  The stroke weight of the icon.
</ParamField>

```tsx theme={null}
<MotionIcon name="Heart" weight="light" />
<MotionIcon name="Heart" weight="regular" />
<MotionIcon name="Heart" weight="bold" />
```

### className

<ParamField path="className" type="string" default="">
  Additional CSS classes to apply to the icon element.
</ParamField>

```tsx theme={null}
<MotionIcon 
  name="Heart" 
  className="text-red-500 hover:text-red-600" 
/>
```

## Animation Props

### animation

<ParamField path="animation" type="AnimationType" default="none">
  The main animation to apply to the icon.
</ParamField>

Available animation types:

* `"none"` - No animation
* `"pulse"` - Gentle pulsing effect
* `"spin"` - Continuous rotation
* `"bounce"` - Bouncing motion
* `"ping"` - Radar-like ping effect
* `"wiggle"` - Side-to-side wiggle
* `"flip"` - 3D flip animation
* `"heartbeat"` - Heart-like beating
* `"shake"` - Shake effect
* `"swing"` - Pendulum swing
* `"tada"` - Celebration animation
* `"rubber"` - Rubber band effect

```tsx theme={null}
<MotionIcon name="Heart" animation="pulse" />
<MotionIcon name="Loader2" animation="spin" />
<MotionIcon name="Bell" animation="wiggle" />
```

### entrance

<ParamField path="entrance" type="EntranceAnimationType | null" default="null">
  The entrance animation to play when the component mounts.
</ParamField>

Available entrance animations:

* `"fadeIn"` - Fade in from transparent
* `"fadeInUp"` - Fade in from bottom
* `"fadeInDown"` - Fade in from top
* `"fadeInLeft"` - Fade in from left
* `"fadeInRight"` - Fade in from right
* `"scaleIn"` - Scale up from center
* `"slideInUp"` - Slide in from bottom
* `"slideInDown"` - Slide in from top
* `"rotateIn"` - Rotate while fading in
* `"zoomIn"` - Zoom in with scale

```tsx theme={null}
<MotionIcon name="Star" entrance="zoomIn" />
<MotionIcon name="ArrowUp" entrance="fadeInUp" />
<MotionIcon name="Heart" entrance="scaleIn" animation="pulse" />
```

### trigger

<ParamField path="trigger" type="'always' | 'hover' | 'click' | 'focus'" default="always">
  When the main animation should be triggered.
</ParamField>

```tsx theme={null}
<MotionIcon name="Heart" animation="pulse" trigger="always" />
<MotionIcon name="Heart" animation="heartbeat" trigger="hover" />
<MotionIcon name="Bell" animation="shake" trigger="click" />
<MotionIcon name="Search" animation="pulse" trigger="focus" />
```

### animationDuration

<ParamField path="animationDuration" type="number" default="1000">
  The duration of the animation in milliseconds.
</ParamField>

```tsx theme={null}
<MotionIcon name="Heart" animation="pulse" animationDuration={500} />   {/* Fast */}
<MotionIcon name="Heart" animation="pulse" animationDuration={2000} />  {/* Slow */}
```

### animationDelay

<ParamField path="animationDelay" type="number" default="0">
  The delay before the animation starts in milliseconds.
</ParamField>

```tsx theme={null}
<MotionIcon name="Star" animation="bounce" animationDelay={200} />
<MotionIcon name="Heart" entrance="fadeIn" animationDelay={500} />
```

## Interaction Props

### interactive

<ParamField path="interactive" type="boolean" default="false">
  Whether the icon should be interactive (focusable and respond to keyboard events).
</ParamField>

```tsx theme={null}
<MotionIcon 
  name="Heart" 
  interactive 
  animation="heartbeat" 
  trigger="hover" 
/>
```

### onClick

<ParamField path="onClick" type="(event: MouseEvent) => void">
  Click event handler for the icon.
</ParamField>

```tsx theme={null}
<MotionIcon 
  name="Heart" 
  onClick={() => console.log('Icon clicked!')} 
/>
```

### onMouseEnter

<ParamField path="onMouseEnter" type="(event: MouseEvent) => void">
  Mouse enter event handler for the icon.
</ParamField>

```tsx theme={null}
<MotionIcon 
  name="Heart" 
  onMouseEnter={() => console.log('Mouse entered!')} 
/>
```

### onMouseLeave

<ParamField path="onMouseLeave" type="(event: MouseEvent) => void">
  Mouse leave event handler for the icon.
</ParamField>

```tsx theme={null}
<MotionIcon 
  name="Heart" 
  onMouseLeave={() => console.log('Mouse left!')} 
/>
```

## Accessibility Props

### aria-label

<ParamField path="aria-label" type="string">
  Accessible label for screen readers.
</ParamField>

```tsx theme={null}
<MotionIcon 
  name="Heart" 
  aria-label="Add to favorites" 
/>
```

### aria-hidden

<ParamField path="aria-hidden" type="boolean">
  Whether the icon should be hidden from screen readers.
</ParamField>

```tsx theme={null}
<MotionIcon 
  name="Star" 
  aria-hidden={true}  // Decorative icon
/>
```

### role

<ParamField path="role" type="string">
  ARIA role for the icon element.
</ParamField>

```tsx theme={null}
<MotionIcon 
  name="Loader2" 
  animation="spin" 
  role="status" 
  aria-label="Loading"
/>
```

### tabIndex

<ParamField path="tabIndex" type="number">
  Tab index for keyboard navigation.
</ParamField>

```tsx theme={null}
<MotionIcon 
  name="Settings" 
  interactive 
  tabIndex={0} 
/>
```

## Complete Example

Here's an example using multiple props together:

```tsx theme={null}
<MotionIcon
  name="Heart"
  size={32}
  color="red"
  weight="bold"
  animation="heartbeat"
  entrance="zoomIn"
  trigger="hover"
  animationDuration={800}
  animationDelay={200}
  interactive
  className="cursor-pointer hover:scale-110 transition-transform"
  onClick={handleLike}
  onMouseEnter={handleMouseEnter}
  aria-label="Add to favorites"
  role="button"
  tabIndex={0}
/>
```

## TypeScript Support

All props are fully typed for TypeScript users:

```typescript theme={null}
import { MotionIcon, type MotionIconProps } from 'motion-icons-react';

// Props are fully typed
const iconProps: MotionIconProps = {
  name: "Heart",           // ✅ Valid icon name
  animation: "pulse",      // ✅ Valid animation
  size: 24,               // ✅ Number
  color: "red",           // ✅ String
  // name: "InvalidIcon"   // ❌ TypeScript error
};

function MyIcon(props: MotionIconProps) {
  return <MotionIcon {...props} />;
}
```

## Default Values Summary

| Prop                | Default Value    |
| ------------------- | ---------------- |
| `size`              | `24`             |
| `color`             | `"currentColor"` |
| `weight`            | `"regular"`      |
| `animation`         | `"none"`         |
| `entrance`          | `null`           |
| `trigger`           | `"always"`       |
| `interactive`       | `false`          |
| `animationDuration` | `1000`           |
| `animationDelay`    | `0`              |
| `className`         | `""`             |