---
meta:
title: Icon Button
description: Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
layout: component
---
For a full list of icons that come bundled with Shoelace, refer to the [icon component](/components/icon).
```html:preview
```
```jsx:react
import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
const App = () => ;
```
## Examples
### Sizes
Icon buttons inherit their parent element's `font-size`.
```html:preview
```
{% raw %}
```jsx:react
import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
const App = () => (
<>
>
);
```
{% endraw %}
### Colors
Icon buttons are designed to have a uniform appearance, so their color is not inherited. However, you can still customize them by styling the `base` part.
```html:preview
```
```jsx:react
import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
const css = `
.icon-button-color sl-icon-button::part(base) {
color: #b00091;
}
.icon-button-color sl-icon-button::part(base):hover,
.icon-button-color sl-icon-button::part(base):focus {
color: #c913aa;
}
.icon-button-color sl-icon-button::part(base):active {
color: #960077;
}
`;
const App = () => (
<>
>
);
```
### Link Buttons
Use the `href` attribute to convert the button to a link.
```html:preview
```
```jsx:react
import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
const App = () => ;
```
### Icon Button with Tooltip
Wrap a tooltip around an icon button to provide contextual information to the user.
```html:preview
```
```jsx:react
import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
const App = () => (
);
```
### Disabled
Use the `disabled` attribute to disable the icon button.
```html:preview
```
```jsx:react
import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
const App = () => ;
```