Icon button

v3.1

Icon buttons help direct and capture user action and intent. They are compact with no visible label.

Considerations

Recognizable

Icons used within icon buttons should be easily recognizable. Avoid ambiguous icons that could mean different things in the same context.

Distinct

Each icon button on a page should be distinct. Avoid using duplicate icon buttons for the same function on a single page, except for common actions like save or overflow.

Compact

Icon buttons are helpful in dense layouts like tables and dashboards. Their smaller footprint allows for more visible actions before collapsing into overflow buttons.

Anatomy

Image of a button’s anatomy. Number 1 is pointing to the icon. Number 2 is pointing to the container.
  1. Icon
  2. Container

Properties

Behavior

Best practices

Specs

Two sets of heart icons. The first set are large, medium, and small icon buttons with 48px pink boxes showing the tap targets. The second set are also large, medium, and small icon buttons. The large has a 48px button with a 24px icon. The medium has a 40px button with a 20px icon. The small has a 32px button with a 16px icon.