Design System

GuidesFoundationComponentsReleases
⌘K

IconButton

A version of Button that uses an icon alone for its label.

Design guidance

When and how to use this

Use a IconButton to allow a user to perform an action related to the content currently displayed. IconButton is particularly well suited for compact parts of the interface such as toolbars and as a trigger for Menu or Popover.

When to consider something else

If the action associated with an interaction is a navigation, consider using a Link instead.

React

IconButton composes the Button component and supports the same colors, sizes and variants.

A light color is also available for use on dark backgrounds.

live

<Stack direction="row" spacing="300" alignItems="center" pl="200">
<IconButton color="primary" icon={iInfo} label="Info" />
<IconButton color="warning" icon={iAlertTriangle} label="Warning" />
<IconButton color="danger" icon={iAlertOctagon} label="Danger" />
<IconButton color="success" icon={iSmile} label="Success" />
<Stack bg="neutral.700" p="200" borderRadius="300">
<IconButton color="light" icon={iSun} label="Light" />
</Stack>
</Stack>

Color Scheme

Button supports color modes when using the next theme, but sometimes a design calls for the colorScheme to override the mode. Pass light or dark to set the color explicitly.

live

<DesignSystemProvider attach fontsHost="/typography/">
<Stack
direction="row"
spacing="300"
alignItems="center"
p="400"
bg="neutral.800"
m="-400"
>
<IconButton
colorScheme="light"
variant="primary"
label="Primary"
icon={iHexagon}
/>
<IconButton
colorScheme="light"
variant="secondary"
label="Secondary"
icon={iHexagon}
/>
<IconButton
colorScheme="light"
variant="tertiary"
label="Tertiary"
icon={iHexagon}
/>
<IconButton
colorScheme="light"
variant="ghost"
label="Ghost"
icon={iHexagon}
/>
</Stack>
</DesignSystemProvider>

Shape (Deprecated - use Variants)

Shape is controlled via the shape prop and defaults to circle.

live

<Stack direction="row" spacing="300">
<IconButton shape="circle" icon={iCircle} label="Circle" />
<IconButton shape="square" icon={iSquare} label="Square" />
</Stack>

Fill (Deprecated - use Variants)

Shape is controlled via the fill prop and defaults to solid.

live

<Stack direction="row" spacing="300">
<IconButton fill="solid" label="Solid" icon={iCpu} />
<IconButton fill="outline" label="Outline" icon={iCpu} />
<IconButton fill="minimal" label="Minimal" icon={iCpu} />
</Stack>

Size

Size is controlled via the size prop and defaults to medium.

live

<Stack alignItems="center" direction="row" spacing="300">
<IconButton size="small" label="Small" icon={iGift} />
<IconButton size="medium" label="Medium" icon={iGift} />
<IconButton size="large" label="Large" icon={iGift} />
</Stack>

Disabled

Set the isDisabled prop to disable the button.

live

<Stack direction="row" spacing="300">
<IconButton isDisabled label="Disabled" fill="solid" icon={iEdit} />
<IconButton isDisabled label="Disabled" fill="outline" icon={iEdit} />
<IconButton isDisabled label="Disabled" fill="minimal" icon={iEdit} />
</Stack>

Loading

Set the isLoading prop to convey that an action is processing.

live

<Stack direction="row" spacing="300">
<IconButton isLoading label="Loading" fill="solid" icon={iEdit} />
<IconButton isLoading label="Loading" fill="outline" icon={iEdit} />
<IconButton isLoading label="Loading" fill="minimal" icon={iEdit} />
</Stack>

Bootstrap

Add the .btn-icon class to a Button and an icon as the button's content following the Bootstrap Icon markup.

live

<div class="hstack gap-200">
<button type="button" class="btn btn-primary btn-icon" aria-label="Primary">
<svg class="icon" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="/icons/all.svg#i-feather" />
</svg>
</button>
<button type="button" class="btn btn-warning btn-icon" aria-label="Warning">
<svg class="icon" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="/icons/all.svg#i-feather" />
</svg>
</button>
<button type="button" class="btn btn-danger btn-icon" aria-label="Danger">
<svg class="icon" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="/icons/all.svg#i-feather" />
</svg>
</button>
<button type="button" class="btn btn-success btn-icon" aria-label="Success">
<svg class="icon" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="/icons/all.svg#i-feather" />
</svg>
</button>
</div>

Shape

Shape is applied via the .btn-shape-pill and .btn-shape-box classes in addition to the other .btn classes and defaults to pill.

live

<div class="hstack gap-300">
<button type="button" class="btn btn-primary btn-icon" aria-label="Circle">
<svg class="icon" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="/icons/all.svg#i-circle" />
</svg>
</button>
<button
type="button"
class="btn btn-primary btn-icon btn-shape-box"
aria-label="Square"
>
<svg class="icon" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="/icons/all.svg#i-square" />
</svg>
</button>
</div>

Fill

Fill is applied via the .btn-[shape]-[color] instead of the standard .btn-[color] classes.

live

<div class="hstack gap-300">
<button type="button" class="btn btn-primary btn-icon" aria-label="Solid">
<svg class="icon" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="/icons/all.svg#i-feather" />
</svg>
</button>
<button
type="button"
class="btn btn-outline-primary btn-icon"
aria-label="Outline"
>
<svg class="icon" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="/icons/all.svg#i-feather" />
</svg>
</button>
<button
type="button"
class="btn btn-minimal-primary btn-icon"
aria-label="Minimal"
>
<svg class="icon" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="/icons/all.svg#i-feather" />
</svg>
</button>
</div>

Size

Size is applied via the .btn-icon-[size] class in addition to other .btn classes and defaults to medium.

live

<div class="hstack gap-300">
<button type="button" class="btn btn-primary btn-icon-sm" aria-label="Small">
<svg class="icon" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="/icons/all.svg#i-feather" />
</svg>
</button>
<button type="button" class="btn btn-primary btn-icon" aria-label="Medium">
<svg class="icon" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="/icons/all.svg#i-feather" />
</svg>
</button>
<button type="button" class="btn btn-primary btn-icon-lg" aria-label="Large">
<svg class="icon" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="/icons/all.svg#i-feather" />
</svg>
</button>
</div>

Copyright © 2025 Hover Inc. All Rights Reserved.