Icon

​

Basic Usage

<flux:icon icon="home" />

​

Variants

<flux:icon icon="home" variant="micro" />

<flux:icon icon="home" variant="mini" />

<flux:icon icon="home" variant="outline" />

​

Available Icons

​

Actions

• plus, minus, x-mark, check
• pencil, trash, arrow-right, arrow-left
• magnifying-glass, cog, ellipsis-horizontal, ellipsis-vertical

​

Navigation

• home, bars-3, chevron-down, chevron-up, chevron-left, chevron-right
• arrow-left, arrow-right, arrow-up, arrow-down

​

Communication

• envelope, phone, chat-bubble-left, bell
• megaphone, newspaper, rss

​

Media

• photo, film, musical-note, microphone
• speaker-wave, play, pause, stop

​

Files & Folders

• folder, folder-open, document, document-text
• archive-box, inbox, cloud, cloud-arrow-up, cloud-arrow-down

​

Users & People

• user, user-circle, user-group, users
• identification, academic-cap

​

Commerce

• shopping-cart, shopping-bag, credit-card, currency-dollar
• tag, ticket, gift

​

Status & Feedback

• information-circle, exclamation-circle, check-circle, x-circle
• exclamation-triangle, question-mark-circle
• shield-check, shield-exclamation

​

Interface

• heart, star, bookmark, flag
• eye, eye-slash, lock-closed, lock-open
• share, link, calendar, clock

​

Development

• code-bracket, command-line, cpu-chip, server
• wrench, bug-ant, light-bulb

​

Sizing

<!-- Using Tailwind size classes -->
<flux:icon icon="heart" class="w-4 h-4" />
<flux:icon icon="heart" class="w-6 h-6" />
<flux:icon icon="heart" class="w-8 h-8" />

​

Colors

<div class="text-red-500">
    <flux:icon icon="heart" />
</div>

<!-- Or apply directly -->
<flux:icon icon="heart" class="text-blue-500" />

​

Usage in Components

​

Buttons

<flux:button icon="plus">Add Item</flux:button>
<flux:button icon:leading="check">Confirm</flux:button>
<flux:button icon:trailing="arrow-right">Next</flux:button>

​

Inputs

<flux:input icon="magnifying-glass" placeholder="Search..." />
<flux:input icon:leading="envelope" placeholder="Email" />
<flux:input icon:trailing="information-circle" />

​

Badges

<flux:badge icon="check-circle" color="green">Verified</flux:badge>

​

Callouts

<flux:callout icon="information-circle" variant="warning">
    <flux:callout.text>Important information</flux:callout.text>
</flux:callout>

​

Loading Indicator

<flux:icon icon="loading" />

​

Custom Icons

<flux:icon>
    <svg><!-- your custom SVG --></svg>
</flux:icon>

​

Icon Composition

<div class="relative inline-flex">
    <flux:icon icon="bell" class="w-6 h-6" />
    <span class="absolute -top-1 -right-1 flex h-3 w-3">
        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
        <span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
    </span>
</div>

​

Props Reference

​

Best Practices

1. Be Consistent: Stick to one variant throughout your application for visual consistency
2. Use Semantic Icons: Choose icons that clearly represent their function
3. Provide Context: Use aria-label on icon-only buttons
4. Size Appropriately: Match icon size to surrounding text

​

Accessibility

• Icons are decorative by default (aria-hidden="true")
• When icons convey meaning, add appropriate ARIA labels
• For interactive elements, ensure proper labeling:

<flux:button icon="trash" aria-label="Delete item" />