# Iconography Rules — LandveX Design System

## Core Principle

**No generic emojis. Ever.**

Generic emojis (🔒 💳 🆔 📋 ✅ ❌ ⚠️) are:
- Visually inconsistent across platforms
- Not controllable (Apple, Google, Samsung render differently)
- Unprofessional in enterprise contexts
- Impossible to brand

## Rule: Custom SVG Icons Only

| ❌ Forbidden | ✅ Required |
|-------------|-------------|
| 🔒 Lock | Custom lock icon from icon library |
| 💳 Card | Custom payment icon |
| 🆔 ID | Custom identity/verification icon |
| 📋 Clipboard | Custom document icon |
| ✅ Check | Custom checkmark icon |
| ❌ Cross | Custom X/close icon |
| ⚠️ Warning | Custom warning triangle |
| 📧 Email | Custom envelope icon |
| 📱 Phone | Custom phone icon |
| 🗺️ Map | Custom map pin icon |

## Implementation

### Option 1: Lucide Icons (recommended)
```bash
npm install lucide-react
```

```tsx
import { Lock, CreditCard, Shield, FileText, Check, X, AlertTriangle, Mail, Phone, MapPin } from 'lucide-react';

// Use instead of emojis
<Lock className="icon-security" />
<CreditCard className="icon-payment" />
<Shield className="icon-verified" />
```

### Option 2: Custom SVG
```tsx
const IconLock = () => (
  <svg viewBox="0 0 24 24" className="icon">
    <rect x="5" y="11" width="14" height="10" rx="2" />
    <path d="M7 11V7a5 5 0 0110 0v4" />
  </svg>
);
```

## Icon Categories

### Security & Trust
| Purpose | Lucide Icon | Class |
|---------|-------------|-------|
| Secure/Locked | `Lock` | `icon-security` |
| Verified | `ShieldCheck` | `icon-verified` |
| GDPR/Compliance | `FileCheck` | `icon-compliance` |
| Identity | `Fingerprint` | `icon-identity` |

### Payment & Financial
| Purpose | Lucide Icon | Class |
|---------|-------------|-------|
| Payment | `CreditCard` | `icon-payment` |
| Payout | `Banknote` | `icon-payout` |
| Credits | `Coins` | `icon-credits` |
| Invoice | `Receipt` | `icon-invoice` |

### Communication
| Purpose | Lucide Icon | Class |
|---------|-------------|-------|
| Email | `Mail` | `icon-email` |
| SMS | `MessageSquare` | `icon-sms` |
| Notification | `Bell` | `icon-notification` |
| Support | `Headphones` | `icon-support` |

### Status
| Purpose | Lucide Icon | Class |
|---------|-------------|-------|
| Success | `CheckCircle2` | `icon-success` |
| Error | `XCircle` | `icon-error` |
| Warning | `AlertTriangle` | `icon-warning` |
| Info | `Info` | `icon-info` |
| Pending | `Clock` | `icon-pending` |

### Actions
| Purpose | Lucide Icon | Class |
|---------|-------------|-------|
| Upload | `Upload` | `icon-upload` |
| Download | `Download` | `icon-download` |
| Edit | `Pencil` | `icon-edit` |
| Delete | `Trash2` | `icon-delete` |
| Search | `Search` | `icon-search` |
| Filter | `Filter` | `icon-filter` |

## quiXzoom-Specific Icons

| Feature | Icon | Usage |
|---------|------|-------|
| Camera/Mission | `Camera` | Mission cards |
| Location | `MapPin` | Mission location |
| Distance | `Navigation` | Distance indicator |
| Time | `Clock` | Estimated time |
| Photos | `Image` | Photo count |
| Credits | `Coins` | Credit reward |
| Approval | `CheckCircle2` | Approval status |
| Payout | `Banknote` | Weekly payout |

## Styling

```css
.icon {
  width: 20px;
  height: 20px;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-small { width: 16px; height: 16px; }
.icon-large { width: 24px; height: 24px; }
.icon-xl { width: 32px; height: 32px; }

/* Status colors */
.icon-success { color: var(--color-success-500); }
.icon-error { color: var(--color-danger-500); }
.icon-warning { color: var(--color-warning-500); }
.icon-info { color: var(--color-info-500); }
```

## Migration Guide

### Step 1: Find all emojis
```bash
grep -r "[🔒💳🆔📋✅❌⚠️📧📱🗺️]" src/
```

### Step 2: Replace with icons
```tsx
// Before
<span>🔒 GDPR Compliant</span>

// After
<span><Lock className="icon icon-security" /> GDPR Compliant</span>
```

### Step 3: Verify
- No emojis in source code
- All icons from approved library
- Consistent sizing and styling

## Enforcement

**ESLint Rule:**
```json
{
  "rules": {
    "no-restricted-syntax": [
      "error",
      {
        "selector": "Literal[value=/[\\u{1F300}-\\u{1F9FF}]/u]",
        "message": "No emojis allowed. Use Lucide icons instead."
      }
    ]
  }
}
```

## Status

**Rule:** ✅ LOCKED
**Migration:** 🔄 IN PROGRESS (quixzoom.com)
**Target:** Zero emojis by 2026-07-05