Canvas Docs

Icon Browser

Searchable reference grid of every icon in the enabled icon packs. It is shown in the block inserter as Canvas Icon Browser and registered as canvas-core/icon-browser.

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

The Icon Browser 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:

Packs

  • PacksDefaultEmpty

    Comma-separated pack keys. Empty lists every enabled pack.

  • Heading per PackDefaultOff

    Print the pack name above each grid.

  • Explicit Icon ListDefaultEmpty

    One icon per line as "class" or "class|Label". When set, this replaces the packs above, for an icon font that is not a registered pack.

Settings

  • LayoutDefaultSearchable List

    Showcase Grid emits a Bootstrap row of cells, each with the glyph, its name and an optional magnified thumbnail.

    ChoicesSearchable ListShowcase Grid

  • Grid Cell ClassesDefaultEmpty

    Classes on each grid cell: this is where the column widths go.

    Shown when Layout is "Showcase Grid"

  • Glyph ClassesDefaultEmpty

    Extra classes added to every glyph element (e.g. a display-size utility).

    Shown when Layout is "Showcase Grid"

  • Thumbnail ClassesDefaultEmpty

    When set, each cell also gets a magnified thumbnail of the icon carrying these classes. Leave empty for no thumbnail.

    Shown when Layout is "Showcase Grid"

Filter

  • Show Search FieldDefaultOn

    Puts a search box above the icons so a visitor can narrow a long set down as they type.

  • Search PlaceholderDefaultSearch Icons

    Prompt shown inside the empty search box.

    Shown when Show Search Field is on

  • Search Field LabelDefaultSearch Icons

    Read by screen readers; the field itself shows only the placeholder.

    Shown when Show Search Field is on

  • Search Field ClassesDefaultw-50 mx-auto

    Classes on the search box, which decide how wide it is and where it sits above the icons.

    Shown when Show Search Field is on

  • No Results MessageDefaultNo icons match your search.

    Shown in place of the icons when a search matches none of them.

    Shown when Show Search Field is on

Grid

  • Grid ClassesDefaultmt-5

    Extra classes on the icon .

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

Other blocks in Content: Background Video / Audio, Cascading Images, Charts, Circle Stack, Clients, Data Tables.

Was this page helpful?