Icon widget

The Icon widget lets you add a single, standalone icon to your page.

Icons are small but powerful visual elements that can be used to guide attention, support actions, and improve clarity without adding extra text.

The Icon widget is commonly used for navigation cues, call-to-actions, visual accents, or clickable symbols such as arrows, social icons, or indicators.

What the Icon Widget Is Used For

The Icon widget is ideal when you want to:

• Add a visual cue without text
• Highlight an action (for example “click here”)
• Create clickable icons (links, buttons, navigation)
• Support content visually without adding clutter
• Add subtle UI elements that improve usability

Examples include:

• Arrow icons linking to another section
• Icons linking to pages, funnels, or external tools
• Decorative icons next to headings or sections
• Minimal call-to-action elements

Icon Widget Settings

When you select the Icon widget and open Settings, you’ll see the following options.

Icon Symbol

Under Icon Settings, you can choose which icon symbol to display, simply click on the icon symbol to pick and choose another icon symbol.

This allows you to:

• Select the exact icon that fits your purpose
• Switch between different symbols (for example arrows, actions, or indicators)
• Adjust the visual meaning of the icon without changing layout or styling

Common uses

• Arrows for navigation or scroll cues
• Action icons (play, send, open, download)
• Visual indicators or decorative symbols

Size

Size controls how large the icon appears, measured in pixels (px).

• Use smaller sizes for subtle accents or inline icons
• Use larger sizes for call-to-action icons or focal elements

Best practices

• Keep icon sizes consistent across similar use cases
• Avoid extremely large icons unless they serve a clear purpose
• Check how the icon looks on mobile as well as desktop

Icon Color

Icon Color lets you choose the color of the icon.

You can:

• Select a custom color
• Use one of your Global Colors
• Adjust opacity if needed

Best practices

• Prefer Global Colors to keep your design consistent
• Ensure sufficient contrast between the icon and its background
• Use accent colors intentionally to draw attention

Icons are often more effective when they visually match your brand colors or call-to-action color scheme.

Open on Click (Add Link)

The Open on Click option allows you to make the icon clickable. This turns the icon into an interactive element instead of just a visual one.

Add link

When you click Add Link, you can choose from multiple link types, such as:

• Page

  Link to any internal page on your website.

• Store

  Link directly to store pages, products, or categories.

• Funnel

  Link to specific steps inside a funnel.

  You can also link to anchor points within a funnel step, making it possible to navigate to specific sections inside a funnel page.

  Anchor points can be added in the Block settings for each block in the Funnel

• External link

  Link to any external URL (for example another website or tool).

  If you use an external link to link to pages on your own website (for example Circles or Circle pages), do not include the full domain name. Always use a relative path instead.

  Example:

  Use /circles     or /circles/community-name    

  Not https://yourdomain.com/circles    

  Using relative paths:

  • Ensures correct navigation if the system structure changes
  • Ensures correct navigation when switching or updating a custom domain
  • Improves compatibility across environments (preview, staging, live)
  • Keeps links cleaner and easier to maintain

• Anchor point

  Link to a specific section on the same page or another page using anchor points.

  For funnel pages, anchor links are handled via Funnel links, not regular page anchors.

  Anchor points can be added in the Block settings for each block

• File

  Link to uploaded files such as PDFs, documents, or downloads.

• Popup

  Open a popup instead of navigating away from the page.

• Video popup

  Open a video in a popup/modal view.

• Email

  Create a mailto link that opens the visitor’s email client.

• Phone

  Create a click-to-call link, especially useful on mobile devices.

Link options

When creating a link, you can also control:

• Open in
• Same tab
• New tab

• Make “nofollow” link

  Useful for SEO when linking to external or sponsored content.

  Common use cases:

  • Call-to-action links
  • Navigation within long pages
  • Linking to downloads or resources
  • Opening popups or videos without leaving the page
  • Email and phone contact links

Common use cases

• Arrow icon linking to the next section
• Icon linking to a contact page or booking flow
• Social or external tool links
• Clickable navigation icons
• Minimal CTA icons without buttons

How Icons Are Commonly Used

Navigation & Direction

• Arrows pointing to the next section
• Icons linking to other pages or steps
• Visual cues that guide scrolling or flow

Call-to-Action (CTA)

• Clickable icons that trigger a popup or video
• Icons linking to funnels, forms, or offers
• Minimal alternatives to buttons

Visual Support

• Decorative icons next to headings
• Icons used as section markers
• UI-style indicators that add clarity

Design & UX Tips

• Icons should support content, not replace clarity
• Avoid using icons without a clear purpose
• Don’t rely on icons alone for critical information
• Combine icons with text when clarity is important
• Keep spacing around icons clean and intentional

When Not to Use the Icon Widget

You may want to avoid standalone icons if:

• The action is unclear without text
• Accessibility requires visible labels
• A button or text link would be clearer
• You need complex layout or repeated icon structures

In those cases, a Button, Text widget, or Icon Section widget may be more appropriate.

Summary

• The Icon widget adds a single visual icon to your page
• You can control size, color, and click behavior
• Icons can be decorative or interactive
• Use Global Colors for consistency
• Make icons clickable to create lightweight CTAs
• Always prioritize clarity and usability

Used thoughtfully, icons enhance navigation, highlight actions, and add polish to your pages without overwhelming your layout.