Icons

Empathy DS uses Lucide Vue Next as its icon library. Lucide provides 1000+ beautiful, consistent icons.

Installation

Lucide is included as a dependency of @empathyds/vue, but you can also install it directly:

pnpm

pnpm add lucide-vue-next

npm

npm install lucide-vue-next

yarn

yarn add lucide-vue-next

bun

bun add lucide-vue-next

Basic Usage

Import icons individually for optimal tree-shaking:

<script setup>
import { Check, X, ChevronRight, Loader2 } from 'lucide-vue-next'
</script>

<template>
  <Check class="h-4 w-4" />
  <X class="h-4 w-4" />
  <ChevronRight class="h-4 w-4" />
  <Loader2 class="h-4 w-4 animate-spin" />
</template>

Icon Sizes

Use consistent sizing with Tailwind:

Class	Size	Usage
h-3 w-3	12px	Very small, badges
h-4 w-4	16px	Buttons, inputs (default)
h-5 w-5	20px	Larger buttons
h-6 w-6	24px	Standalone icons
h-8 w-8	32px	Feature icons
h-12 w-12	48px	Hero/empty states

With Components

Buttons with Icons

<script setup>
import { Button } from '@empathyds/vue'
import { Plus, Trash2, Download, ExternalLink } from 'lucide-vue-next'
</script>

<template>
  <!-- Icon before text -->
  <Button>
    <Plus class="mr-2 h-4 w-4" />
    Add Item
  </Button>
  
  <!-- Icon after text -->
  <Button variant="outline">
    Open Link
    <ExternalLink class="ml-2 h-4 w-4" />
  </Button>
  
  <!-- Icon only -->
  <Button variant="ghost" size="icon">
    <Trash2 class="h-4 w-4" />
    <span class="sr-only">Delete</span>
  </Button>
  
  <!-- Loading state -->
  <Button disabled>
    <Loader2 class="mr-2 h-4 w-4 animate-spin" />
    Please wait
  </Button>
</template>

Input with Icon

<script setup>
import { Input } from '@empathyds/vue'
import { Search, Mail } from 'lucide-vue-next'
</script>

<template>
  <div class="relative">
    <Search class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
    <Input class="pl-10" placeholder="Search..." />
  </div>
</template>

Menu Items

<script setup>
import { 
  DropdownMenu, 
  DropdownMenuContent, 
  DropdownMenuItem, 
  DropdownMenuTrigger 
} from '@empathyds/vue'
import { User, Settings, LogOut } from 'lucide-vue-next'
</script>

<template>
  <DropdownMenu>
    <DropdownMenuTrigger>Open</DropdownMenuTrigger>
    <DropdownMenuContent>
      <DropdownMenuItem>
        <User class="mr-2 h-4 w-4" />
        Profile
      </DropdownMenuItem>
      <DropdownMenuItem>
        <Settings class="mr-2 h-4 w-4" />
        Settings
      </DropdownMenuItem>
      <DropdownMenuItem>
        <LogOut class="mr-2 h-4 w-4" />
        Sign out
      </DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</template>

Common Icons

Actions

Icon	Name	Usage
➕	Plus	Add/create
✏️	Pencil	Edit
🗑️	Trash2	Delete
💾	Save	Save
❌	X	Close/cancel
✓	Check	Confirm/success

Navigation

Icon	Name	Usage
→	ChevronRight	Navigate forward
←	ChevronLeft	Navigate back
↓	ChevronDown	Expand/dropdown
↑	ChevronUp	Collapse
⋯	MoreHorizontal	More options
⋮	MoreVertical	More options
🏠	Home	Home
≡	Menu	Menu/hamburger

Status

Icon	Name	Usage
ℹ️	Info	Information
⚠️	AlertTriangle	Warning
🔴	AlertCircle	Error
✅	CheckCircle	Success
🔄	Loader2	Loading (with animate-spin)

User Interface

Icon	Name	Usage
🔍	Search	Search
⚙️	Settings	Settings
👤	User	User/profile
📧	Mail	Email
🔔	Bell	Notifications
🌙	Moon	Dark mode
☀️	Sun	Light mode
🔗	ExternalLink	External link
📋	Copy	Copy to clipboard

Styling Icons

Color

Icons inherit text color by default:

<template>
  <Check class="h-4 w-4 text-green-500" />
  <X class="h-4 w-4 text-destructive" />
  <Info class="h-4 w-4 text-muted-foreground" />
</template>

Stroke Width

Lucide icons accept a stroke-width prop:

<template>
  <Check class="h-4 w-4" :stroke-width="1.5" />
  <Check class="h-4 w-4" :stroke-width="2" />
  <Check class="h-4 w-4" :stroke-width="3" />
</template>

Animation

<template>
  <!-- Spinning loader -->
  <Loader2 class="h-4 w-4 animate-spin" />
  
  <!-- Pulsing notification -->
  <Bell class="h-4 w-4 animate-pulse" />
</template>

Accessibility

Always provide accessible labels for icon-only buttons:

<template>
  <!-- Screen reader only text -->
  <Button variant="ghost" size="icon">
    <X class="h-4 w-4" />
    <span class="sr-only">Close dialog</span>
  </Button>
  
  <!-- Or use aria-label -->
  <Button variant="ghost" size="icon" aria-label="Close dialog">
    <X class="h-4 w-4" />
  </Button>
</template>

Browse All Icons

Explore all available icons at lucide.dev/icons.