Icon button

Square, centered icon, accessible — perfect for toolbars and actions.

Widely Supported

uino-js

Quick implementation

/* HTML: <button class="icon-btn" aria-label="Close">✕</button> */

.icon-btn {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.1rem;
  color: oklch(0.93 0.01 260);
  background: oklch(0.19 0.02 260);
  border: 1px solid oklch(0.25 0.02 260);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.15s ease-out, border-color 0.15s ease-out;
}

.icon-btn:hover {
  background: oklch(0.25 0.02 260);
  border-color: oklch(0.35 0.02 260);
}

.icon-btn:active {
  transform: scale(0.93);
}

.icon-btn:focus-visible {
  outline: 2px solid oklch(0.72 0.19 265);
  outline-offset: 2px;
}

.icon-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

You are a senior frontend engineer building a button component system.

Goal: A square icon-only button with centered icon, accessible labeling, and full state coverage.

Technical constraints:
- Use display: grid with place-items: center for perfect icon centering.
- Fixed width and height (2.5rem) for a square aspect ratio.
- Use oklch() for all colors, not hex or rgba().
- Hover: subtle background shift. Active: scale(0.93).
- Focus-visible: 2px outline with 2px offset.
- Every icon button MUST have an aria-label attribute.

Framework variant (pick one):
A) Vanilla HTML + CSS only.
B) React component — accept icon (ReactNode), ariaLabel (string), onClick, and disabled props.

Edge cases to handle:
- Icons of different sizes must still appear centered (grid handles this).
- Touch targets should be at least 44px (2.75rem) for mobile accessibility.
- SVG icons should inherit currentColor for theming.

Return HTML + CSS.

Why this matters in 2026

Icon buttons appear in toolbars, close dialogs, trigger menus, and control media players. They are one of the most common interactive elements on the web. Getting the sizing, centering, and accessibility right in one reusable class saves hours of per-component fiddling.

The logic

display: grid; place-items: center centers the icon perfectly regardless of its size — no flexbox alignment math needed. Fixed width and height create the square shape. The transition on background and border-color creates a subtle hover effect. scale(0.93) on :active gives tactile press feedback that is slightly more aggressive than text buttons since the target is smaller.

Accessibility & performance

Icon buttons must have an aria-label — without visible text, screen readers would announce nothing or read the icon character. The 2.5rem (40px) minimum size meets WCAG 2.2 target size guidelines. For touch devices, consider increasing to 2.75rem (44px). SVG icons should use fill: currentColor to inherit the button's text color for consistent theming.