Accessible Icon Buttons: Labels, Targets and States That Work

Name the action before choosing the drawing

Write the action in ordinary language first: Download invoice, Add to favorites, or Delete draft. Then choose artwork that supports that wording. A downward arrow can mean download, expand, move down or sort descending; the component context must resolve the difference. Keep a visible label when the action is unfamiliar, consequential or difficult to distinguish from a neighboring control.

W3C's guidance on functional images says their text alternatives should communicate purpose, not merely appearance. Apply that distinction to the containing control. A screen reader should receive Download invoice, not Arrow pointing down. If a visible label already names the action, avoid giving its decorative icon a second, repetitive announcement. Test the resulting name in the rendered interface rather than assuming an export filename provides it.

Separate the icon size from the interaction target

A compact symbol can sit inside a generously padded button. For example, start a toolbar experiment with a 20-pixel drawing inside a 40-pixel button, then adjust the spacing in the actual layout. Those are sample component dimensions, not a universal prescription. The important relationship is that the visual artwork and the region people activate are separate design decisions.

WCAG 2.2's minimum target-size criterion specifies a 24-by-24 CSS-pixel minimum with defined exceptions, including sufficient spacing. Do not turn that minimum into a reason to crowd every control. Inspect the complete row on a narrow screen, with longer translated labels and at browser zoom. Leave room for a visible focus treatment without clipping it inside an overflow container.

Keep toggles different from one-time actions

Download starts an operation. Favorite changes a persistent selection. Delete removes something. Giving all three the same hover treatment does not make their behavior equivalent. Document the expected idle, focused, working, success and failure states for each action. A filled favorite symbol may reinforce selection, but the application also needs to expose that state programmatically.

The W3C button pattern documents accessible names, keyboard activation and toggle-button state. Use the native button element when implementing a button, and reserve links for navigation. For a toggle with a stable label, communicate pressed state; if the label changes to describe the next action, design that behavior deliberately. Keep the downloadable file's name separate from the control's state so a temporary spinner does not erase its purpose.

Choose artwork that survives real component states

Compare a small sample from Charm, Lucide or Heroicons beside the actual toolbar text. Check a simple arrow and a denser symbol, not just the most attractive icon in the family. In a selected state, make sure a filled variant does not look accidentally larger than its neighbors.

Review the icon on the actual default, hover and selected backgrounds. A tooltip can add a reminder, but it should not be the only route to essential instructions. Try the toolbar without a pointer and with the image visually obscured. These checks reveal whether the interaction depends too heavily on a tiny drawing, a hover-only explanation or a subtle change in paint.

Run a short release check

Give someone a realistic task: download a named invoice, favorite it, then remove a disposable draft. Observe hesitation before explaining any symbols. Record whether the difficulty comes from the metaphor, label, target, focus treatment or feedback. Fix the component rule, not just the single screenshot. Keep a tested example in the design system so future toolbar additions inherit the same behavior.

• Every control has a clear action name and an appropriate element.
• Keyboard focus remains visible throughout the complete interaction.
• The target includes padding, not only the visible SVG outline.
• Selection and failure are understandable without a color change alone.
• Working states prevent accidental repeats while preserving useful context.