Icon

An icon element with optional link, rotation and a proper accessible name.

Topics: Accessibility · Content

Highlights

Solid and outline styles
Rotation and nudge
Works with stroke icon sets like Lucide
Optional link

Decorative icons are hidden, linked icons get a name.

No icon fonts from CDNs.

Live demo

Everything below is the real element, configured in Breakdance. Try it with your keyboard, zoom in, or open the page on your phone.

Variant 1

Lucide icons from the Breakdance icon library. Stroke icons take the color like solid ones. Decorative icons are hidden from screen readers.

Variant 2

Background, radius and padding from the element controls, with a hover color.

Variant 3

Linked icons get an accessible name from the link target. The last one is rotated by 315 degrees with the rotation control.

All modules