Skip to main content

​
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 blockMust 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 iconAllowed 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 alignmentAllowed 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 colorAllowed values: primary, secondary, primary-inverse, secondary-inverse, success, brand, warning, danger, alert
​
margin
string
default:"none"
required
Margin spacing around the icon blockAllowed 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