Skip to main content

Icon

A single icon with an optional title. Tabs: Content, Styling, Animations, Advanced.

Icon on the Page Builder canvas
💡 Web dev tip: is your icon decorative or meaningful?

An icon that merely decorates the text beside it should be hidden from screen readers (aria-hidden="true") so it isn't announced twice. An icon that stands alone and means something — a lone phone icon that is a call link — needs an accessible name instead. Decide which, every time. MDN: aria-hidden

Live demo​

▶ See the Icon live on the demos site — an interactive example you can click through.

Content​

Icon options panel — Content tab
OptionNotes
IconPick a font icon from the library
TitleOptional label shown with the icon

Styling​

Icon options panel — Styling tab

Title Color, Icon Color, Background Color, and Margin & Padding.