Use the icon-btn class (for buttons) or the icon-link class (for links) and any of the available icons for a borderless, actionable icon style.

<button class="icon-btn" type="button" aria-label="Menu">
  <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
    <use href="icons.svg#icon-menu-24" />
  </svg>
</button>
<a class="icon-link" href="https://www.ebay.com" aria-label="Settings">
  <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
    <use href="icons.svg#icon-settings-24" />
  </svg>
</a>

<button class="icon-btn icon-btn--large" type="button" aria-label="Save">
  <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
    <use href="icons.svg#icon-heart-24" />
  </svg>
</button>
<button class="icon-btn" type="button" aria-label="Save">
  <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
    <use href="icons.svg#icon-heart-24" />
  </svg>
</button>
<button class="icon-btn icon-btn--small" type="button" aria-label="Save">
  <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
    <use href="icons.svg#icon-heart-24" />
  </svg>
</button>

To remove the background colour and hover states, apply the icon-btn--transparent modifier. This is typically needed if the icon button is placed on a non-default background colour or if the icon has a colour fill (as in the case below).

<button
  class="icon-btn icon-btn--transparent"
  type="button"
  aria-label="Confirmation"
>
  <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
    <use href="icons.svg#icon-confirmation-filled-24" />
  </svg>
</button>
<a
  class="icon-link icon-link--transparent"
  href="https://www.ebay.com"
  aria-label="Attention"
>
  <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
    <use href="icons.svg#icon-attention-filled-24" />
  </svg>
</a>

Badged Icon Button

An icon button can be badged using the badge module.

The button or anchor element requires an additional icon-btn--badged or icon-link--badged modifier, respectively.

<button
  aria-label="Watchlist (4 notifications)"
  class="icon-btn icon-btn--badged"
  type="button"
>
  <svg class="icon icon--24" width="24" height="24" aria-hidden="true">
    <use href="#icon-heart-24" />
  </svg>
  <span aria-hidden="true" class="badge"> 4 </span>
</button>
<a
  aria-label="Inbox (4 notifications)"
  class="icon-link icon-link--badged"
  href="https://www.ebay.com"
>
  <svg class="icon icon--24" width="24" height="24" aria-hidden="true">
    <use href="#icon-notification-24" />
  </svg>
  <span aria-hidden="true" class="badge"> 99+ </span>
</a>

Primary Icon Button

Use the primary modifier to create a primary icon button variant.

<button
  class="icon-btn icon-btn--large icon-btn--primary"
  type="button"
  aria-label="Save"
>
  <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
    <use href="#icon-heart-24" />
  </svg>
</button>
<button class="icon-btn icon-btn--primary" type="button" aria-label="Save">
  <svg class="icon icon--20" width="16" height="16" aria-hidden="true">
    <use href="#icon-heart-20" />
  </svg>
</button>
<button
  class="icon-btn icon-btn--small icon-btn--primary"
  type="button"
  aria-label="Save"
>
  <svg class="icon icon--16" width="16" height="16" aria-hidden="true">
    <use href="#icon-heart-16" />
  </svg>
</button>

Secondary Icon Button

Use the secondary modifier to create a secondary icon button variant.

<button
  class="icon-btn icon-btn--large icon-btn--secondary"
  type="button"
  aria-label="Save"
>
  <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
    <use href="#icon-heart-24" />
  </svg>
</button>
<button class="icon-btn icon-btn--secondary" type="button" aria-label="Save">
  <svg class="icon icon--20" width="16" height="16" aria-hidden="true">
    <use href="#icon-heart-20" />
  </svg>
</button>
<button
  class="icon-btn icon-btn--small icon-btn--secondary"
  type="button"
  aria-label="Save"
>
  <svg class="icon icon--16" width="16" height="16" aria-hidden="true">
    <use href="#icon-heart-16" />
  </svg>
</button>

Tertiary Icon Button

Use the tertiary modifier to create a tertiary icon button variant.

<button
  class="icon-btn icon-btn--large icon-btn--tertiary"
  type="button"
  aria-label="Save"
>
  <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
    <use href="#icon-heart-24" />
  </svg>
</button>
<button class="icon-btn icon-btn--tertiary" type="button" aria-label="Save">
  <svg class="icon icon--20" width="16" height="16" aria-hidden="true">
    <use href="#icon-heart-20" />
  </svg>
</button>
<button
  class="icon-btn icon-btn--small icon-btn--tertiary"
  type="button"
  aria-label="Save"
>
  <svg class="icon icon--16" width="16" height="16" aria-hidden="true">
    <use href="#icon-heart-16" />
  </svg>
</button>

Using with a Progress Spinner

You may use a progress spinner inside the icon button.

<button
  class="icon-btn icon-btn--large icon-btn--primary"
  type="button"
  aria-label="Save"
>
  <span class="progress-spinner progress-spinner--large">
    <svg aria-hidden="true" class="icon icon--30" height="30" width="30">
      <use href="#icon-spinner-30" />
    </svg>
  </span>
</button>
<button class="icon-btn icon-btn--primary" type="button" aria-label="Save">
  <span class="progress-spinner">
    <svg aria-hidden="true" class="icon icon--24" height="24" width="24">
      <use href="#icon-spinner-24" />
    </svg>
  </span>
</button>
<button
  class="icon-btn icon-btn--small icon-btn--primary"
  type="button"
  aria-label="Save"
>
  <span class="progress-spinner progress-spinner--small">
    <svg aria-hidden="true" class="icon icon--20" height="20" width="20">
      <use href="#icon-spinner-20" />
    </svg>
  </span>
</button>

Using a Link

You may use an <a> to create a link icon button as well.

<a
  aria-label="loading"
  class="icon-link icon-link--large icon-link--primary"
  href="https://www.ebay.com"
>
  <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
    <use href="#icon-heart-24" />
  </svg>
</a>
<a
  aria-label="loading"
  class="icon-link icon-link--primary"
  href="https://www.ebay.com"
>
  <svg class="icon icon--20" width="16" height="16" aria-hidden="true">
    <use href="#icon-heart-20" />
  </svg>
</a>
<a
  aria-label="loading"
  class="icon-link icon-link--small icon-link--primary"
  href="https://www.ebay.com"
>
  <svg class="icon icon--16" width="16" height="16" aria-hidden="true">
    <use href="#icon-heart-16" />
  </svg>
</a>