Icon System

This document covers every icon library in use, which icons are used, where they appear, and the exact import syntax.

Libraries

Library	Version	Used In	Purpose
`lucide-react`	bundled	all apps	General UI icons (nav, actions, status, etc.)
`react-icons/fa6`	5.5.0	dashboard, dm	Social platform brand icons
`react-icons/fa`	5.5.0	dashboard	Google icon (not available in fa6)
`react-icons/si`	5.5.0	dashboard	Third-party service logos (Google Ads, Analytics, Zoho)

Rule: Use lucide-react for all generic UI icons. Only reach for react-icons for brand/platform icons that don’t exist in lucide.

These icons only appear in social-facing features (social posts, channels, platform previews).

Social Platform Icons (`react-icons/fa6`)


import { FaInstagram, FaLinkedin, FaFacebook, FaTiktok, FaXTwitter, FaWordpress, FaMeta } from "react-icons/fa6";

Icon	Platform	Brand Color	Size Used
`FaInstagram`	Instagram	`#E1306C`	`w-5 h-5` (list), `w-6 h-6` (detail/channels)
`FaLinkedin`	LinkedIn	`#0A66C2`	`w-5 h-5` (list), `w-6 h-6` (detail/channels)
`FaFacebook`	Facebook	`#1877F2`	`w-5 h-5` (list), `w-6 h-6` (detail/channels)
`FaXTwitter`	X / Twitter	`currentColor`	`w-5 h-5` (list), `w-6 h-6` (detail/channels)
`FaTiktok`	TikTok	`#EE1D52`	`w-5 h-5` (list), `w-6 h-6` (detail/channels)
`FaWordpress`	WordPress	`#21759B`	`w-6 h-6` (channels)
`FaMeta`	Meta	`#0082FB`	`w-6 h-6` (channels)

Apply brand colors via style={{ color: "#E1306C" }} — not Tailwind classes, since Tailwind’s palette doesn’t map to exact brand hex values.

Files:

apps/dashboard/src/app/(dashboard)/social/SocialPostsClient.tsx
apps/dashboard/src/app/(dashboard)/social/[id]/SocialPostDetail.tsx
apps/dashboard/src/app/(dashboard)/channels/ChannelsClient.tsx
apps/dm/src/app/(dm)/social/SocialDMClient.tsx
apps/dm/src/app/(dm)/social/[id]/SocialPostDMDetail.tsx

Google Icon (`react-icons/fa`)


import { FaGoogle } from "react-icons/fa";

FaGoogle does not exist in fa6 — must import from react-icons/fa (Font Awesome 4).

Files: apps/dashboard/src/app/(dashboard)/channels/ChannelsClient.tsx

Third-Party Service Icons (`react-icons/si`)


import { SiGoogleads, SiGoogleanalytics, SiGooglesearchconsole, SiZoho } from "react-icons/si";

Icon	Service
`SiGoogleads`	Google Ads
`SiGoogleanalytics`	Google Analytics
`SiGooglesearchconsole`	Google Search Console
`SiZoho`	Zoho CRM

Note: SiBing / SiMicrosoftbing do not exist in react-icons/si@5.x. Use Globe from lucide-react for Bing Webmaster Tools.

Files: apps/dashboard/src/app/(dashboard)/channels/ChannelsClient.tsx

Lucide-React Icons

All imports follow this pattern:


import { IconName } from "lucide-react";

Icons are grouped by function below.

Icon	Import	Where Used	Purpose
`House`	`lucide-react`	`apps/dashboard/src/components/sidebar.tsx`	Dashboard home nav item
`LayoutDashboard`	`lucide-react`	`apps/dm/src/components/dm-nav.tsx`, `apps/manage/src/components/manage-sidebar.tsx`	Dashboard nav in DM and Manage
`ChevronLeft`	`lucide-react`	sidebars, pagination, nav	Collapse sidebar, go back, paginate left
`ChevronRight`	`lucide-react`	sidebars, pagination, nav	Expand sidebar, go forward, paginate right
`ChevronDown`	`lucide-react`	dropdowns, accordions	Expand dropdown, accordion
`ChevronUp`	`lucide-react`	accordions	Collapse accordion
`ArrowLeft`	`lucide-react`	detail pages across all apps	Back navigation on detail/edit pages
`ArrowRight`	`lucide-react`	`apps/dashboard/src/app/(dashboard)/dashboard/page.tsx`	Forward indicator on dashboard
`ExternalLink`	`lucide-react`	`apps/dashboard/src/app/(dashboard)/channels/ChannelsClient.tsx`	Opens external URL

