Icon Button

Circular or square icon-only buttons with sizes, variants, badges, and loading state.

Basic Icon Buttons

Preview

<div class="flex items-center gap-3">
  <!-- Default (ghost) -->
  <button class="icon-btn" aria-label="Settings">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
  </button>

  <!-- Filled -->
  <button class="icon-btn icon-btn-filled" aria-label="Add">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
  </button>

  <!-- Outline -->
  <button class="icon-btn icon-btn-outline" aria-label="Edit">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
  </button>

  <!-- Soft -->
  <button class="icon-btn icon-btn-soft" aria-label="Delete">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
  </button>
</div>

Requires: ux.min.css

<div class="flex items-center gap-3">
  <button class="inline-flex items-center justify-center w-11 h-11 rounded-full border-none bg-transparent text-base-content hover:bg-base-200 cursor-pointer" aria-label="Settings">
    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/></svg>
  </button>
  <button class="inline-flex items-center justify-center w-11 h-11 rounded-full bg-primary text-primary-content cursor-pointer" aria-label="Add">
    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
  </button>
</div>

Requires: tw.min.css

// No JavaScript required — use aria-label for accessibility

Sizes

Preview

<div class="flex items-center gap-3">
  <button class="icon-btn icon-btn-filled icon-btn-xs" aria-label="XS">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
  </button>
  <button class="icon-btn icon-btn-filled icon-btn-sm" aria-label="SM">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
  </button>
  <button class="icon-btn icon-btn-filled" aria-label="MD">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
  </button>
  <button class="icon-btn icon-btn-filled icon-btn-lg" aria-label="LG">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
  </button>
  <button class="icon-btn icon-btn-filled icon-btn-xl" aria-label="XL">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
  </button>
</div>

Requires: ux.min.css

<div class="flex items-center gap-3">
  <button class="inline-flex items-center justify-center w-7 h-7 rounded-full bg-primary text-primary-content cursor-pointer" aria-label="XS">
    <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
  </button>
  <button class="inline-flex items-center justify-center w-9 h-9 rounded-full bg-primary text-primary-content cursor-pointer" aria-label="SM">
    <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
  </button>
  <button class="inline-flex items-center justify-center w-11 h-11 rounded-full bg-primary text-primary-content cursor-pointer" aria-label="MD">
    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
  </button>
  <button class="inline-flex items-center justify-center w-13 h-13 rounded-full bg-primary text-primary-content cursor-pointer" aria-label="LG">
    <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
  </button>
  <button class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary text-primary-content cursor-pointer" aria-label="XL">
    <svg class="w-7 h-7" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
  </button>
</div>

Requires: tw.min.css

// No JavaScript required

Colors

Preview

<div class="flex items-center gap-3">
  <button class="icon-btn color-primary" aria-label="Primary">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
  </button>
  <button class="icon-btn color-success" aria-label="Success">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
  </button>
  <button class="icon-btn color-warning" aria-label="Warning">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
  </button>
  <button class="icon-btn color-error" aria-label="Error">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
  </button>
</div>

Requires: ux.min.css

<div class="flex items-center gap-3">
  <button class="inline-flex items-center justify-center w-11 h-11 rounded-full bg-primary text-primary-content cursor-pointer" aria-label="Primary">...</button>
  <button class="inline-flex items-center justify-center w-11 h-11 rounded-full bg-success text-success-content cursor-pointer" aria-label="Success">...</button>
</div>

Requires: tw.min.css

// No JavaScript required

Shapes & Badges

Preview

<div class="flex items-center gap-4">
  <!-- Square -->
  <button class="icon-btn icon-btn-soft icon-btn-square" aria-label="Square">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/></svg>
  </button>

  <!-- Rounded -->
  <button class="icon-btn icon-btn-soft icon-btn-rounded" aria-label="Rounded">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/></svg>
  </button>

  <!-- Badge dot -->
  <button class="icon-btn icon-btn-badge" aria-label="Notifications">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
  </button>

  <!-- Badge count -->
  <button class="icon-btn" aria-label="Messages (3)" style="position: relative;">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
    <span class="icon-btn-count">3</span>
  </button>
</div>

Requires: ux.min.css

