Icon

Type: "icon". Render one icon from the Lucide library. Plain, framed, or with a colored background.

Props

Field	Type	Required	Default	Notes
icon	string (Lucide name, max 50)	✓	"Star"	PascalCase name, e.g. "Heart", "Check", "Zap"
view	'default'|'stacked'|'framed'	✓	"default"	Display mode
shape	'square'|'rounded'|'circle'	✓	"circle"	Frame shape (view ≠ default)
alignment	'left'|'center'|'right'	✓	"center"	Position
link	string (URL)	✓	""	If filled, icon becomes a link
linkTarget	'_self'|'_blank'	✓	"_self"	Link target
primaryColor	string (hex/CSS, max 50)	✓	""	Icon color (empty = follow theme)
secondaryColor	string (hex/CSS, max 50)	✓	""	Background color (stacked/framed)
size	number (6-300)	✓	48	Icon size in px
rotate	number (-360 to 360)	✓	0	Rotation degrees
borderWidth	number (0-20)	✓	2	Border width (view = framed)
borderRadius	number (0-200)	✓	0	Border radius when shape="rounded"
padding	number (0-100)	✓	16	Inner padding (view ≠ default)

View modes

• default: plain icon (no background, no border). Use primaryColor + size.
• stacked: icon with colored background (secondaryColor) in shape. Great for feature cards.
• framed: icon with outline border. Uses borderWidth, optional secondaryColor for fill.

Example: plain icon

{
  "id": "ic001abcd",
  "type": "icon",
  "props": {
    "icon": "Heart",
    "view": "default",
    "shape": "circle",
    "alignment": "center",
    "link": "",
    "linkTarget": "_self",
    "primaryColor": "#dc2626",
    "secondaryColor": "",
    "size": 64,
    "rotate": 0,
    "borderWidth": 2,
    "borderRadius": 0,
    "padding": 16
  }
}

Example: stacked icon (feature-card style)

{
  "id": "ic002efgh",
  "type": "icon",
  "props": {
    "icon": "Zap",
    "view": "stacked",
    "shape": "circle",
    "alignment": "center",
    "link": "",
    "linkTarget": "_self",
    "primaryColor": "#ffffff",
    "secondaryColor": "#3b82f6",
    "size": 32,
    "rotate": 0,
    "borderWidth": 2,
    "borderRadius": 0,
    "padding": 16
  }
}

Example: social media link icon

{
  "id": "ic003ijkl",
  "type": "icon",
  "props": {
    "icon": "Instagram",
    "view": "default",
    "shape": "circle",
    "alignment": "left",
    "link": "https://instagram.com/yourhandle",
    "linkTarget": "_blank",
    "primaryColor": "#e4405f",
    "secondaryColor": "",
    "size": 24,
    "rotate": 0,
    "borderWidth": 2,
    "borderRadius": 0,
    "padding": 16
  }
}

Tips

• Icon name MUST be exact PascalCase from lucide.dev/icons (e.g. ArrowRight, not arrow-right)
• For theme consistency, leave primaryColor empty — icon follows site theme color
• For a social media row, place multiple icon elements inside a block with flex-direction: row
• All icon fields are required, so hand-crafted JSON must include all 13 props even if defaults