Icons

MemberPulse uses Lucide Icons - 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

Action Icons

Status Icons

Content Icons

Data Icons

---

MemberPulse Domain Icons

Member Management

Icon	Name	Usage
users	Users	Members, groups
user-plus	UserPlus	Add member
user-check	UserCheck	Active member
user-x	UserX	Inactive member
id-card	IdCard	Member profile
badge-check	BadgeCheck	Verified

Events

Icon	Name	Usage
calendar	Calendar	Events
calendar-plus	CalendarPlus	Create event
calendar-check	CalendarCheck	Registered
ticket	Ticket	Event ticket
map-pin	MapPin	Location
video	Video	Online event

Learning & CPD

Icon	Name	Usage
graduation-cap	GraduationCap	Courses
book-open	BookOpen	Resources
award	Award	Certification
trophy	Trophy	Achievement
target	Target	CPD target
check-square	CheckSquare	Complete

Payments & Plans

Icon	Name	Usage
credit-card	CreditCard	Payment
receipt	Receipt	Invoice
banknote	Banknote	Revenue
package	Package	Plan
repeat	Repeat	Renewal
zap	Zap	Upgrade

---

Icon Usage

In Buttons

import { Plus } from "lucide-react"

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

In Navigation

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

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

---

Importing Icons

Single Import

import { User } from "lucide-react"

Multiple Imports

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

Dynamic Import (for large apps)

import dynamic from 'next/dynamic'

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

---

Custom Icon Component

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)} />
}