Icon

120 icons available · Click icon to copy · Click name to rename

API Reference

PropTypeDefaultDescription
nameIconNamerequiredIcon name from the library
size"small" | "default" | "large" | number"default"Icon size (preset or custom px)
classNamestring-Custom CSS classes (use for color)

Preset Sizes

size="small"16px
size="default"20px
size="large"24px

Color

defaultvar(--color-icon)
className="text-blue-500"custom
className="text-red-500"custom

Code Examples

Basic Usage
import { DesignIcon } from "@/components/ui/design-icon"

// Default (20px)
<DesignIcon name="check" />

// Preset sizes
<DesignIcon name="check" size="small" />   // 16px
<DesignIcon name="check" size="large" />   // 24px

// Custom size
<DesignIcon name="check" size={32} />

// Custom color
<DesignIcon name="check" className="text-blue-500" />
With DesignButton
<DesignButton leftIcon={<DesignIcon name="plus" />}>
  Add Item
</DesignButton>
With DesignInput (startContent)
<DesignInput
  placeholder="Search..."
  startContent={<DesignIcon name="search" className="text-[var(--color-font-tertiary)]" />}
/>
In DropdownMenu
<DropdownMenuItem>
  <DesignIcon name="edit" />
  <span>Edit</span>
</DropdownMenuItem>
Status Indicator
Completed
Failed
<div className="w-8 h-8 flex items-center justify-center rounded-full bg-green-500/10">
  <DesignIcon name="check" size="small" className="text-green-600" />
</div>

Quick Reference (AI Agent)

Import

import { DesignIcon } from "@/components/ui/design-icon"

Basic

<DesignIcon name="icon-name" />

With Size

<DesignIcon name="check" size="small" />

With Color

<DesignIcon name="favorite" className="text-red-500" />

Sizes: small=16px, default=20px, large=24px, or custom number
Color: Uses currentColor, customize via className with Tailwind text colors
Available icons: 120 icons - search above or check availableIcons export