> ## Documentation Index
> Fetch the complete documentation index at: https://memberpulseptyltd.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Icons

> MemberPulse icon library - Lucide icons and usage guidelines

# Icons

MemberPulse uses [Lucide Icons](https://lucide.dev/) - the same icon library used by shadcn/ui. Lucide is a beautiful and consistent icon library with 1000+ icons.

***

## Icon Basics

### Icon Sizing

| Size        | Pixels | Class         | Usage                  |
| ----------- | ------ | ------------- | ---------------------- |
| Extra Small | 12px   | `w-3 h-3`     | Inline with small text |
| Small       | 14px   | `w-3.5 h-3.5` | Inline with body text  |
| Default     | 16px   | `w-4 h-4`     | Buttons, inputs        |
| Medium      | 20px   | `w-5 h-5`     | Headers, cards         |
| Large       | 24px   | `w-6 h-6`     | Feature icons          |
| Extra Large | 32px   | `w-8 h-8`     | Hero sections          |

### Icon Colours

Icons inherit the current text colour by default. Use these colour classes:

| Colour      | Class                   | Usage                |
| ----------- | ----------------------- | -------------------- |
| Primary     | `text-primary`          | Active states, links |
| Muted       | `text-muted-foreground` | Secondary icons      |
| Success     | `text-green-500`        | Positive indicators  |
| Warning     | `text-yellow-500`       | Caution indicators   |
| Destructive | `text-destructive`      | Delete, errors       |

***

## Common Icons

### Navigation Icons

<CardGroup cols={4}>
  <Card title="Home" icon="home">
    `Home` - Dashboard, main page
  </Card>

  <Card title="Menu" icon="menu">
    `Menu` - Navigation menu
  </Card>

  <Card title="Settings" icon="settings">
    `Settings` - Configuration
  </Card>

  <Card title="Search" icon="search">
    `Search` - Search functionality
  </Card>

  <Card title="Bell" icon="bell">
    `Bell` - Notifications
  </Card>

  <Card title="User" icon="user">
    `User` - Profile, account
  </Card>

  <Card title="Log Out" icon="log-out">
    `LogOut` - Sign out
  </Card>

  <Card title="Chevron" icon="chevron-right">
    `ChevronRight` - Navigation
  </Card>
</CardGroup>

### Action Icons

<CardGroup cols={4}>
  <Card title="Plus" icon="plus">
    `Plus` - Add, create
  </Card>

  <Card title="Pencil" icon="pencil">
    `Pencil` - Edit
  </Card>

  <Card title="Trash" icon="trash-2">
    `Trash2` - Delete
  </Card>

  <Card title="Copy" icon="copy">
    `Copy` - Duplicate
  </Card>

  <Card title="Download" icon="download">
    `Download` - Export
  </Card>

  <Card title="Upload" icon="upload">
    `Upload` - Import
  </Card>

  <Card title="Share" icon="share-2">
    `Share2` - Share
  </Card>

  <Card title="External" icon="external-link">
    `ExternalLink` - Open in new tab
  </Card>
</CardGroup>

### Status Icons

<CardGroup cols={4}>
  <Card title="Check" icon="check">
    `Check` - Success, complete
  </Card>

  <Card title="X" icon="x">
    `X` - Close, error
  </Card>

  <Card title="Alert" icon="alert-triangle">
    `AlertTriangle` - Warning
  </Card>

  <Card title="Info" icon="info">
    `Info` - Information
  </Card>

  <Card title="Circle Check" icon="check-circle">
    `CheckCircle` - Verified
  </Card>

  <Card title="Circle X" icon="x-circle">
    `XCircle` - Failed
  </Card>

  <Card title="Loader" icon="loader-2">
    `Loader2` - Loading (animated)
  </Card>

  <Card title="Clock" icon="clock">
    `Clock` - Pending, time
  </Card>
</CardGroup>

### Content Icons

<CardGroup cols={4}>
  <Card title="File" icon="file">
    `File` - Document
  </Card>

  <Card title="File Text" icon="file-text">
    `FileText` - Text document
  </Card>

  <Card title="Image" icon="image">
    `Image` - Photo
  </Card>

  <Card title="Video" icon="video">
    `Video` - Video content
  </Card>

  <Card title="Folder" icon="folder">
    `Folder` - Directory
  </Card>

  <Card title="Link" icon="link">
    `Link` - URL
  </Card>

  <Card title="Mail" icon="mail">
    `Mail` - Email
  </Card>

  <Card title="Phone" icon="phone">
    `Phone` - Contact
  </Card>
</CardGroup>

### Data Icons

<CardGroup cols={4}>
  <Card title="Bar Chart" icon="bar-chart-2">
    `BarChart2` - Statistics
  </Card>

  <Card title="Line Chart" icon="trending-up">
    `TrendingUp` - Trends
  </Card>

  <Card title="Pie Chart" icon="pie-chart">
    `PieChart` - Distribution
  </Card>

  <Card title="Table" icon="table">
    `Table` - Data table
  </Card>

  <Card title="Filter" icon="filter">
    `Filter` - Filter data
  </Card>

  <Card title="Sort" icon="arrow-up-down">
    `ArrowUpDown` - Sort
  </Card>

  <Card title="Calendar" icon="calendar">
    `Calendar` - Date picker
  </Card>

  <Card title="List" icon="list">
    `List` - List view
  </Card>
</CardGroup>

***

## MemberPulse Domain Icons

### Member Management

| Icon                        | Name         | Usage           |
| --------------------------- | ------------ | --------------- |
| <Icon icon="users" />       | `Users`      | Members, groups |
| <Icon icon="user-plus" />   | `UserPlus`   | Add member      |
| <Icon icon="user-check" />  | `UserCheck`  | Active member   |
| <Icon icon="user-x" />      | `UserX`      | Inactive member |
| <Icon icon="id-card" />     | `IdCard`     | Member profile  |
| <Icon icon="badge-check" /> | `BadgeCheck` | Verified        |

### Events

| Icon                           | Name            | Usage        |
| ------------------------------ | --------------- | ------------ |
| <Icon icon="calendar" />       | `Calendar`      | Events       |
| <Icon icon="calendar-plus" />  | `CalendarPlus`  | Create event |
| <Icon icon="calendar-check" /> | `CalendarCheck` | Registered   |
| <Icon icon="ticket" />         | `Ticket`        | Event ticket |
| <Icon icon="map-pin" />        | `MapPin`        | Location     |
| <Icon icon="video" />          | `Video`         | Online event |

### Learning & CPD

| Icon                           | Name            | Usage         |
| ------------------------------ | --------------- | ------------- |
| <Icon icon="graduation-cap" /> | `GraduationCap` | Courses       |
| <Icon icon="book-open" />      | `BookOpen`      | Resources     |
| <Icon icon="award" />          | `Award`         | Certification |
| <Icon icon="trophy" />         | `Trophy`        | Achievement   |
| <Icon icon="target" />         | `Target`        | CPD target    |
| <Icon icon="check-square" />   | `CheckSquare`   | Complete      |

### Payments & Plans

| Icon                        | Name         | Usage   |
| --------------------------- | ------------ | ------- |
| <Icon icon="credit-card" /> | `CreditCard` | Payment |
| <Icon icon="receipt" />     | `Receipt`    | Invoice |
| <Icon icon="banknote" />    | `Banknote`   | Revenue |
| <Icon icon="package" />     | `Package`    | Plan    |
| <Icon icon="repeat" />      | `Repeat`     | Renewal |
| <Icon icon="zap" />         | `Zap`        | Upgrade |

***

## Icon Usage

### In Buttons

```jsx theme={null}
import { Plus } from "lucide-react"

<Button>
  <Plus className="w-4 h-4 mr-2" />
  Add Member
</Button>
```

### In Navigation

```jsx theme={null}
import { Home, Users, Calendar } from "lucide-react"

<nav>
  <NavItem icon={Home}>Dashboard</NavItem>
  <NavItem icon={Users}>Members</NavItem>
  <NavItem icon={Calendar}>Events</NavItem>
</nav>
```

### Status Indicators

```jsx theme={null}
import { CheckCircle, XCircle, Clock } from "lucide-react"

const StatusIcon = ({ status }) => {
  switch (status) {
    case 'active': return <CheckCircle className="text-green-500" />
    case 'inactive': return <XCircle className="text-red-500" />
    default: return <Clock className="text-yellow-500" />
  }
}
```

***

## Icon Best Practices

<AccordionGroup>
  <Accordion title="Consistency" icon="copy">
    * Use the same icon for the same concept throughout the app
    * Maintain consistent icon sizes within contexts
    * Keep icon weight consistent (outline vs filled)
  </Accordion>

  <Accordion title="Clarity" icon="eye">
    * Icons should enhance, not replace text labels
    * Use tooltips for icon-only buttons
    * Choose recognizable, standard icons
  </Accordion>

  <Accordion title="Accessibility" icon="accessibility">
    * Add `aria-label` for icon-only buttons
    * Ensure icons have sufficient contrast
    * Don't rely on colour alone for meaning
  </Accordion>

  <Accordion title="Performance" icon="zap">
    * Import icons individually, not the entire library
    * Use tree-shaking for production builds
    * Consider SVG sprites for heavily-used icons
  </Accordion>
</AccordionGroup>

***

## Importing Icons

### Single Import

```jsx theme={null}
import { User } from "lucide-react"
```

### Multiple Imports

```jsx theme={null}
import { 
  User, 
  Settings, 
  Bell, 
  Search,
  ChevronDown 
} from "lucide-react"
```

### Dynamic Import (for large apps)

```jsx theme={null}
import dynamic from 'next/dynamic'

const UserIcon = dynamic(() => 
  import('lucide-react').then(mod => mod.User)
)
```

***

## Custom Icon Component

```tsx theme={null}
import { LucideIcon } from "lucide-react"
import { cn } from "@/lib/utils"

interface IconProps {
  icon: LucideIcon
  size?: "sm" | "md" | "lg"
  className?: string
}

const sizeMap = {
  sm: "w-4 h-4",
  md: "w-5 h-5", 
  lg: "w-6 h-6"
}

export function Icon({ icon: LucideIcon, size = "md", className }: IconProps) {
  return <LucideIcon className={cn(sizeMap[size], className)} />
}
```