Icon

A block that displays an icon with optional color and alignment

Basic Example

{
  "type": "icon",
  "name": "sample-name",
  "size": "medium",
  "align": "inline",
  "color": "primary",
  "margin": "none"
}

Live Example

Example Code

[
  {
    "type": "icon",
    "name": "IconHomeLine",
    "size": "medium",
    "align": "inline"
  },
  {
    "type": "icon",
    "name": "IconCheckLine",
    "size": "large",
    "align": "center",
    "color": "success"
  },
  {
    "type": "icon",
    "name": "IconWarningLine",
    "size": "small",
    "align": "start",
    "color": "warning"
  }
]

Properties

type · string · required

Identifies this as an icon block

Must be icon

name · string · required

The name of the icon to display (e.g., ‘IconHomeLine’, ‘IconUserLine’)

size · string · default: "medium" · required

The size of the icon

Allowed values: x-small, small, medium, large

align · string · default: "inline" · required

Alignment of the icon. Use ‘inline’ for inline display with text, or ‘start’/‘center’/‘end’ for block-level alignment

Allowed values: start, end, center, inline

color · string · required

Color of the icon. When specified, the icon will be wrapped in a Text element to apply the color

Allowed values: primary, secondary, primary-inverse, secondary-inverse, success, brand, warning, danger, alert

margin · string · default: "none" · required

Margin spacing around the icon block

Allowed values: none, auto, xxx-small, xx-small, x-small, small, medium, large, x-large, xx-large

Usage Notes

• This element is part of the BlockKit system for building dynamic user interfaces
• All properties marked as (required) must be included in your JSON structure
• Optional properties can be omitted and will use their default values when applicable