Skip to main content
Frontend Glossary

UI components · Fundamentals

Icon Button

Also called: IconButton, Icon-only button, Round button, Tool button

A button that shows only an icon and no text, for actions everyone recognizes, like close, more, edit, and delete.

Click “Labeled” to see what each part is called.

How to tell AI

Swap in your own content first

At the far right of each table row, add two icon buttons: a pencil for edit and a trash can for delete. Make them 32×32px with no border. On hover, show a light gray background and a tooltip. Give every button an aria-label, and ask for confirmation before deleting.

Send to

01Decide

Does your content look like this?

Check both columns to confirm Icon Button is what you need.

Use Icon Button when

  • Edit, delete, more, and similar actions repeated in table rows, cards, and list items
  • Compact areas with lots of actions, like toolbars or the top of an editor
  • Actions whose icons almost everyone knows, like close, back, and search

Pick something else when

  • When the action isn't intuitive and users can't guess what happens from the icon alone

  • The most important action on the page, like Place order or Buy now

  • When clicking goes to another page

    Use insteadLink

Not sure? Upload a screenshot and page analysis will check which layout each block should use.

02Pitfalls

Common misuse

It looks like it works, but it makes things harder for users.

  1. 01

    Using a vague icon with no tooltip, so users have to click each one to find out what it does

  2. 02

    No aria-label, so screen readers just say "button"

  3. 03

    A click target that's too small (say, only 16px), which is hard to tap on a phone

03Spot it

How to spot it

Look at the overall structure first, then check a few features you can spot at a glance.

Structure

A square or round clickable area with a centered icon, usually paired with a tooltip that appears on hover.

PartsClick one to highlight it in the wireframe above

04Explained

In detail

An icon button is a type of button that keeps the icon and drops the text. Common ones are close (×), more (three dots), edit (pencil), delete (trash can), and search (magnifying glass). It saves a lot of space, so it works well at the end of table rows, in the top-right corner of cards, and in toolbars. Even repeated row after row, it doesn't feel crowded.

Compared with a regular Button, its meaning depends entirely on the icon, so it only suits actions that are obvious at a glance. If the meaning isn't obvious, add text. Since there's no text, you must add an aria-label for screen readers, and ideally show the name in a Tooltip on hover. It can look exactly like an icon-only Link. The difference is whether clicking goes to a page or performs an action.

Developer info
Term ID
component-icon-button
DOM selectors

The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).

  • .ant-btn-icon-only
  • .el-button.is-circle
  • [class*="MuiIconButton-root"]
  • .arco-btn-icon-only
  • .t-button--shape-square
  • .t-button--shape-circle
  • .btn-close
  • button[aria-label]:not(:has(*:not(svg):not(svg *)))
Priority
2 · when several match at the same level, the higher priority wins
Version
v2 · updated Sep 29, 2026