Icons

MemberPulse icon library - Lucide icons and usage guidelines

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

Home

Home - Dashboard, main page

Menu

Menu - Navigation menu

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

Share

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>

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

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