User & Account

Icon	Import	Where Used	Purpose
`User`	`lucide-react`	sidebar, profile, activity, register steps	Individual user representation
`Users`	`lucide-react`	tenant pages, user mgmt, plans, DM sidebar	User groups / team management
`UserCircle`	`lucide-react`	`apps/dm/src/components/topbar.tsx`	Profile avatar in topbar
`Camera`	`lucide-react`	`apps/dashboard/.../profile/ProfilePageClient.tsx`, `apps/dm/.../profile/ProfilePageClient.tsx`	Upload profile photo
`LogOut`	`lucide-react`	all topbars, sign-out buttons	Sign out action
`Lock`	`lucide-react`	`apps/dashboard/.../settings/agents/AgentsPageClient.tsx`	Locked/restricted agent
`Ban`	`lucide-react`	`apps/dashboard/.../settings/profile/ProfilePageClient.tsx`	Profile restriction/ban state
`ShieldCheck`	`lucide-react`	`apps/manage/src/app/(auth)/login/page.tsx`	Security / admin login indicator
`ShieldOff`	`lucide-react`	`apps/dashboard/src/app/(dashboard)/LockedScreen.tsx`	Locked tenant screen

Agents & AI

Icon	Import	Where Used	Purpose
`Bot`	`lucide-react`	agent pages, sidebars, activity log (all apps)	Agent / bot features
`Zap`	`lucide-react`	skills pages, agent runs, agent analytics	Skills and AI-powered actions
`Cpu`	`lucide-react`	`agents/[agentId]`, `activity-log` (manage, dm)	Processing / system resource
`Sparkles`	`lucide-react`	topbar, register, dashboard	Premium / AI highlight
`Lightbulb`	`lucide-react`	sidebar (dashboard), dm-nav	Insights / strategy nav item
`Brain`	`lucide-react`	`apps/manage/src/components/manage-sidebar.tsx`	Knowledge / AI knowledge base nav

Content & Documents

Icon	Import	Where Used	Purpose
`FileText`	`lucide-react`	blog, deliverables, strategy, reports, profile (all apps)	Blog posts, documents, text content
`File`	`lucide-react`	`apps/dashboard/.../docs/DocsClient.tsx`	Generic file
`FileSpreadsheet`	`lucide-react`	`apps/dashboard/.../docs/DocsClient.tsx`	Excel/spreadsheet upload
`ImageIcon`	`lucide-react`	`apps/dashboard/.../social/[id]/SocialPostDetail.tsx`	Image attachment indicator
`Images`	`lucide-react`	sidebar (dashboard), dm-nav	Gallery / media nav item
`Hash`	`lucide-react`	blog detail, social post detail	Hashtags
`ScrollText`	`lucide-react`	manage agent detail, agent runs	Long-form logs / full output
`Layers`	`lucide-react`	manage agent detail, sidebars	Content layers / categorization
`Tag`	`lucide-react`	agent detail pages (all apps)	Labels, model tags

Actions

Icon	Import	Where Used	Purpose
`Plus`	`lucide-react`	skills, templates, user actions, client-info	Add / create new item
`Pencil`	`lucide-react`	manage agent detail, email/telegram templates	Edit action
`Trash2`	`lucide-react`	blog, notification settings, docs	Delete / remove
`Save`	`lucide-react`	profile, skill form, manage agent edit	Save form
`Download`	`lucide-react`	strategy, blog post detail, social post detail	Export / download document
`Upload`	`lucide-react`	`apps/dashboard/.../docs/DocsClient.tsx`	Upload file
`Archive`	`lucide-react`	`apps/manage/.../skills/page.tsx`	Archive a skill
`Send`	`lucide-react`	chat components (all apps)	Send chat message
`RefreshCw`	`lucide-react`	docs, register, strategy, deliverables	Reload / regenerate
`X`	`lucide-react`	chat panel, modals, skill form	Close / dismiss
`Search`	`lucide-react`	blog, templates, audit logs, skills (all apps)	Search input
`ThumbsUp`	`lucide-react`	`apps/dashboard/.../settings/context/ApproveButton.tsx`	Approve context action
`SlidersHorizontal`	`lucide-react`	`apps/manage/.../audit-logs/AuditLogsClient.tsx`	Advanced filters
`MoreHorizontal`	`lucide-react`	`apps/dashboard/.../strategy/StrategyClient.tsx`	More options menu

