AllDesignWidgetsIcon Widget

Icon Widget

Add standalone icons with optional links and hover effects.

Use the Icon widget for visual accents, feature lists, or social links.

Add an Icon widget

1

Open the widget picker

In the page editor, open Widgets.

2

Drag Icon

In Common, drag Icon (icon icon) onto the page.

3

Open Icon Settings

Click the widget and choose Icon Settings.

Icon Settings

  • Select Icon: click the picker to choose an icon.
  • Icon Color
  • Icon Size
  • Alignment
  • Circle Background: toggle on, then set Padding and Circle Color.
  • Link Address: connect the icon to a page, popup, file, or external URL.
  • Hover Color and Transition (Fade, Scale, Bump, Rotate, Skew) appear after you add a link.

Toolbar actions

  • Icon Settings
  • Alignment
  • Animation
  • Position
  • Copy
  • Delete
  • Linked icons receive clearer accessible names based on the selected icon when possible.
  • The settings panel warns when an icon link is missing, uses a placeholder, or uses an unsafe URL.
  • Use specific destination links for icons that act as buttons or profile shortcuts.
  • Imported and assistant-generated pages repair common icon-name variations and use a neutral fallback when an unsupported icon slips through, so one invalid icon does not block the whole page edit. Review fallback icons before publishing.
Updated Aug 4, 2026

Was this helpful?