Icon Button
图标按钮
A button with only an icon and no text, which is only meaningful when paired with a tooltip.
Live Demo
Actually clickableWhat you just saw:The row of small icons in the top-right of an editor (bold, italic, align), the heart and download keys on an image, the delete X on each chat list row — all icon buttons.
What it actually is
An icon button trades space for clarity: it fits into a toolbar, but the user has to already know what the icon means. So its premise is that the icon is universal enough, or that a tooltip backs it up.
Anatomy · What it's made of
Hit Area热区
32px visually, hit area expanded to 44×44px
Icon图标
20–24px, stroke width kept consistent at 1.75px
Tooltip悬停提示
Required, or add an aria-label
States状态
Three states: hover / active / disabled
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| The toolbar needs to hold many actions | Yes |
| The icon is an industry-standard symbol (search, close, share) | Yes |
| Space is extremely tight (such as a card corner) | Yes |
| A feature appearing for the first time, with a non-obvious icon | No |
| It is the primary action of the page | No |
A feature that needs to be discovered (say "Export") should not be icon-only — users would have to guess the meaning.
Single Chinese characters used as icons are nearly unreadable in a Chinese UI.
Similar Patterns
Don't mix these upIcon ButtonCurrent
图标按钮
A button with only an icon and no text, which is only meaningful when paired with a tooltip.
Button
按钮
The most basic clickable element in the interface — the user taps it and one thing happens.
In one line:A button with only an icon and no text, which is only meaningful when paired with a tooltip.
Button
按钮
The most basic clickable element in the interface — the user taps it and one thing happens.
FAB
浮动操作按钮
The round button that floats in the corner of the screen, usually carrying the "create" action.
Tooltip
文字提示
A small line of text that appears on hover, telling you what an unfamiliar icon actually does.
Badge
角标
A tiny marker pinned to the corner of an icon or avatar that says "there is something you need to look at".
How to tell AI
Three levels of promptAdd the component name and specifics
Add a group of icon buttons to the right of the editor toolbar: bold / italic / delete. Delete uses the danger red, and a tooltip appears on hover.
Don't just say this to AI
Bad → BetterDon't say this to AI
Add a few small icons that can be tapped.
Say this instead
Add a group of icon buttons (20px icon, 44×44px hit area), each with an aria-label and a hover tooltip, delete in the danger red, and the whole group wrapped in role="toolbar".
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.