Icons
Two icon libraries used across the platform: lucide-react for UI icons and simple-icons for brand/tech logos.
Lucide React
Stroke-based UI icons — available in all frontend apps via catalog:frontend
import { ArrowRight, Bell, Settings } from 'lucide-react'ArrowLeft
ArrowRight
Bell
Bookmark
Calendar
BarChart2
Check
CheckCircle
ChevronDown
ChevronRight
Clock
Cloud
Code2
Copy
CreditCard
Database
Download
Edit
ExternalLink
Eye
EyeOff
FileText
Filter
Globe
Hash
Heart
Home
Image
Info
Key
Link
Loader2
Lock
LogOut
Mail
Menu
MessageSquare
MoreHorizontal
Package
Plus
Search
Settings
Share
Shield
Star
Tag
Terminal
ThumbsUp
Trash
TrendingUp
Upload
User
X
XCircle
Zap
AlertCircle
Simple Icons
Brand and technology logos — used in DesignMD and other products via simple-icons
import { siGithub, siCloudflare } from 'simple-icons' // <svg dangerouslySetInnerHTML={{ __html: icon.path }} />GitHub#181717
X / Twitter#000000
Bluesky#1185FE
Discord#5865F2
Product Hunt#DA552F
Google Cloud#4285F4
Cloudflare#F38020
Vercel#000000
Railway#0B0D0E
Docker#2496ED
Figma#F24E1E
Stripe#635BFF
Anthropic#191919
TypeScript#3178C6
React#61DAFB
Next.js#000000
Node.js#5FA04E
PostgreSQL#4169E1
Prisma#2D3748
Tailwind CSS#06B6D4
Radix UI#161618
Fastify#000000
npm#CB3837
Usage note: Each Simple Icons object exports .title, .slug, .svg, .path, and .hex. Use dangerouslySetInnerHTML with { __html: icon.path } inside a <svg viewBox="0 0 24 24"> wrapper.
Across products
Real per-product surfaces — the actual component from each app, not one recolored mock.
DesignMDdesignmd.directory
Monochrome — primary equals foreground
AIdiscussAIdiscuss.dev
Indigo primary tint
Itmeo.comitmeo.com
Warm orange primary tint
The icon set is identical; only color changes. The top row uses
--foreground, the bottom row uses --primary, so each product's accent shows through the same glyphs.