---
id: icon-button
category: form
title: Icon Button
package: '@chakra-ui/button'
description: Icon button renders an icon within in a button.
---

## Import

```js
import { IconButton } from '@chakra-ui/react'
```

## Usage

IconButton composes the `Button` component except that it renders only an icon.
Since `IconButton` only renders an icon, you must pass the `aria-label` prop, so
screen readers can give meaning to the button.

```jsx
<IconButton aria-label='Search database' icon={<SearchIcon />} />
```

### Button Colors

The `IconButton` component accepts most of the props from the `Button`
component, so we can use `colorScheme` prop to change the color of the button.

```jsx
<IconButton
  colorScheme='blue'
  aria-label='Search database'
  icon={<SearchIcon />}
/>
```

### Button Sizes

Like the `Button component`, pass the `size` prop to change the size of the
button.

```jsx
<IconButton
  colorScheme='teal'
  aria-label='Call Segun'
  size='lg'
  icon={<PhoneIcon />}
/>
```

### Button Variants

Like the `Button` component, pass the `variant` prop to change the style of the
button.

```jsx
<IconButton
  variant='outline'
  colorScheme='teal'
  aria-label='Send email'
  icon={<EmailIcon />}
/>
```

### With custom icon

You can also use icons from popular libraries like
[react-icons](https://react-icons.github.io/react-icons/) and just pass it into
the button.

```jsx
<IconButton
  variant='outline'
  colorScheme='teal'
  aria-label='Call Sage'
  fontSize='20px'
  icon={<MdPhone />}
/>
```

### With perfectly round button

You can pass the `isRound` prop to make the button perfectly round

```jsx
<IconButton
  isRound={true}
  variant='solid'
  colorScheme='teal'
  aria-label='Done'
  fontSize='20px'
  icon={<CheckIcon />}
/>
```