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

Preview Code

Copy

<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

Preview Code

Copy

<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

Preview Code

Copy

<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

Preview Code

Copy

<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

Preview Code

Copy

<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

Preview Code

Copy

<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

Preview Code

Copy

<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

Preview Code

Copy

<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

Preview Code

Copy

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

Preview Code

Copy

<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

Preview Code

Copy

<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

Preview Code

Copy

<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

Preview Code

Copy

<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

Preview Code

Copy

<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>