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
General
Show advanced settings
Reveals visibility settings
Checkbox (default: false)
Content
Icon
Select the icon to display
Icon picker with 60+ options
Spacing
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
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
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
Horizontal alignment
Controls horizontal alignment
• Left (default) • Center • Right
Display
Visibility
Controls when the block is visible
• All (default) • Mobile only • Desktop only
Visible when Show advanced settings is on
Last updated
Was this helpful?