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

Home

Home - Dashboard, main page

Settings

Settings - Configuration

Search

Search - Search functionality

Bell

Bell - Notifications

User

User - Profile, account

Log Out

LogOut - Sign out

Chevron

ChevronRight - Navigation

Action Icons

Plus

Plus - Add, create

Pencil

Pencil - Edit

Trash

Trash2 - Delete

Copy

Copy - Duplicate

Download

Download - Export

Upload

Upload - Import

Share2 - Share

External

ExternalLink - Open in new tab

Status Icons

Check

Check - Success, complete

X

X - Close, error

Alert

AlertTriangle - Warning

Info

Info - Information

Circle Check

CheckCircle - Verified

Circle X

XCircle - Failed

Loader

Loader2 - Loading (animated)

Clock

Clock - Pending, time

Content Icons

File

File - Document

File Text

FileText - Text document

Image

Image - Photo

Video

Video - Video content

Folder

Folder - Directory

Link

Link - URL

Mail

Mail - Email

Phone

Phone - Contact

Data Icons

Bar Chart

BarChart2 - Statistics

Line Chart

TrendingUp - Trends

Pie Chart

PieChart - Distribution

Table

Table - Data table

Filter

Filter - Filter data

Sort

ArrowUpDown - Sort

Calendar

Calendar - Date picker

List

List - List view

MemberPulse Domain Icons

Member Management

Icon	Name	Usage
	`Users`	Members, groups
	`UserPlus`	Add member
	`UserCheck`	Active member
	`UserX`	Inactive member
	`IdCard`	Member profile
	`BadgeCheck`	Verified

Events

Icon	Name	Usage
	`Calendar`	Events
	`CalendarPlus`	Create event
	`CalendarCheck`	Registered
	`Ticket`	Event ticket
	`MapPin`	Location
	`Video`	Online event

Learning & CPD

Icon	Name	Usage
	`GraduationCap`	Courses
	`BookOpen`	Resources
	`Award`	Certification
	`Trophy`	Achievement
	`Target`	CPD target
	`CheckSquare`	Complete

Payments & Plans

Icon	Name	Usage
	`CreditCard`	Payment
	`Receipt`	Invoice
	`Banknote`	Revenue
	`Package`	Plan
	`Repeat`	Renewal
	`Zap`	Upgrade

Icon Usage

In Buttons

import { Plus } from "lucide-react"

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

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

Consistency

Use the same icon for the same concept throughout the app
Maintain consistent icon sizes within contexts
Keep icon weight consistent (outline vs filled)

Clarity

Icons should enhance, not replace text labels
Use tooltips for icon-only buttons
Choose recognizable, standard icons

Accessibility

Add aria-label for icon-only buttons
Ensure icons have sufficient contrast
Don’t rely on colour alone for meaning

Performance

Import icons individually, not the entire library
Use tree-shaking for production builds
Consider SVG sprites for heavily-used icons

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

​Icons

​Icon Basics

​Icon Sizing

​Icon Colours

​Common Icons

​Navigation Icons