Icon-Only Button Template

Save space and provide intuitive controls with this set of clean, icon-only buttons.

These buttons are essential for user interfaces that require compact actions, such as settings toggles, item deletions, or editing functions.

Get Source Code Preview

About Icon-Only Buttons

Icon-only buttons are a staple of modern UI design, used when an action's meaning can be conveyed effectively by a symbol alone. They help to de-clutter interfaces and are especially useful in toolbars or next to items in a list. Because they lack visible text, making them accessible is a top priority. This template shows how to create them accessibly for all users.

Features

Accessibility is Key: Each button includes a descriptive aria-label attribute. This provides the "accessible name" of the button, so a screen reader will announce "Settings" or "Delete" even though no text is visible.
Embedded SVG Icons: Uses lightweight, inline SVGs that are easy to style with CSS and require no external files.
Subtle, Clean Style: A minimalist design with a soft background color change on hover, suitable for any interface.
Flexible and Reusable: The CSS is designed so you can easily create new icon buttons by simply adding a new SVG.

Code Breakdown

The buttons are styled to be circular and use Flexbox to perfectly center the icon within. The most important part of the HTML from an accessibility perspective is the aria-label on each button. Without it, the buttons would be confusing or completely unusable for screen reader users. The SVG icons inside are given aria-hidden="true" because their purpose is purely decorative; the accessible name is already provided by the parent button's aria-label.

Code

Here is the complete code for the accessible icon-only buttons.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Icon-Only Buttons</title>
    <style>
        /*
         Component: Icon-Only Buttons
         Description: A set of accessible, compact buttons for common UI actions.
        */

:root {
            --icon-btn-size: 44px; /* A good minimum size for touch targets */
            --icon-btn-bg: transparent;
            --icon-btn-bg-hover: #e9ecef;
            --icon-btn-icon-color: #495057;
            --icon-btn-icon-color-danger: #dc3545;
            --icon-btn-focus-outline: #007bff;
        }

.icon-btn-container-1 {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 1rem;
            padding: 2rem;
            background-color: #f8f9fa;
        }

.icon-btn-1 {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: var(--icon-btn-size);
            height: var(--icon-btn-size);
            
            color: var(--icon-btn-icon-color);
            background-color: var(--icon-btn-bg);
            
            border: none;
            border-radius: 50%;
            cursor: pointer;
            text-decoration: none;
            
            transition: background-color 0.15s ease-in-out;
        }

.icon-btn-1 svg {
            width: 24px;
            height: 24px;
            fill: currentColor;
        }

.icon-btn-1:hover {
            background-color: var(--icon-btn-bg-hover);
        }

/* --- Modifier for a 'danger' action --- */
        .icon-btn-1.danger:hover {
            color: var(--icon-btn-icon-color-danger);
            background-color: rgba(220, 53, 69, 0.1);
        }
        
        .icon-btn-1:focus-visible {
            outline: 2px solid var(--icon-btn-focus-outline);
            outline-offset: 2px;
        }
    </style>
</head>
<body>

<button type="button" class="icon-btn-1 danger" aria-label="Delete item">
            <svg aria-hidden="true" height="24" width="24" viewBox="0 0 24 24"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"></path></svg>
        </button>
    </div>

</body>
</html>

View Output