<div class="flex items-center gap-4">
  <!-- Square -->
  <button class="inline-flex items-center justify-center w-11 h-11 rounded-field bg-primary/10 text-primary border-none cursor-pointer hover:bg-primary/20" aria-label="Square">
    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/></svg>
  </button>
  <!-- Rounded -->
  <button class="inline-flex items-center justify-center w-11 h-11 rounded-box bg-primary/10 text-primary border-none cursor-pointer hover:bg-primary/20" aria-label="Rounded">
    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/></svg>
  </button>
  <!-- Badge dot -->
  <button class="relative inline-flex items-center justify-center w-11 h-11 rounded-full border-none bg-transparent text-base-content hover:bg-base-200 cursor-pointer" aria-label="Notifications">
    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
    <span class="absolute top-1.5 right-1.5 w-2.5 h-2.5 bg-error rounded-full"></span>
  </button>
  <!-- Badge count -->
  <button class="relative inline-flex items-center justify-center w-11 h-11 rounded-full border-none bg-transparent text-base-content hover:bg-base-200 cursor-pointer" aria-label="Messages (3)">
    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
    <span class="absolute -top-0.5 -right-0.5 min-w-5 h-5 flex items-center justify-center px-1 text-xs font-bold bg-error text-white rounded-full">3</span>
  </button>
</div>

Requires: tw.min.css

// No JavaScript required

States

Preview

<div class="flex items-center gap-3">
  <!-- Active / pressed -->
  <button class="icon-btn icon-btn-active" aria-pressed="true" aria-label="Liked">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
  </button>

  <!-- Disabled -->
  <button class="icon-btn" disabled aria-label="Disabled">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
  </button>

  <!-- Loading -->
  <button class="icon-btn icon-btn-filled icon-btn-loading" aria-label="Loading">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
    <span class="icon-btn-spinner"></span>
  </button>
</div>

Requires: ux.min.css

<div class="flex items-center gap-3">
  <!-- Active / pressed -->
  <button class="inline-flex items-center justify-center w-11 h-11 rounded-full border-none bg-primary/15 text-primary cursor-pointer" aria-pressed="true" aria-label="Liked">
    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
  </button>
  <!-- Disabled -->
  <button class="inline-flex items-center justify-center w-11 h-11 rounded-full border-none bg-transparent text-base-content/30 cursor-not-allowed" disabled aria-label="Disabled">
    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
  </button>
  <!-- Loading -->
  <button class="relative inline-flex items-center justify-center w-11 h-11 rounded-full bg-primary text-primary-content cursor-wait" aria-label="Loading">
    <svg class="w-5 h-5 opacity-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
    <span class="absolute inset-0 flex items-center justify-center"><span class="loading loading-spinner loading-sm"></span></span>
  </button>
</div>

Requires: tw.min.css

// Toggle pressed state
btn.addEventListener('click', () => {
  const pressed = btn.getAttribute('aria-pressed') === 'true';
  btn.setAttribute('aria-pressed', !pressed);
  btn.classList.toggle('icon-btn-active');
});

Glass Variant

Preview

<div class="p-6 rounded-box flex items-center gap-3" style="background: linear-gradient(135deg, var(--color-primary), var(--color-info));">
  <button class="icon-btn glass" aria-label="Home">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
  </button>
  <button class="icon-btn glass" aria-label="Search">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
  </button>
  <button class="icon-btn glass" aria-label="Settings">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/></svg>
  </button>
</div>

Requires: ux.min.css

<div class="p-6 rounded-box flex items-center gap-3" style="background: linear-gradient(135deg, var(--color-primary), var(--color-info));">
  <button class="inline-flex items-center justify-center w-11 h-11 rounded-full glass text-white border-none cursor-pointer hover:brightness-110" aria-label="Home">
    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
  </button>
  <button class="inline-flex items-center justify-center w-11 h-11 rounded-full glass text-white border-none cursor-pointer hover:brightness-110" aria-label="Search">
    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
  </button>
  <button class="inline-flex items-center justify-center w-11 h-11 rounded-full glass text-white border-none cursor-pointer hover:brightness-110" aria-label="Settings">
    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/></svg>
  </button>
</div>

Requires: tw.min.css

// No JavaScript required