> For the complete documentation index, see [llms.txt](https://swift-packages.gitbook.io/materialuikit/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://swift-packages.gitbook.io/materialuikit/components/icon-button.md).

# Icon Button

### Overview

The `IconButton` creates a circular button styled according to Material UI. It supports both system and custom images, and offers multiple styling and customizing options.

To you use `IconButton`, initialize it with either a system symbol or a custom image, select the desired style, and provide an action closure for button interaction.

### Initializers

Creates a circular icon button with a system symbol, style, and action.

```swift
IconButton(
    systemImage: String,
    style: IconButtonStyle,
    _ action: @escaping () -> Void
)
```

Creates a circular icon button with a custom image, style, and action.

```swift
IconButton(
  image: String,
  style: IconButtonStyle,
  _ action: @escaping () -> Void
)
```

> For detailed descriptions of the available icon styles in `IconButton`, refer to the [IconButtonStyle](/materialuikit/components/icon-button/iconbuttonstyle.md).

### Parameters

<table data-header-hidden><thead><tr><th width="197"></th><th></th></tr></thead><tbody><tr><td><strong>Parameter</strong></td><td><strong>Description</strong></td></tr><tr><td><code>systemImage</code></td><td>SF Symbol string for system-provided icons.</td></tr><tr><td><code>imageName</code></td><td>Name of a custom image.</td></tr><tr><td><code>style</code></td><td>The style of the button, defined by <code>IconButtonStyle</code>.</td></tr><tr><td><code>action</code></td><td>Closure to execute when the button is pressed.</td></tr></tbody></table>

### Modifiers

Sets the corner radius for  icon button.

```swift
iconButtonSize(_ frameSize: CGFloat)
```

Sets the font weight for icon button.

```swift
iconButtonFontSize(_ fontSize: Font)
```

### Example

Displays a circular icon button with a custom style using an SF Symbol.

```swift
IconButton(systemImage: "heart.fill", style: .elevated) {
    Void()
}
```

<figure><picture><source srcset="/files/kcY1byy26nyAWmexD0bn" media="(prefers-color-scheme: dark)"><img src="/files/kxH9Y8HQF1CXRuPIHkRb" alt=""></picture><figcaption></figcaption></figure>

Displays a circular icon button with a custom style using a custom image.

```swift
IconButton(imageName: "customIcon", style: .filled) {
    Void()
}
```

<figure><picture><source srcset="/files/4qB1D94px1OwoCtyqNE4" media="(prefers-color-scheme: dark)"><img src="/files/pWAjD7TAkMb5EEy8dJ67" alt=""></picture><figcaption></figcaption></figure>

Displays a circular icon button with a custom frame and font size.

```swift
IconButton(systemImage: "heart.fill", style: .tonal) {
    Void()
}
.iconButtonSize(50)
.iconButtonFontSize(.title)
```

<figure><picture><source srcset="/files/qsZ5CCgeLQjWznpFWq2H" media="(prefers-color-scheme: dark)"><img src="/files/sAaGhldInOUDakpmTxOs" alt=""></picture><figcaption></figcaption></figure>

> `IconButton` uses the default configuration's values for frame and font size if custom values are not specified.