> ## Documentation Index
> Fetch the complete documentation index at: https://araf.badr.co.id/llms.txt
> Use this file to discover all available pages before exploring further.

# Icons

> A'raf DS uses Lucide React as its icon system — 1,000+ icons available as React components, sized via props and colored via CSS currentColor.

## Overview

<div style={{padding:"28px 24px",background:"#f9fafb",borderRadius:"12px",border:"1px solid #e5e7eb"}}>
  <div style={{display:"grid",gridTemplateColumns:"repeat(8,1fr)",gap:"12px",maxWidth:"480px",fontFamily:"Inter,sans-serif"}}>
    {[
            {name:"Settings",path:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"},
            {name:"Search",path:"M21 21l-6-6m2-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0z"},
            {name:"Bell",path:"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 0 1-3.46 0"},
            {name:"User",path:"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"},
            {name:"Home",path:"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z M9 22V12h6v10"},
            {name:"Mail",path:"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z M22 6l-10 7L2 6"},
            {name:"Plus",path:"M12 5v14M5 12h14"},
            {name:"Trash",path:"M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"},
            {name:"Edit",path:"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7 M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"},
            {name:"Download",path:"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4 M7 10l5 5 5-5 M12 15V3"},
            {name:"Upload",path:"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4 M17 8l-5-5-5 5 M12 3v12"},
            {name:"Copy",path:"M20 9h-9a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2z M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"},
            {name:"Check",path:"M20 6L9 17l-5-5"},
            {name:"X",path:"M18 6L6 18M6 6l12 12"},
            {name:"ChevronDown",path:"M6 9l6 6 6-6"},
            {name:"Filter",path:"M22 3H2l8 9.46V19l4 2v-8.54L22 3z"},
          ].map(icon => (
            <div key={icon.name} style={{display:"flex",flexDirection:"column",alignItems:"center",gap:"6px",padding:"8px 4px",borderRadius:"8px"}}>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#344054" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
                {icon.path.split("M").filter(Boolean).map((seg,i) => (
                  <path key={i} d={"M"+seg} />
                ))}
              </svg>
              <span style={{fontSize:"10px",color:"#71717A",textAlign:"center",lineHeight:1.2}}>{icon.name}</span>
            </div>
          ))}
  </div>
</div>

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

<CodeGroup>
  ```bash npm theme={null}
  npm install lucide-react
  ```

  ```bash yarn theme={null}
  yarn add lucide-react
  ```

  ```bash pnpm theme={null}
  pnpm add lucide-react
  ```
</CodeGroup>

***

## Usage

```tsx theme={null}
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

<div style={{padding:"24px",background:"#f9fafb",borderRadius:"12px",border:"1px solid #e5e7eb",display:"flex",gap:"24px",alignItems:"flex-end",flexWrap:"wrap"}}>
  {[
      {size:14,label:"xs",use:"Inline / badge"},
      {size:16,label:"sm",use:"Body text"},
      {size:20,label:"md",use:"Button / nav"},
      {size:24,label:"lg",use:"Card header"},
      {size:48,label:"xl",use:"Empty state"},
    ].map(s => (
      <div key={s.label} style={{display:"flex",flexDirection:"column",alignItems:"center",gap:"6px",fontFamily:"Inter,sans-serif"}}>
        <svg width={s.size} height={s.size} viewBox="0 0 24 24" fill="none" stroke="#0479CE" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
          <path d="M21 21l-6-6m2-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0z"/>
        </svg>
        <span style={{fontSize:"11px",fontWeight:600,color:"#344054"}}>{s.label} · {s.size}px</span>
        <span style={{fontSize:"10px",color:"#667085"}}>{s.use}</span>
      </div>
    ))}
</div>

| Token          | Value | Use Case                               |
| -------------- | ----- | -------------------------------------- |
| `icon/size/xs` | 14px  | Inline with small text, badges         |
| `icon/size/sm` | 16px  | Beside body text, form labels, selects |
| `icon/size/md` | 20px  | Button icons, nav items (default)      |
| `icon/size/lg` | 24px  | Card icons, section headers            |
| `icon/size/xl` | 48px  | Feature icons, empty states            |

```tsx theme={null}
<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 Token           | Value (Light) | Use                          |
| ------------------------ | ------------- | ---------------------------- |
| `icon/default/primary`   | `#1f2937`     | Primary content icons        |
| `icon/default/secondary` | `#6b7280`     | Supporting / muted icons     |
| `icon/default/brand`     | `#0479CE`     | Brand-colored icons          |
| `icon/default/on-brand`  | `#ffffff`     | Icons on colored backgrounds |
| `icon/state/disabled`    | `#9ca3af`     | Disabled state               |
| `icon/state/destructive` | `#dc2626`     | Delete / danger actions      |
| `icon/status/success`    | `#16a34a`     | Success indicators           |
| `icon/status/error`      | `#dc2626`     | Error indicators             |
| `icon/status/warning`    | `#eab308`     | Warning indicators           |
| `icon/status/info`       | `#3b82f6`     | Info indicators              |

***

## Common Icons by Category

### Navigation & Layout

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

### Actions

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

### Data & Files

```tsx theme={null}
import {
  File, FileText, Folder, FolderOpen, Table2,
  BarChart2, LineChart, PieChart, TrendingUp, TrendingDown,
} from "lucide-react"
```

### Users & Auth

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

### Status & Feedback

```tsx theme={null}
import {
  CheckCircle, XCircle, AlertCircle, AlertTriangle,
  Info, HelpCircle, Bell, BellOff, Star, Heart,
} from "lucide-react"
```

### Communication

```tsx theme={null}
import {
  Mail, MessageSquare, Phone, Send, Inbox,
  AtSign, Hash, Link, Share2,
} from "lucide-react"
```

***

## Browsing Icons

Browse all Lucide icons at [lucide.dev](https://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

<CardGroup cols={2}>
  <Card title="Do" icon="check" iconType="solid" color="#16A34A">
    * 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
  </Card>

  <Card title="Don't" icon="xmark" iconType="solid" color="#DC2626">
    * 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
  </Card>
</CardGroup>