Button Icon generator
Row actions, toolbar buttons and compact card controls use lightning-button-icon when a label would take up too much space. Style the container, border and hover state so icon-only actions still feel clickable.
Your changes autosave in this browser, and the link above reproduces this exact configuration for anyone you send it to.
Live preview
Generated code
<template>
<lightning-button-icon
icon-name="utility:edit"
variant="border-filled"
alternative-text="Action"
class="studio-button-icon"
onclick={handleClick}
></lightning-button-icon>
</template>Design tips for button icons
- Always set meaningful alternative text — icon-only buttons are invisible to screen readers without it.
- Group related icon buttons together with consistent spacing so they read as one toolbar, not scattered controls.
- Reserve filled/brand variants for the single most important action in a group; keep the rest bordered or bare.
Related components
Components developers commonly compare against or pair with Button Icon.