Skip to content

icon — Icon ​

A single icon from the shipped icon set, in a palette color.

The icon block, rendered

Renders one icon from the kit's self-contained icon set (no external icon library needed). Size and color (from the palette) are configurable.

When to use ​

Accents next to headings, feature bullets, inline glyphs.

Configuration ​

Configure under content_blocks_kit.blocks.icon (see Configuring blocks for how the levers combine).

Choice fields ​

Selectable values. Restrict or reorder them per host with choices: (the default is shown in bold).

FieldValues
namestar, heart, check, check-circle, info, help, warning, lightbulb, phone, mail, map-pin, calendar, clock, user, settings, thumbs-up, gift, shield, zap, globe, camera, arrow-right, quote
alignstart, center, end

Default data ​

Initial values for a new block. Override per host with defaults:.

FieldDefault
namestar
color''
size48
aligncenter

Example ​

yaml
# config/packages/content_blocks_kit.yaml
content_blocks_kit:
    blocks:
        icon:
            choices: { name: [star, heart] }   # restrict / reorder the picker
            defaults: { name: star }

Front-end ​

Rendered markup: .cb-kit-icon (inline SVG from the shipped IconSet). Style it by overriding the --cb-kit-* custom properties (see the kit stylesheet).

Notes ​

  • color draws from content_blocks.palette. The icon list is large — run content-blocks-kit:blocks icon to see the full set.

The configuration tables above are generated from content-blocks-kit:blocks --format=json, read straight from the block's code — they never go stale.

Released under the MIT License.