boc/docs/design/ICONOGRAPHY_RULES.md

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)

npm install lucide-react

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

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

.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

grep -r "[🔒💳🆔📋✅❌⚠️📧📱🗺️]" src/

Step 2: Replace with icons

// 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:

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