# Icons Style Guide

## Overview

The VUER UI Kit utilizes Lucide icons as its foundational icon system, providing a "comprehensive collection of beautifully crafted, customizable icons that maintain consistency" across applications.

## Icon Sizing Guidelines

| Size | Use Case | Description |
|------|----------|-------------|
| 16px | Dense interfaces | Compact layout icons |
| 20px | Default UI | Standard element sizing |
| 24px | Buttons/Actions | Primary action buttons |
| 32px | Emphasis | Large touch target icons |

## Color Application

| Type | Usage | Application |
|------|-------|-------------|
| Current Color | Default | Inherits parent text color |
| Gray Scale | Secondary | Disabled states and subtle elements |
| Accent Colors | Emphasis | Actions and highlights (use sparingly) |

## Implementation Guidelines

**Best Practices:**
- Maintain consistent sizing within interface sections
- Scale proportionally when resizing
- Ensure minimum 44px touch targets for mobile devices

### Stroke Width Options

| Width | Usage |
|-------|-------|
| 1.5 | Default |
| 1 | Light |
| 2 | Bold |

## Code Examples

**Standard Usage:**
```javascript
import { ChevronUp, Plus, Search } from 'lucide-react';

<ChevronUp size={24} strokeWidth={1.5} />
```

**Custom Styling:**
```javascript
<Plus
  size={20}
  strokeWidth={2}
  className="text-blue-500 hover:text-blue-700"
/>
```

## Accessibility

Always provide descriptive labels for icon-only buttons:
```javascript
<button aria-label="Delete item">
  <Trash size={20} />
</button>
```

Hide purely decorative icons from screen readers using `aria-hidden="true"`.

## Responsive Implementation

Adjust sizes based on viewport dimensions for optimal display across devices.