<?xml version="1.0" encoding="utf-8"?>

Icon button

Icon button

Icon buttons, as their name suggests, consist of only an icon. Because there is no text accompanying the icon, these buttons should only be used for routine actions, such as editing or moving something to the trash. The meaning of symbols needs to be familiar and immediately recognizable to prevent confusing users.[1]

From the accessibility side, icon-only buttons aren't meaningful enough for users of assistive technologies. There are several ways to make such buttons more accessible. For example, you can accompany the icon with text or define the button's name in the <button> element.

Improve your UX & Product skills with interactive courses that actually work