Status & Feedback

Icon	Import	Where Used	Purpose
`CheckCircle`	`lucide-react`	blog, social, notifications, create tenant	Success / approved state
`CheckCircle2`	`lucide-react`	dashboard, activities, deliverables, goals	Completed / verified state
`Check`	`lucide-react`	strategy, register steps, tenant switcher, plan page	Checkmark / selected
`CheckSquare`	`lucide-react`	`apps/dm/.../overview/page.tsx`	Checked state
`XCircle`	`lucide-react`	blog, social, deliverables, profile, analytics	Error / rejected state
`AlertTriangle`	`lucide-react`	activities, deliverables, goals, agent pages	Warning / caution
`AlertCircle`	`lucide-react`	notifications, deliverables, overview, manage runs	Alert / error indicator
`Info`	`lucide-react`	`apps/manage/.../templates/telegram/TelegramTemplatesClient.tsx`	Informational tooltip

Metrics & Analytics

Icon	Import	Where Used	Purpose
`Activity`	`lucide-react`	dashboard, agent run stats, analytics, overview	Activity metric / graph
`BarChart2`	`lucide-react`	sidebar (dashboard), activities, deliverables	Analytics / reporting nav
`TrendingUp`	`lucide-react`	goals, leads, run stats, deliverables	Upward trend
`ArrowUpRight`	`lucide-react`	goals, deliverables	Positive growth indicator
`DollarSign`	`lucide-react`	agent run stats (all apps)	Cost metric
`Percent`	`lucide-react`	`apps/dashboard/.../leads/LeadsClient.tsx`	Percentage KPI

Time & Scheduling

Icon	Import	Where Used	Purpose
`Clock`	`lucide-react`	agent pages, blog, social, run stats, activities	Time / duration
`Calendar`	`lucide-react`	activity detail, agent detail	Single calendar date
`CalendarDays`	`lucide-react`	sidebar, dm-nav, deliverables period select	Date range / period selector

Notifications & Messaging

Icon	Import	Where Used	Purpose
`Bell`	`lucide-react`	all topbars, notification settings, client-info	Notifications
`Mail`	`lucide-react`	manage sidebar, templates, client-info, LockedScreen	Email
`MessageCircle`	`lucide-react`	chat FAB, chat panel, online users (all apps)	Chat / message
`MessageSquare`	`lucide-react`	manage sidebar, telegram templates, strategy	Template / message
`MessageSquarePlus`	`lucide-react`	`apps/dm/src/components/dm-nav.tsx`	Create new message
`Send`	`lucide-react`	chat conversation view (all apps)	Send message

Business & Billing

Icon	Import	Where Used	Purpose
`CreditCard`	`lucide-react`	profile, plans, register steps, billing	Payment / plan
`Receipt`	`lucide-react`	`apps/manage/src/components/manage-sidebar.tsx`	Invoices nav
`Wallet`	`lucide-react`	`apps/manage/src/components/manage-sidebar.tsx`	Billing nav
`Package`	`lucide-react`	dashboard, activities, deliverables, plans	Deliverables / packages
`PackageCheck`	`lucide-react`	sidebar (dashboard), dm-nav	Completed deliverables nav
`DollarSign`	`lucide-react`	agent run stats	Cost

Entities & Organization

