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

Quick checkChoose the best answer

A compact toolbar contains an irreversible Permanently delete project action, and new users may not know its icon. How should it be expressed?

Put a consistent icon in the action button and also show the text Permanently deleteKeep only a trash icon and reveal Permanently delete on mouse hoverShow only the trash icon and explain irreversibility in a confirmation dialog after click

You can say this to an AI Agent

Review the project toolbar: familiar actions may use consistent icons, but permanent deletion must also show explicit text and use a real button. Do not rely only on red or a tooltip, and verify keyboard access and the accessible name.

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
⌕↓×Search · Download · Close
Compact toolbars
↶↷⌗⋯
Status cues with text
✓File synced

When NOT to use it

An unfamiliar action with only an icon
◈The icon’s meaning is unclear
Unrelated dangerous actions mixed under More
⋯Delete project is hidden under More
Emoji in place of consistent system icons
⬇📥⇩Three download icons with inconsistent styles

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

Recommended tool

Web fine-tuning tool · Selector Pro

Select page elements for precise AI edits

Click a button, text, or card, note the change, then copy its exact location to AI.

Open Selector Pro website