Core ElementsFree

Icon Button

A square or circular button for a single icon action.

Usage

Installation

bash

npm install @wunderui/react

Then import what you need:

tsx

import { IconButton, IconButtonTextCell } from "@wunderui/react"

Examples

Sizes

The plain icon button in all five sizes: 32, 36, 40, 44 and 48 px.

32 px

36 px

40 px

44 px

48 px

In context

How the component is used inside real screens — the same compositions as the Usage section of the Figma page.

Team member row

Quiet icon buttons as actions on a team member row.

ML

Mira LindqvistDesign lead · mira@wunderui.com

Thumbs up / down as plain icon buttons, with a round close button.

Was this helpful?

Your feedback improves the answers.

Inbox list pane

Tools in the header and a pin on every message.

Inbox12

Sarah Lindqvist

Re: Q3 roadmap

WunderUI billing

Invoice #4021 paid

Jonas Weber

Design review notes

Plain icon actions next to the main button.

AL

Alina Lorenz

Product designer

Upload progress panel

Cancel each upload on its own.

Uploading 3 files

brand-guide.pdf

x

hero.png

x

tokens.json

x

PreviousHover Card NextInput