IconButtons

IconButtons are a type of user interface control that presents an icon as its visible content instead of text. They function as interactive triggers for actions such as navigation, settings, or media control, and are commonly used in toolbars, app bars, and dense UIs where space is limited. An icon button typically behaves like a standard button: it can be clicked or tapped, focused via keyboard, and may provide visual feedback on hover, focus, or activation.

To ensure accessibility, an icon button should have an associated label describing its action, often via aria-label or a visible tooltip. Because the icon conveys the action visually, clear iconography is essential and sufficient contrast with the background is required. Some platforms offer toggle variants that reflect an active state and may remain pressed or highlighted when active. Non-essential text is avoided; in many designs a tooltip explains the action on hover or long-press.

Visual styling varies by framework. Common variants include a plain icon button with no visible background, a filled variant with a colored circular or square background, and an outlined or ghost style with a transparent background. Behavior may include ripple effects or subtle elevation to indicate interaction. Accessibility patterns include disabling the control, or providing alternative controls for users with motion sensitivity.

IconButtons are implemented across modern UI toolkits, such as Flutter’s IconButton widget or web frameworks that render a button element containing an icon element. In practice they are created by combining a button control with an icon glyph, SVG, or font icon; developers may supply size, color, and event handlers, along with a tooltip or aria-label. They are most effective when used sparingly for actions that are universally understood.