ShareYourGroupShareYourGroupSVG Icon Finder

Accessible SVG icons

An icon that means something needs a name. An icon that only decorates should stay quiet.

Decorative icons

If the icon sits next to text that already says the same thing (a home icon beside the word Home), a screen reader should skip it. The generator writes aria-hidden="true" on the svg when you give no title. This hides the picture from assistive technology.

Icons that carry meaning

An icon on its own, such as a button with only a trash can, needs a name. Type a title in the generator and it writes role="img", an aria-label and a <title> element with that text. Better still, give the button itself a text label, or an aria-label on the button, and keep the icon hidden.

  1. A button that has only an icon needs an accessible name: <button aria-label="Delete"> with a hidden icon inside.
  2. Make the target large enough to touch: the icon is 24 pixels, so add padding so the whole button is at least 44 pixels.
  3. Do not use colour alone to show meaning: pair a red icon with text or a different shape.

Check

Use the keyboard to reach your buttons and listen with a screen reader, or read the accessibility tree in the browser's developer tools.

Is the title element enough?

Not always: tooltips and screen readers treat it differently. An aria-label on the svg or the button is more reliable, and the generator writes both.

Should every icon have alt text?

No. Decorative icons should have none.

Sources

  • Own guidance; the markup written by the generator was read back with an XML parser in the tests

This is an independent site. It is not connected with the Lucide project or any company named here. The icons are from the Lucide project (version 1.72.0 of the lucide-static package), used under its licence, which is shown on the licence page. Facts were read on 14 November 2026.