Icon Element

The Icon element provides a extensive library of vector-based icons that can be scaled and colored to suit your brand's style.

Live Preview

Preview icons with different sizes, colors, and backgrounds below.

Icon Preview

Specifications

The Icon element offers high flexibility for visual cues and branding:

  • Icon Library: Supports a wide range of icon names from React Icons (e.g., Lucide, FontAwesome).
  • Sizing: Choose from SM, MD, LG, and XL presets.
  • Coloring: Apply any custom hex or theme color directly to the icon.
  • Custom SVG: Advanced users can inject an entire Raw SVG string for unique brand assets.
  • Styling: Wrap icons in custom backgrounds, add rounded containers, and apply transition effects.

Interactions

Icons in SoloPage can be linked to Interactions (clicks, hovers) that trigger actions like opening a dialog, scrolling to a section, or navigating to a different page.

AI Guidance

How to prompt for Icons:

  • Add a large blue rocket icon from Lucide.
  • Create a red heart icon that scales up when hovered.
  • Insert a GitHub icon with a circular background and soft borders.