Skip to main content

​
Overview

A’raf DS uses Lucide React as its icon system. All components that accept icon props expect a ReactNode from a Lucide icon component. Icons are sized via the size prop and colored via CSS currentColor, inheriting from their parent’s text color.

​
Installation

npm install lucide-react

​
Usage

import { Settings, User, Bell, ChevronDown } from "lucide-react"

// Basic icon
<Settings size={20} />

// With explicit color
<Bell size={16} color="#0479CE" />

// Inheriting parent color
<span className="text-blue-500">
  <Bell size={16} />
</span>

// In a Button
<Button>
  <Settings size={16} />
  Settings
</Button>

​
Size Guide

TokenValueUse Case
icon/size/xs14pxInline with small text, badges
icon/size/sm16pxBeside body text, form labels, selects
icon/size/md20pxButton icons, nav items (default)
icon/size/lg24pxCard icons, section headers
icon/size/xl48pxFeature icons, empty states
<SearchIcon size={14} />   // xs — input adornment
<ChevronDown size={16} />  // sm — select trigger
<UserIcon size={20} />     // md — nav item, button
<FileIcon size={24} />     // lg — card header
<InboxIcon size={48} />    // xl — empty state

​
Icon Color Tokens

Icons in A’raf DS components automatically use semantic tokens:
Semantic TokenValue (Light)Use
icon/default/primary#1f2937Primary content icons
icon/default/secondary#6b7280Supporting / muted icons
icon/default/brand#0479CEBrand-colored icons
icon/default/on-brand#ffffffIcons on colored backgrounds
icon/state/disabled#9ca3afDisabled state
icon/state/destructive#dc2626Delete / danger actions
icon/status/success#16a34aSuccess indicators
icon/status/error#dc2626Error indicators
icon/status/warning#eab308Warning indicators
icon/status/info#3b82f6Info indicators

​
Common Icons by Category

import {
  Home, LayoutDashboard, Menu, SidebarOpen,
  ChevronLeft, ChevronRight, ChevronDown, ChevronUp,
  ArrowLeft, ArrowRight, ExternalLink,
} from "lucide-react"

​
Actions

import {
  Plus, Minus, Edit, Trash2, Copy, Download, Upload,
  Save, Search, Filter, SortAsc, SortDesc, RefreshCw,
  MoreHorizontal, MoreVertical,
} from "lucide-react"

​
Data & Files

import {
  File, FileText, Folder, FolderOpen, Table2,
  BarChart2, LineChart, PieChart, TrendingUp, TrendingDown,
} from "lucide-react"

​
Users & Auth

import {
  User, Users, UserPlus, UserMinus, UserCheck,
  Lock, Unlock, Shield, Key, LogIn, LogOut,
} from "lucide-react"

​
Status & Feedback

import {
  CheckCircle, XCircle, AlertCircle, AlertTriangle,
  Info, HelpCircle, Bell, BellOff, Star, Heart,
} from "lucide-react"

​
Communication

import {
  Mail, MessageSquare, Phone, Send, Inbox,
  AtSign, Hash, Link, Share2,
} from "lucide-react"

​
Browsing Icons

Browse all Lucide icons at lucide.dev. Search by keyword — "arrow" returns all directional icons, "check" returns all validation icons.

​
Accessibility

  • Icon-only interactive elements must have an accessible label via aria-label on the wrapping button, or a visually hidden <span> sibling
  • Decorative icons that are accompanied by visible text should have aria-hidden="true" to avoid redundant announcements
  • Never use an icon as the sole indicator of meaning for critical states (e.g. error) — always pair with text
  • Icons used as status indicators in tables or badges must have a text alternative

​
Do’s & Don’ts

Do

  • Follow the size token guide — use size={20} for button icons, size={16} for form labels
  • Use aria-hidden="true" on decorative icons next to visible text labels
  • Use aria-label on icon-only buttons (e.g. delete, close)
  • Let icons inherit color via currentColor — avoid hardcoded hex where semantic tokens exist

Don't

  • Don’t use icons larger than size={24} inside buttons — they overwhelm the text
  • Don’t use icons as the only signal for status — always add a text label or tooltip
  • Don’t mix icon styles (outline vs filled) within the same component or screen
  • Don’t import the entire lucide-react library — import only what you need for tree-shaking