How to Use the Header Icon Widget

The Header Icon widget lets you place a single, customizable icon directly inside your website header. It is a flexible utility widget that can be used for navigation shortcuts, actions, visual cues, or as a compact alternative to buttons and text links—especially in space-constrained headers.

While the Icon widget works the same way as the standard Icon widget used in page content, this article focuses specifically on using icons inside headers and how to design them effectively for navigation, actions, and UX clarity.

What the Header Icon Widget Is Used For

Use the Header Icon widget when you want to:

Add compact navigation actions to the header
Link to key pages or system flows
Create icon-based CTAs without visual clutter
Supplement menus with quick-access actions
Keep the header minimal while maintaining functionality

Common header use cases include:

Login or account access
Linking to dashboards or member areas
Triggering popups or system pages
Linking to contact pages or support
Visual separators or utility actions
Custom navigation shortcuts

Adding an Icon to the Header

To add an icon to your header:

Open the header editor
Click Add Widget
Select Icon
Place it in the left, center, or right column of the header
Adjust its position by dragging

📌 Note

Icons added to the header are global and will appear on all pages where the header is active.

Icon Settings

Click the icon to open the Icon Settings panel.

Choose Icon

You can select from the available icon library. Icons are vector-based, ensuring they remain sharp at all sizes.

Use icons that are:

Universally recognizable
Clear at small sizes
Consistent with your site’s visual language

Link & Action Settings

The Header Icon widget supports the same powerful linking system as other widgets.

You can link the icon to:

Pages
System pages (e.g. login, registration)
External URLs
Anchor points
Popups
Email or phone links
Files

💡 Tip

Icons work best when they perform a single, clear action. Avoid ambiguous links without visual or contextual cues.

Styling Options

Icon Size

Controls how large the icon appears in the header.

Smaller sizes work best for utility actions
Larger sizes can highlight primary actions

Color

Sets the default icon color.

Active Color

Controls the color when the icon is active or interacted with (hover or selected state).

💡 UX Tip

Use a clear contrast between normal and active states to signal interactivity—especially important for header elements.

The Header Icon widget is commonly used as an alternative to the built-in Header Login / Profile widget when you want more design freedom.

You can link an icon to a custom login page that contains a Member Login / Registration widget.

This approach allows you to:

Fully customize the login and registration experience
Use any icon style, size, or color
Create multiple login entry points for different audiences
Design separate login flows for different member groups

Example:

Icon → links to /login
/login page → contains a customized login/registration widget

Comparison of Header Login Widget vs Header Icon Widget

Built-in Header Login Widget	Header Icon + Custom Page
Simple, automatic behavior	Full design freedom
Auto-switches login/profile	Requires custom logic
Limited styling	Fully customizable
One per header	Multiple icons possible

Choose the built-in widget for simplicity, and the Icon widget for flexibility and advanced flows.

Layout & Positioning Tips

Place icons in the right column for utility actions
Group related icons together (login, cart, search)
Avoid overcrowding—icons need space to remain tappable
Ensure adequate spacing for mobile interaction

📱 Mobile Tip

Icons are especially effective on mobile headers where space is limited, but make sure tap targets are large enough.

Accessibility Considerations

Use clear, familiar icons
Pair icons with tooltips or context where possible
Ensure sufficient color contrast
Avoid relying solely on icons for critical actions without explanation

Best Practices

Use icons for actions, not long navigation paths
Keep icon count limited for clarity
Maintain consistent icon style across the header
Match icon color to your overall header design
Test icon visibility on light and dark backgrounds

Summary

The Header Icon widget allows you to:

Add compact, flexible actions to your header
Link icons to any page, system flow, or popup
Fully control icon size, color, and active state
Create custom login or navigation flows
Keep headers clean while maintaining functionality

Used thoughtfully, the Icon widget is a powerful building block for modern, minimal, and highly usable header designs.