Icon

Overview

A customizable icon block component that renders a single icon with configurable styling options. Supports various icon choices from a predefined set, with controls for size, color, alignment, and responsive visibility.

Common use cases

• Display visual icons to enhance content meaning

• Create icon-based navigation or call-to-action elements

• Use icons with color schemes to match your brand

• Add decorative or functional icons throughout your sections

Block settings

Content

Setting	Description	Options
Icon	Select the icon to display	Icon picker with 60+ options

Spacing

Setting	Description	Options
Enable horizontal padding	Adds horizontal padding around the icon	Checkbox (default: false)
Enable top padding	Adds top padding around the icon	Checkbox (default: false)
Enable bottom padding	Adds bottom padding around the icon	Checkbox (default: false)
Enable internal padding	Adds internal padding inside the icon container	Checkbox (default: false)

Color

Setting	Description	Options
Color scheme	Controls the background color scheme	• Body • Neutral • Accent 1 • Accent 2 • Accent 3 • Shade 1 • Shade 2 • Shade 3 • Primary • Secondary • Tertiary • Blur • Transparent (default)
Text color	Controls the icon color	• Default (default) • Alternative • Primary background • Primary foreground • Secondary background • Secondary foreground • Tertiary background • Tertiary foreground • Neutral background • Neutral foreground • Shade

Style

Setting	Description	Options
Icon style	Controls the icon visual style	• Default (default) • Solid • Outline
Icon size	Controls the size of the icon	10 - 100 (default: 24)
Radius	Controls the border radius	• None • Default • Sm • Md • Lg • Xl • 2xl • Full

Layout

Setting	Description	Options
Horizontal alignment	Controls horizontal alignment	• Left (default) • Center • Right

Display

Setting	Description	Options
Visibility	Controls when the block is visible	• All (default) • Mobile only • Desktop only