Icon	Import	Where Used	Purpose
`Building2`	`lucide-react`	manage sidebar, tenants, create tenant, register	Company / tenant
`Globe`	`lucide-react`	channels, plans, activities	Website / generic web; also fallback for Bing
`MapPin`	`lucide-react`	activities, client-info, register, create tenant	Location / address
`Flag`	`lucide-react`	goals (dashboard, dm)	Goal marker
`Target`	`lucide-react`	sidebar (dashboard), activities, deliverables, leads	Marketing goals / objectives
`Trophy`	`lucide-react`	sidebar (dashboard), dm-nav, dashboard page	Achievements
`Megaphone`	`lucide-react`	activities, deliverables	Announcements / marketing
`Share2`	`lucide-react`	social posts, deliverables, approvals	Social sharing / publishing
`Plug`	`lucide-react`	sidebar (dashboard), channels	Integrations / channels
`Briefcase`	`lucide-react`	`apps/dashboard/.../dashboard/page.tsx`	Business context
`Phone`	`lucide-react`	`apps/dashboard/.../LockedScreen.tsx`	Contact phone

Visibility & Auth

Icon	Import	Where Used	Purpose
`Eye`	`lucide-react`	password fields, blog list, social list, templates	Show content / password
`EyeOff`	`lucide-react`	password fields, profile	Hide content / password

Theme Toggle

Icon	Import	Where Used	Purpose
`Sun`	`lucide-react`	theme-toggle (all apps), topbars	Light mode
`Moon`	`lucide-react`	theme-toggle (all apps), topbars	Dark mode
`Monitor`	`lucide-react`	theme-toggle (all apps), topbars	System/auto mode

Settings & Configuration

Icon	Import	Where Used	Purpose
`Settings`	`lucide-react`	topbar (dashboard), manage topbar	Settings page link
`Wrench`	`lucide-react`	manage agent detail, sidebar	Configuration / tools

Lists & Tasks

Icon	Import	Where Used	Purpose
`ListTodo`	`lucide-react`	sidebar (dashboard), dm-nav	Activity / task list nav
`ClipboardList`	`lucide-react`	sidebar (dashboard), dm-nav, activity log	Audit / activity logs nav

Audit Log Filters (Manage only)

Icon	Import	Where Used	Purpose
`Radio`	`lucide-react`	`apps/manage/.../audit-logs/AuditLogsClient.tsx`	Filter by event type
`PauseCircle`	`lucide-react`	`apps/manage/.../audit-logs/AuditLogsClient.tsx`	Paused state filter
`PlayCircle`	`lucide-react`	`apps/manage/.../audit-logs/AuditLogsClient.tsx`	Active state filter

Icon Sizing Convention

Context	Tailwind Class	Pixel Equivalent
Inline text icons	`w-4 h-4`	16px
Standard UI icons	`w-5 h-5`	20px
Feature/section icons	`w-6 h-6`	24px
Large hero/empty state icons	`w-8 h-8` or `w-10 h-10`	32–40px
Social brand icons (list rows)	`w-5 h-5`	20px
Social brand icons (detail/cards)	`w-6 h-6`	24px

Quick Reference: Most-Used Icons

Icon	Files	Primary Use
`Bot`	17+	Everything agent-related
`FileText`	16+	Blog posts, documents, deliverables
`Clock`	14+	Time, duration, run stats
`ArrowLeft`	13+	Back navigation on detail pages
`Users`	11+	User management, teams
`Eye`	11+	Show password / view content
`ChevronRight`	10+	Forward nav, sidebar, pagination
`ChevronDown`	10+	Dropdowns, accordions
`AlertTriangle`	10+	Warnings, validation errors
`Plus`	9+	Add / create new
`Bell`	8+	Notifications
`Search`	8+	Search inputs
`Zap`	7+	Skills, AI actions
`Activity`	7+	Analytics, metrics
`CheckCircle2`	8+	Completed / verified

Known Gotchas

FaGoogle — import from react-icons/fa, not react-icons/fa6. It was removed in Font Awesome 6.
Bing icon — SiBing and SiMicrosoftbing do not exist in react-icons/si@5.x. Use Globe from lucide-react as a fallback.
Brand colors — apply via style={{ color: "#hex" }}, not Tailwind color utilities, to match exact brand values.
CheckCircle vs CheckCircle2 — both are in use. CheckCircle is a circle with a tick outline; CheckCircle2 is filled. Not interchangeable — check the surrounding design before using either.