UI.BlueStack.io - Component Library

icon Component

Icon System

Icons are rendered using Lucide icons with automatic SVG conversion. Simply use i class="icon [icon-name]" to display any icon.

Basic Icons

<div class="flex gap-6 flex-wrap items-center">
                <i class="icon home"></i>
                <i class="icon user"></i>
                <i class="icon settings"></i>
                <i class="icon heart"></i>
                <i class="icon star"></i>
                <i class="icon search"></i>
                <i class="icon menu"></i>
                <i class="icon x"></i>
            </div>

Icon Sizes

<div class="flex gap-6 flex-wrap items-center">
                <i class="icon settings w-3 h-3"></i>
                <i class="icon settings w-4 h-4"></i>
                <i class="icon settings w-5 h-5"></i>
                <i class="icon settings w-6 h-6"></i>
                <i class="icon settings w-8 h-8"></i>
                <i class="icon settings w-10 h-10"></i>
                <i class="icon settings w-12 h-12"></i>
            </div>

Icon Colors

<div class="flex gap-6 flex-wrap items-center">
                <i class="icon heart text-red-500"></i>
                <i class="icon circle-check text-green-500"></i>
                <i class="icon triangle-alert text-yellow-500"></i>
                <i class="icon info text-blue-500"></i>
                <i class="icon star text-purple-500"></i>
                <i class="icon zap text-orange-500"></i>
            </div>

Icon Buttons

Icon-Only Buttons

<div class="flex gap-4 flex-wrap items-center">
                <button class="button icon tiny">
                    <i class="icon plus w-3 h-3"></i>
                </button>
                <button class="button icon small">
                    <i class="icon plus w-4 h-4"></i>
                </button>
                <button class="button icon">
                    <i class="icon plus w-5 h-5"></i>
                </button>
                <button class="button icon large">
                    <i class="icon plus w-6 h-6"></i>
                </button>
                <button class="button icon big">
                    <i class="icon plus w-7 h-7"></i>
                </button>
            </div>

Colored Icon Buttons

<div class="flex gap-4 flex-wrap items-center">
                <button class="button icon primary">
                    <i class="icon save w-5 h-5"></i>
                </button>
                <button class="button icon positive">
                    <i class="icon check w-5 h-5"></i>
                </button>
                <button class="button icon negative">
                    <i class="icon trash-2 w-5 h-5"></i>
                </button>
                <button class="button icon warning">
                    <i class="icon circle-alert w-5 h-5"></i>
                </button>
            </div>

Round Icon Buttons

<div class="flex gap-4 flex-wrap items-center">
                <button class="button icon round">
                    <i class="icon plus w-5 h-5"></i>
                </button>
                <button class="button icon round primary">
                    <i class="icon user w-5 h-5"></i>
                </button>
                <button class="button icon round positive">
                    <i class="icon check w-5 h-5"></i>
                </button>
                <button class="button icon round negative">
                    <i class="icon x w-5 h-5"></i>
                </button>
            </div>

Ghost & Outline Icon Buttons

<div class="flex gap-4 flex-wrap items-center">
                <button class="button icon ghost">
                    <i class="icon menu w-5 h-5"></i>
                </button>
                <button class="button icon ghost primary">
                    <i class="icon settings w-5 h-5"></i>
                </button>
                <button class="button icon outline">
                    <i class="icon download w-5 h-5"></i>
                </button>
                <button class="button icon outline positive">
                    <i class="icon upload w-5 h-5"></i>
                </button>
            </div>

Icons with Text

Buttons with Icons

<div class="flex gap-4 flex-wrap items-center">
                <button class="button">
                    <i class="icon download w-4 h-4"></i>
                    Download
                </button>
                <button class="button primary">
                    <i class="icon save w-4 h-4"></i>
                    Save Changes
                </button>
                <button class="button positive">
                    Continue
                    <i class="icon arrow-right w-4 h-4"></i>
                </button>
                <button class="button negative">
                    <i class="icon trash-2 w-4 h-4"></i>
                    Delete
                </button>
            </div>

Links with Icons

External Link Download File Learn More

<div class="flex gap-6 flex-wrap items-center">
                <a href="#" class="inline-flex items-center gap-1 text-blue-600 hover:text-blue-700">
                    <i class="icon external-link w-4 h-4"></i>
                    External Link
                </a>
                <a href="#" class="inline-flex items-center gap-1 text-blue-600 hover:text-blue-700">
                    <i class="icon download w-4 h-4"></i>
                    Download File
                </a>
                <a href="#" class="inline-flex items-center gap-1 text-blue-600 hover:text-blue-700">
                    Learn More
                    <i class="icon arrow-right w-4 h-4"></i>
                </a>
            </div>

Icon Animations

Animated Icons

<div class="flex gap-6 flex-wrap items-center">
                <i class="icon loader animate-spin w-6 h-6"></i>
                <i class="icon heart animate-pulse w-6 h-6 text-red-500"></i>
                <button class="button icon">
                    <i class="icon refresh-cw w-5 h-5"></i>
                </button>
                <button class="button primary">
                    <i class="icon loader animate-spin w-4 h-4"></i>
                    Loading...
                </button>
            </div>

Icon States

<div class="flex gap-6 flex-wrap items-center">
                <i class="icon star w-6 h-6"></i>
                <i class="icon star w-6 h-6 muted"></i>
                <i class="icon star w-6 h-6 faded"></i>
                <button class="button icon" disabled>
                    <i class="icon save w-5 h-5"></i>
                </button>
            </div>

Icon Utilities

Rotation & Flipping

<div class="flex gap-6 flex-wrap items-center">
                <i class="icon arrow-right w-6 h-6"></i>
                <i class="icon arrow-right w-6 h-6 rotate-90"></i>
                <i class="icon arrow-right w-6 h-6 rotate-180"></i>
                <i class="icon arrow-right w-6 h-6 rotate-270"></i>
                <i class="icon arrow-right w-6 h-6 flip-horizontal"></i>
                <i class="icon arrow-right w-6 h-6 flip-vertical"></i>
            </div>

Common Patterns

Form Input Icons

<div class="space-y-4">
                <div class="relative">
                    <input type="text" placeholder="Search..." class="pl-4 pr-4 py-2 border border-gray-300 rounded-lg w-full max-w-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                </div>
                <div class="relative">
                    <input type="email" placeholder="Email address" class="pl-4 pr-4 py-2 border border-gray-300 rounded-lg w-full max-w-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                </div>
            </div>

Icons with Badges

<div class="flex gap-6 flex-wrap items-center">
                <div class="relative">
                    <i class="icon bell w-6 h-6"></i>
                    <span class="absolute -top-1 -right-1 w-2 h-2 bg-red-500 rounded-full"></span>
                </div>
                <div class="relative">
                    <i class="icon message-square w-6 h-6"></i>
                    <span class="absolute -top-2 -right-2 px-1.5 min-w-[20px] h-5 bg-red-500 text-white text-xs rounded-full flex items-center justify-center">3</span>
                </div>
                <button class="button icon notification" data-count="5">
                    <i class="icon inbox w-5 h-5"></i>
                </button>
            </div>