Canvas Docs

Styled Icons

Standalone icon with filled, bordered, or plain style, shape variants, color options, and optional link. It is shown in the block inserter as Canvas Styled Icon and registered as canvas-core/styled-icon.

Select the block on a page and its own settings open in the sidebar, in the panels below:

The Styled Icons settings in the block editor sidebar

Settings

Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:

Content

  • IconDefaultbi bi-gem

    The glyph to show. The block renders nothing while this is empty.

  • LinkDefaulta preset list of 3 rows

    Optional link. When set the icon renders as an tag.

Settings

  • Single ElementDefaultOn

    On: one carries both the icon-style classes and the icon class, the Canvas icon contract, so hover, sizing and glyph share one element. Off: a wrapper element with a nested icon. A linked icon always keeps the nested icon.

  • ShapeDefaultSquare

    Corner treatment of the box around the glyph.

    ChoicesSquareRoundedCircleShown when Style is "Filled" or "Bordered" or "Plain"

  • Color VariantDefaultDark

    Which of the theme palette treatments the icon takes. Light suits a dark background, Alt uses your accent colour.

    ChoicesDarkLightAlt (Theme Color)

  • SizeDefaultDefault

    How large the icon and its box are drawn.

    ChoicesSmallMediumDefaultLargeExtra LargeXX Large

  • Tooltip / TitleDefaultEmpty

    Text shown on hover (the title attribute). A tooltip icon carries its whole message here, so an icon with a title is not treated as decorative.

  • Glyph Inline StyleDefaultEmpty

    Styling applied to the glyph itself. A linked icon keeps its glyph in a nested element, so this is the only way to resize or nudge it.

  • StyleDefaultFilled

    Choose None when the design supplies the whole class list itself (a bare glyph sized by a utility class or a custom style), no base class and no shape / colour / size modifiers are added.

    ChoicesFilledBorderedPlainNone (no base class)

Style

  • Custom Background ColorDefaultEmpty

    Background colour of the box behind the glyph, replacing the one the Color Variant sets.

    Shown when Style is "Filled" or "Bordered"

  • Custom Icon ColorDefaultEmpty

    Colour of the glyph, replacing the one the Color Variant sets.

  • Custom Border ColorDefaultEmpty

    Colour of the outline around the icon.

    Shown when Style is "Bordered"

Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.

Other blocks in Canvas: Alerts, Buttons, Code Highlight, Counters, Dividers, Dropcaps.

Was this page helpful?