Build an accessible icon button

An icon does not give assistive technology a reliable name. Add aria-label to the button, hide the decorative SVG, and use type="button" so the control does not submit a surrounding form.

<button type="button" class="icon-button" aria-label="Copy code">
  <svg aria-hidden="true" viewBox="0 0 24 24" width="20" height="20">
    <!-- icon paths -->
  </svg>
</button>

Do not remove the focus outline without replacing it. :focus-visible keeps a clear keyboard indicator without showing it after every pointer click.

.icon-button {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.icon-button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

Try the finished control with a pointer or the keyboard. Its label is available to assistive technology even though only the icon is visible.