[Brand] Phase 2: Replace all emoji icons with Lucide icon system

[coderabbitai]

Overview

Systematically replace all 20+ emoji icons throughout the app with the Lucide React Native icon system.

Current State

• Extensive emoji usage despite brand guidelines
• No icon system implementation
• Icons in: tab bar, file tree, approval cards, agent cards, settings

Files Affected (20+)

• app/(tabs)/_layout.tsx - Tab bar icons
• src/components/code/FileTree.tsx - File type icons
• src/components/chat/ApprovalCard.tsx - Action icons
• app/agent/[id].tsx - Agent avatars
• app/(tabs)/settings.tsx - Settings icons
• app/(tabs)/home.tsx - Dashboard icons
• ~15 additional component files

Prerequisites

• Icon wrapper component created (src/components/ui/Icon.tsx)
• Icon mapping file created (src/constants/iconMap.ts)
• Install lucide-react-native dependency

Implementation Plan

Phase 2.1: Navigation Icons (2-3 hours)

• Replace tab bar icons in app/(tabs)/_layout.tsx
  • 🏠 → Home
  • 💬 → MessageSquare
  • ⚙️ → Settings
  • 📊 → BarChart3
• Update navigation components
• Test tab bar visual consistency

Phase 2.2: File Tree Icons (3-4 hours)

• Replace file extension emoji map in src/components/code/FileTree.tsx
• Use getFileIcon() helper from iconMap
• Add folder icons (Folder, FolderOpen)
• Test with various file types

Phase 2.3: Approval Card Icons (2-3 hours)

• Replace action icons in src/components/chat/ApprovalCard.tsx
  • 📝 → FileEdit (Commit)
  • ⬆️ → ArrowUp (Push)
  • 🚀 → Rocket (Deploy)
• Update icon colors using design tokens
• Test approval flow

Phase 2.4: Agent Icons (3-4 hours)

• Replace agent avatar emojis in app/agent/[id].tsx
  • ⚡ → Zap (Implementer)
  • 🎯 → Target (Architect)
  • 🔍 → Search (Reviewer)
  • 🧪 → TestTube2 (Tester)
• Create AgentIcon component for consistent styling
• Update agent list and detail screens

Phase 2.5: Settings Icons (2 hours)

• Replace settings category icons
• Update preference toggle icons
• Add account/profile icons

Phase 2.6: Remaining Components (4-5 hours)

• Dashboard widgets
• Empty states
• Error screens
• Onboarding screens
• Feature callouts

Testing Checklist

• Visual regression testing (compare before/after screenshots)
• iOS rendering (test on physical device)
• Android rendering (test on physical device)
• Dark mode compatibility
• Accessibility (screen reader announces icons)
• Icon sizing consistency
• Color token application

Code Review Checklist

• No emoji strings remain in UI components
• All icons use design token colors
• Proper accessibility labels on all icons
• Icon sizes consistent (16px, 20px, 24px, 32px)
• No hardcoded color values

Success Criteria

• 0 emoji icons remaining in UI (except user-generated content)
• All icons use Lucide via Icon component
• Consistent visual style across app
• Proper semantic icon choices
• Full accessibility support

Priority: HIGH

Estimated Effort: 16-20 hours

Dependencies: Icon system setup (must complete first)

Backlink: Related to PR #64, Issue #80

[jbdevprimary]

Already resolved. After thorough audit: zero emoji icons found in UI components.

The codebase uses Lucide React (lucide-react@^0.563.0) exclusively:

• src/components/icons/PaintDaubeIcon.tsx — Maps 50+ semantic icon variants to Lucide icons with paint daube SVG filter effects
• Tab bar, navigation, file tree, settings, agent cards — all use Lucide icons
• Consistent 16/20/24/32px sizing
• Proper accessibility labels on icon-only buttons

The original issue referenced the old React Native codebase. The web migration already completed this work.