Icon Buttons

What is an icon button?

An icon button is a button whose main content is an icon, either on its own (an icon-only button) or paired with a short text label. Icon-only buttons appear in toolbars, card actions, close buttons, media controls and app headers, where space is tight and the symbol is widely understood: a trash can for delete, a heart for favourite, a cross for close. Icon plus text buttons add clarity for less familiar actions such as "Export" or "Share".

When to use icon buttons

• Use icon-only buttons for well-known actions and repeated controls, like edit and delete in every table row.
• Prefer icon plus text when an action is important or the symbol could be misread.
• Keep icon sizes consistent within one toolbar and align them optically with surrounding text.
• Give each button a comfortable hit area of around 44 pixels, even if the icon itself is smaller.

Accessibility for icon-only buttons

An icon alone has no accessible name, so add aria-label="Delete item" to the <button> or include visually hidden text. Mark decorative SVG or font icons with aria-hidden="true" so they are not read twice. A tooltip can help sighted users but should not be the only label. Toggle buttons such as "Mute" or "Favourite" should expose their state with aria-pressed. Make sure the focus ring is visible around the whole button, not just the icon, and that the icon colour meets contrast requirements against its background.

Bootstrap 6, Bootstrap 5, Tailwind and pure CSS

These icon button HTML CSS snippets are available for Bootstrap 6, Bootstrap 5, Tailwind CSS and pure CSS. Most use inline SVG, so they work without an icon font; you can swap in your own icon set by replacing the SVG. Bootstrap 6 versions pick up the theme-* colour roles, while Tailwind versions use utility classes for size and colour. Preview each button live, copy the markup from the code tabs, or download it and drop it into your project.