echoes-of-the-ash/images/icons

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:

{
  "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.