Icons

Aether UI ships Lucide React as its default icon library — a community-maintained set of beautifully consistent, MIT-licensed SVG icons. Over 1,500 icons, all tree-shakeable.

Browse all icons →GitHub →

Installation

Lucide React is included automatically when you use the CLI to add any Aether UI component. To install it manually:

terminal

npm install lucide-react
# or
pnpm add lucide-react
# or
yarn add lucide-react

Basic usage

Import any icon by name from lucide-react. Icons are React components that render a 24×24 SVG by default.

example.tsx

import { Search, Settings, ArrowRight } from "lucide-react"

export function Example() {
  return (
    <div className="flex items-center gap-2">
      <Search className="h-4 w-4" />
      <Settings className="h-5 w-5 text-muted-foreground" />
      <ArrowRight className="h-4 w-4 text-primary" />
    </div>
  )
}

Icon sizing

Use Tailwind's h-* and w-* classes — or the shorthand size-* — to control icon dimensions. Common sizes: size-3.5 (14px), size-4 (16px), size-5 (20px).

Icons in buttons

The Button component includes built-in SVG handling — icons are automatically sized to 16px and never intercept pointer events. No extra classes needed.

Button with leading icon

button-with-icons.tsx

import { Plus, Download, Loader2 } from "lucide-react"
import { Button } from "@/components/ui/button"

// Leading icon — just place it before the label
<Button>
  <Plus />
  New item
</Button>

// Trailing icon — place after the label
<Button variant="outline">
  Export
  <Download />
</Button>

// Loading state
<Button disabled>
  <Loader2 className="animate-spin" />
  Saving…
</Button>

Icon-only button

Use size="icon" for a square button. Always include aria-label for accessibility.

icon-button.tsx

import { Search, Settings, Bell, X } from "lucide-react"
import { Button } from "@/components/ui/button"

<Button size="icon" aria-label="Search">
  <Search />
</Button>

<Button size="icon" variant="ghost" aria-label="Notifications">
  <Bell />
</Button>

<Button size="icon" variant="outline" aria-label="Settings">
  <Settings />
</Button>

<Button size="icon" variant="destructive" aria-label="Remove">
  <X />
</Button>

Icons in other components

Input with icon

input-with-icon.tsx

import { Search } from "lucide-react"

// Wrap input in a relative container, position icon absolutely
<div className="relative">
  <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
  <Input className="pl-9" placeholder="Search…" />
</div>

Badge with icon

badge-with-icon.tsx

import { CheckCircle2, Clock, XCircle } from "lucide-react"
import { Badge } from "@/components/ui/badge"

<Badge className="gap-1">
  <CheckCircle2 className="h-3 w-3" />
  Approved
</Badge>

<Badge variant="secondary" className="gap-1">
  <Clock className="h-3 w-3" />
  Pending
</Badge>

<Badge variant="destructive" className="gap-1">
  <XCircle className="h-3 w-3" />
  Failed
</Badge>

Select trigger with icon

select-with-icon.tsx

import { Globe } from "lucide-react"

// Custom SelectTrigger with a leading icon
<SelectTrigger className="w-[180px]">
  <Globe className="h-4 w-4 text-muted-foreground" />
  <SelectValue placeholder="Language" />
</SelectTrigger>

Common icons reference

A curated set of frequently used icons. All available from lucide-react. Browse the complete set at lucide.dev/icons.

Navigation & actions

ArrowLeftArrowRightArrowUpArrowDownChevronLeftChevronRightChevronUpChevronDownChevronsUpDownMenuXPlusMinusMoreHorizontalMoreVerticalExternalLink

Status & feedback

CheckCheckCircleCheckCircle2AlertCircleAlertTriangleInfoXCircleLoader2RefreshCwRotateCcwClockTimerHourglass

Objects & UI

SearchSettingsSettings2FilterSlidersHorizontalBellBellOffStarBookmarkHeartShare2LinkCopyClipboardDownloadUpload

Files & data

FileFileTextFilePlusFileXFolderFolderOpenDatabaseTable2BarChartBarChart2LineChartPieChart

Users & auth

UserUsersUserPlusUserXUserCheckLockUnlockKeyShieldShieldCheckLogInLogOut

Communication

MailMessageSquareMessageCirclePhoneSendInboxArchiveTrashTrash2EditEdit2Edit3

Customization

All Lucide icons accept size, strokeWidth, and color props, plus all standard SVG attributes.

icon-customization.tsx

import { Star } from "lucide-react"

// Default (size=24, strokeWidth=2)
<Star />

// Smaller, thinner
<Star size={16} strokeWidth={1.5} />

// Using Tailwind for colour
<Star className="text-yellow-500" />

// Filled (set fill to currentColor)
<Star className="fill-yellow-400 text-yellow-400" />

Accessibility

→Decorative icons (next to visible text) should be hidden from screen readers with aria-hidden="true".
→Icon-only interactive elements (buttons, links) must have an aria-label describing the action.
→Avoid using icons as the sole means of conveying status — pair with visible text or a tooltip.
→Lucide icons render aria-hidden="true" by default when used inside a labelled element.