Icon

You might say

Add a small icon to the button so people can tell what it does without reading.

A small, consistent visual symbol for an action, object, or statusFamiliar icons such as search, download, and close help people scan quickly. For an unfamiliar or high-risk action, add text or a Tooltip.

⌕Search↓Download⚙Settings

Icon≠Image

icon is a small reusable symbol for a function or concept. Image displays a photo, illustration, or content itself.

Icon≠Button

icon communicates meaning. It becomes an icon button only when placed in a Button that runs an action.

When to use it

Common tool actions
Compact toolbars
Status cues with text

When NOT to use it

An unfamiliar action with only an icon
Unrelated dangerous actions mixed under More
Emoji in place of consistent system icons

Anatomy

⌕Search

Keep the shape clear at small sizes

Add words for unfamiliar or important actions

Variants

Standalone

⌕

For decoration or a status cue only

Icon button

For a common action

With label

↓ Download

For new users or important, irreversible actions

Typical use cases

Toolbar

Labeled button

↓Download report

Status cue

✓Synced