# Docyrus Icon
URL: /docs/web/components/docyrus-icon

Docyrus Icon component with multiple variants and sizes.

**Demo:**

```tsx
'use client';
// @custom-demo

import { useState } from 'react';

import { DocyrusIcon } from '@docyrus/ui/components/docyrus-icon';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from '@docyrus/ui/primitives/ui/select';
import { cn } from '@docyrus/ui/primitives/lib/utils';

export function DocyrusIconDemo() {
  type Size = 'xs' | 'sm' | 'default' | 'lg' | 'xl';
  const [size, setSize] = useState
                  
                    
                    
                    
                    
                  
                
              </div>
              <div className="space-y-1.5">
                <span className="text-xs font-medium">Animation</span>
                
                  
                    
                    
                    
                    
                  
                
              </div>
            </div>
          </div>
        </div>
      </div>
      
    </div>
  );
}
```

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/ui-docyrus-icon
```

**Dependencies:**
- [react-inlinesvg](https://www.npmjs.com/package/react-inlinesvg)
- [class-variance-authority](https://www.npmjs.com/package/class-variance-authority)

## Usage

```tsx
import {
  DocyrusIcon
} from "@docyrus/ui/components/docyrus-icon";

```

## Sizes

| Size | Description |
|------|-------------|
| `xs` | Extra small — `size-3` |
| `sm` | Small — `size-4` |
| `default` | Default — `size-5` |
| `lg` | Large — `size-6` |
| `xl` | Extra large — `size-8` |

## Animation

| Animation | Description |
|-----------|-------------|
| `none` | Default (no animation) |
| `spin` | Spin — `animate-spin` |
| `pulse` | Pulse — `animate-pulse` |
| `bounce` | Bounce — `animate-bounce` |
| `ping` | Ping — `animate-ping` |

## API Reference

| Prop | Type | Default |
|------|------|---------|
| `size` | `"xs"` \| `"sm"` \| `"default"` \| `"lg"` \| `"xl"` | `"default"` |
| `animation` | `"none"` \| `"spin"` \| `"pulse"` \| `"bounce"` \| `"ping"` | `"default"` |
| `icon` | `string` | — |
| `lib` | `string` | — |
| `group` | `string \| null` | — |
| `className` | `string` | — |