---
title: Icon Button
description: Used to render an icon within a button
links:
  source: components/button
  storybook: components-icon-button--basic
  recipe: button
---

<ExampleTabs name="icon-button-basic" />

## Usage

```jsx
import { IconButton } from "@chakra-ui/react"
```

```jsx
<IconButton aria-label="Search database">
  <LuSearch />
</IconButton>
```

## Examples

### Sizes

Use the `size` prop to change the size of the button.

<ExampleTabs name="icon-button-with-sizes" />

### Variants

Use the `variant` prop to change its visual style

<ExampleTabs name="icon-button-with-variants" />

### Color

Use the `colorPalette` prop to change the color of the button

<ExampleTabs name="icon-button-with-colors" />

### Rounded

Set `rounded="full"` to make the button fully rounded

<ExampleTabs name="icon-button-rounded" />

## Props

<PropTable component="Button" part="Button" omit={["loading", "loadingText"]} />
