# Icon System

## Structure

```
icons/
├── items/          # Item icons (weapons, consumables, materials, etc.)
├── ui/            # UI elements (buttons, arrows, close, menu, etc.)
├── status/        # Status indicators (health, stamina, level, etc.)
└── actions/       # Action icons (attack, defend, flee, interact, etc.)
```

## Icon Specifications

### Format
- **Primary:** SVG (vector, scalable, small file size)
- **Fallback:** PNG (universal compatibility)
- **Avoid:** JPG/JPEG (not suitable for icons with transparency)

### Size
- **Standard Icons:** 64x64px
- **Large Icons:** 128x128px (for important UI elements)
- **Small Icons:** 32x32px (for compact displays)

### Naming Convention
- Use kebab-case: `iron-sword.svg`, `health-potion.png`
- Be descriptive: `attack-action.svg`, `stamina-icon.svg`
- Match item_id when possible: if item_id is "iron_sword", use "iron-sword.svg"

### Color
- Use transparent backgrounds
- Consistent style across all icons
- Consider dark mode compatibility

## Usage in Code

Icons are referenced via the `icon_path` field in data structures:

```json
{
  "id": "iron_sword",
  "name": "Iron Sword",
  "icon_path": "icons/items/iron-sword.svg",
  "emoji": "⚔️"  // Kept as fallback
}
```

## Migration from Emojis

Emojis are kept as fallback for:
1. Backward compatibility
2. Development placeholder
3. Platforms that don't load custom icons

The UI will prefer `icon_path` over `emoji` when available.