Icon

SVG icon system with customizable colors and sizes. Default color is var(--color-icon).

Sizes

Preset sizes:

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

Custom sizes (numeric):

12pxsize={12}
28pxsize={28}
32pxsize={32}
48pxsize={48}

Colors

Default

var(--color-icon)

Props:
{ name: "heart", size: 32 }

Primary

Custom color via className

Props:
{ name: "heart", size: 32, className: "text-blue-500" }

Destructive

Custom color via className

Props:
{ name: "delete", size: 32, className: "text-red-500" }

All Icons (73)

Click any icon to copy its usage code to clipboard

Navigation & Actions(8)

Content Editing(16)

Media & Content(8)

Social Platforms(5)

Analytics & Data(6)

User & Settings(7)

View Controls(3)

UI Elements(17)

Date & Time(2)

Usage Examples

Button with Icon

Icon in DesignButton component

Props:
{ name: "plus", size: "default" }

Input with Icon

Icon with DesignInput component

Props:
{ name: "search", size: "default" }

Dropdown Menu Item

Icon in DropdownMenuItem

Props:
{ name: "edit", size: "default" }

Status Indicator

Icon as status with DesignCard

Props:
{ name: "check", size: "small" }
Completed

Navigation Item

Icon in navigation with DesignCard

Props:
{ name: "chevron-right", size: "default" }
Settings

Alert Message

Icon in alert with DesignCard

Props:
{ name: "close", size: "default" }

Error message

Usage Guidelines

  • •Three preset sizes: small (16px), default (20px), large (24px)
  • •Use numeric values for custom sizes (e.g., size={32})
  • •Default color is var(--color-icon)
  • •Use className to customize color with Tailwind classes
  • •Icons use currentColor to inherit text color
  • •Click any icon to copy its usage code to clipboard
  • •Icons are organized into categories for easy discovery
  • •All icons are optimized SVGs that automatically adapt to light/dark theme

Import and Usage:

import { DesignIcon } from "@/components/ui/design-icon"
import { DesignButton } from "@/components/ui/design-button"
import { DesignInput } from "@/components/ui/design-input"

// Basic usage (default size: 20px)
<DesignIcon name="check" />

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

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

// Custom color
<DesignIcon name="check" className="text-blue-500" />

// In DesignButton
<DesignButton
  leftIcon={<DesignIcon name="plus" />}
>
  Add Item
</DesignButton>

// In DesignInput
<div className="relative">
  <DesignIcon
    name="search"
    className="absolute left-3 top-1/2 -translate-y-1/2 z-10 pointer-events-none"
  />
  <DesignInput placeholder="Search..." className="pl-9" />
</div>