<button class="icon-button" aria-label="Button label">
  <svg></svg>
</button>

aria-label?

Yes! In order for screen readers to understand what the button is for we can add aria-label to the <button> element.

Read more: Icon Button accessibility.

Sizes

Make the button smaller with the .small modifier.

<button class="icon-button small" aria-label="Button label">Small</button>
<button class="icon-button" aria-label="Button label">Default</button>

Anatomy

1. Container: <button class="icon-button">
2. Icon: <svg>
3. Label text: <button aria-label="">

Accessibility

To have an accessible label you can choose between three approaches.

Variant	Usage in Icon Button component
Add a aria-label on the button element	Default behavior.
Provide a label inside the button element	Not used (but possible with the .sr-only util).
Have a visible label that you reference with aria-labelledby	Not used.

API

Type	Modifiers	Default	Description
Sizes	.small	-	The size of the element.

Browser compatibility

Installation

icon-button.css

@layer components.base {
  :where(.icon-button) {
    --_text-color: inherit;

    align-items: center;
    aspect-ratio: 1;
    background-color: transparent;
    border: 0;
    border-radius: var(--radius-round);
    display: inline-flex;
    inline-size: var(--size-6);
    justify-content: center;
    padding: 0;
    transform-style: preserve-3d;

    &:where([disabled]) {
      color: light-dark(rgb(0, 0, 0/0.3), rgb(255, 255, 255/0.26));
      cursor: not-allowed;
      opacity: 0.64;
    }

    svg {
      max-inline-size: var(--size-5);
      pointer-events: none;
    }

    /* Ripple effect, utils > index.css */
    &:before {
      --highlight-size: 130%;
    }

    /* Size */
    &.small {
      inline-size: var(--size-4);
      svg {
        max-inline-size: var(--size-4);
      }
    }
  }
}