Icon Button

Button represented primarily by an icon.

html

<button type="button" class="icon-btn icon-btn--plus icon-btn--md" style="--bg:#241430" aria-label="Add item">
  <span class="icon-btn__glyph icon-btn__glyph--plus"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 5v14M5 12h14"/></svg></span>
  <span class="icon-btn__glyph icon-btn__glyph--settings"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><line x1="4" y1="6" x2="20" y2="6"/><circle cx="9" cy="6" r="2"/><line x1="4" y1="12" x2="20" y2="12"/><circle cx="15" cy="12" r="2"/><line x1="4" y1="18" x2="20" y2="18"/><circle cx="7" cy="18" r="2"/></svg></span>
  <span class="icon-btn__glyph icon-btn__glyph--trash"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4 7h16M9 7V4h6v3M6 7l1 13a2 2 0 002 2h6a2 2 0 002-2l1-13"/></svg></span>
  <span class="icon-btn__glyph icon-btn__glyph--heart"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 20s-7-4.5-9.5-9A5 5 0 0112 5a5 5 0 019.5 6c-2.5 4.5-9.5 9-9.5 9z"/></svg></span>
</button>
<style>
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 999px;
  border: none;
  background: var(--bg);
  color: #FAF7F2;
  cursor: pointer;
}
.icon-btn--sm { width: 32px; height: 32px; }
.icon-btn--lg { width: 48px; height: 48px; }
.icon-btn__glyph { display: none; }
.icon-btn--plus .icon-btn__glyph--plus,
.icon-btn--settings .icon-btn__glyph--settings,
.icon-btn--trash .icon-btn__glyph--trash,
.icon-btn--heart .icon-btn__glyph--heart { display: inline-flex; }
.icon-btn:hover:not(:disabled) { filter: brightness(1.12); }
.icon-btn:active:not(:disabled) { filter: brightness(0.9); }
.icon-btn:focus-visible { outline:2px solid #241430;outline-offset:2px; }
.icon-btn:disabled { opacity: .4; cursor: not-allowed; }
</style>

tailwind

<button type="button" class="inline-flex items-center justify-center rounded-full border-none text-[#FAF7F2] cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed hover:brightness-110 active:brightness-90 icon-btn-tw icon-btn-tw--plus icon-btn-tw--md" style="background:#241430" aria-label="Add item">
  <span class="icon-btn-tw__glyph icon-btn-tw__glyph--plus"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 5v14M5 12h14"/></svg></span>
  <span class="icon-btn-tw__glyph icon-btn-tw__glyph--settings"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><line x1="4" y1="6" x2="20" y2="6"/><circle cx="9" cy="6" r="2"/><line x1="4" y1="12" x2="20" y2="12"/><circle cx="15" cy="12" r="2"/><line x1="4" y1="18" x2="20" y2="18"/><circle cx="7" cy="18" r="2"/></svg></span>
  <span class="icon-btn-tw__glyph icon-btn-tw__glyph--trash"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4 7h16M9 7V4h6v3M6 7l1 13a2 2 0 002 2h6a2 2 0 002-2l1-13"/></svg></span>
  <span class="icon-btn-tw__glyph icon-btn-tw__glyph--heart"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 20s-7-4.5-9.5-9A5 5 0 0112 5a5 5 0 019.5 6c-2.5 4.5-9.5 9-9.5 9z"/></svg></span>
</button>
<style>
.icon-btn-tw--sm { width: 32px; height: 32px; }
.icon-btn-tw--md { width: 40px; height: 40px; }
.icon-btn-tw--lg { width: 48px; height: 48px; }
.icon-btn-tw__glyph { display: none; }
.icon-btn-tw--plus .icon-btn-tw__glyph--plus,
.icon-btn-tw--settings .icon-btn-tw__glyph--settings,
.icon-btn-tw--trash .icon-btn-tw__glyph--trash,
.icon-btn-tw--heart .icon-btn-tw__glyph--heart { display: inline-flex; }
.icon-btn-tw--plus:focus-visible { outline:2px solid #241430;outline-offset:2px; }
</style>

react

const ICONS = {
  plus: <path d="M12 5v14M5 12h14" />,
  settings: (
    <>
      <line x1="4" y1="6" x2="20" y2="6" /><circle cx="9" cy="6" r="2" />
      <line x1="4" y1="12" x2="20" y2="12" /><circle cx="15" cy="12" r="2" />
      <line x1="4" y1="18" x2="20" y2="18" /><circle cx="7" cy="18" r="2" />
    </>
  ),
  trash: <path d="M4 7h16M9 7V4h6v3M6 7l1 13a2 2 0 002 2h6a2 2 0 002-2l1-13" />,
  heart: <path d="M12 20s-7-4.5-9.5-9A5 5 0 0112 5a5 5 0 019.5 6c-2.5 4.5-9.5 9-9.5 9z" />,
};

export function IconButton({
  label = "Add item",
  icon = "plus",
  size = "md",
  bg = "#241430",
  disabled = false,
}) {
  const dim = size === "sm" ? 32 : size === "lg" ? 48 : 40;
  return (
    <button
      type="button"
      aria-label={label}
      disabled={disabled}
      style={{
        display: "inline-flex",
        alignItems: "center",
        justifyContent: "center",
        width: dim,
        height: dim,
        borderRadius: 999,
        border: "none",
        background: bg,
        color: "#FAF7F2",
        cursor: disabled ? "not-allowed" : "pointer",
        opacity: disabled ? 0.4 : 1,
      }}
    >
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        {ICONS[icon]}
      </svg>
    </button>
  );
}