Icon

A flexible icon component using Lucide icons with over 1600+ beautiful, customizable SVGs.

<c-icon name="house"></c-icon>

Component API

Property	Type	Default	Description
`name`	`string`	`required`	Icon name from Lucide library (1600+ icons available)
`class`	`string`	`-`	Additional CSS classes (size-4, size-8, text-primary, etc.)

Examples

Basic Icons

All Lucide icons are 24×24px by default and scale beautifully at any size.

star

heart

user

house

<c-icon name="star"></c-icon>
<c-icon name="heart"></c-icon>
<c-icon name="user"></c-icon>
<c-icon name="house"></c-icon>

Custom Sizing

Use Tailwind CSS sizing classes to customize icon sizes. Default is size-6 (24×24px).

size-4 (16px)

size-6 (24px)

size-8 (32px)

size-12 (48px)

size-16 (64px)

<c-icon name="star" class="size-4"></c-icon>
<c-icon name="star" class="size-6"></c-icon>
<c-icon name="star" class="size-8"></c-icon>
<c-icon name="star" class="size-12"></c-icon>
<c-icon name="star" class="size-16"></c-icon>

Colored Icons

Apply different colors using DaisyUI color classes.

Primary

Secondary

Accent

Success

Warning

Error

Info

<c-icon name="heart" class="size-8 text-primary"></c-icon>
<c-icon name="heart" class="size-8 text-secondary"></c-icon>
<c-icon name="heart" class="size-8 text-accent"></c-icon>
<c-icon name="heart" class="size-8 text-success"></c-icon>
<c-icon name="heart" class="size-8 text-warning"></c-icon>
<c-icon name="heart" class="size-8 text-error"></c-icon>
<c-icon name="heart" class="size-8 text-info"></c-icon>

Common Icons

A collection of frequently used icons in web applications.

home

user

settings

plus

edit

trash

download

upload

file-text

copy

heart

star

bell

mail

<c-icon name="home"></c-icon>
<c-icon name="user"></c-icon>
<c-icon name="settings"></c-icon>
<c-icon name="search"></c-icon>
<c-icon name="plus"></c-icon>
<c-icon name="edit"></c-icon>
<c-icon name="trash"></c-icon>
<c-icon name="download"></c-icon>

Icons in UI Elements

Examples of how icons integrate with other components and UI elements.

In Buttons

In Navigation

In Alerts

Your changes have been saved successfully!

Please review your information before proceeding.

An error occurred while processing your request.

<!-- In buttons -->
<c-button variant="primary" icon="plus">New Item</c-button>
<c-button variant="secondary" icon="edit">Edit</c-button>
<c-button variant="error" icon="trash">Delete</c-button>

<!-- In navigation -->
<div class="menu bg-base-100 w-56 rounded-box">
    <li>
        <a><c-icon name="home" class="size-4" /> Dashboard</a>
    </li>
    <li>
        <a><c-icon name="users" class="size-4" /> Users</a>
    </li>
</div>

<!-- In alerts -->
<div class="alert alert-success">
    <c-icon name="check-circle" />
    <span>Success message here</span>
</div>

Icon States

Different visual states for icons including disabled, active, and interactive states.

Interactive States

Hover

Active

Disabled

Animated

Loading States

<!-- Interactive states -->
<c-icon name="heart" class="size-8 cursor-pointer hover:text-red-500 transition-colors"></c-icon>
<c-icon name="star" class="size-8 text-yellow-500"></c-icon>
<c-icon name="bookmark" class="size-8 text-base-content/30"></c-icon>
<c-icon name="bell" class="size-8 text-primary animate-bounce"></c-icon>

<!-- Loading states -->
<c-icon name="loader" class="size-6 animate-spin"></c-icon>
<c-icon name="refresh" class="size-6 animate-spin"></c-icon>
<c-icon name="circle-dot" class="size-6 animate-pulse"></c-icon>

Appendix

Usage Guidelines

Lucide Icons Library

This component uses Lucide with 1600+ beautiful, consistent icons. Visit lucide.dev/icons to browse all available icons and their names.

Consistent Sizing

All Lucide icons are 24×24px by default. Use size classes like size-4 (16px), size-6 (24px), size-8 (32px) for different contexts and maintain consistency.

Accessibility

For decorative icons, ensure they don't interfere with screen readers. For functional icons, provide appropriate aria-labels.

Performance

Lucide icons are loaded as a single JSON file and cached. Icons are injected dynamically via JavaScript, ensuring fast loading and optimal performance.

Icon Categories

Navigation

home, menu, arrow-left, arrow-right, chevron-up, chevron-down

Actions

plus, edit, trash, save, copy, share, download, upload

Status

check, x, alert-triangle, info, help-circle, warning

Communication

mail, phone, message-circle, send, bell, at-sign

Media

play, pause, stop, skip-forward, skip-back, volume

Files

file, folder, image, video, archive, document

Tungsten UI 💡