Skip to content

Icon

The Icon widget shows a single icon from the icon libraries enabled in the theme. Use it to decorate a heading, mark a status, or point at something, for example a warning triangle next to an overdue amount.

See also Image and Badge.

Using it

Drop an Icon onto the page and pick an icon in the Icon field, for example lucide:star. Once an icon is chosen, the brush button next to the picker opens Icon Style, where you can change its colour, size and rotation. Leave a style field empty to keep the theme's value.

Options

Option Values Default Description
Icon An icon key, e.g. lucide:star None Which icon to show, from the libraries enabled in the theme
Icon Style Icon variant, colour, size, rotation, flip, stroke width, opacity From theme The brush button beside the icon picker. Changes apply to this icon only. Empty values come from the icon library and the theme
Box Style Sizing and spacing None The box around the icon

Good to know

Two limits worth knowing before you style an icon.

  • Icon Style appears only after an icon is picked. Colour has no effect on flag icons, and stroke width only works for libraries that draw with strokes.
  • This widget is a bare icon with nothing around it. For an icon with a label, use a Badge or a Button. Both have an icon setting of their own.