Icon Section widget
The Icon Section widget lets you combine an icon with a title and optional description in a single, structured block.
It’s ideal for feature lists, benefits, steps, highlights, and explanatory sections where icons and text work together.
Compared to the Icon widget (which displays a single standalone icon), the Icon Section widget adds context and structure, making it perfect for repeated patterns and content-heavy layouts.
What the Icon Section Widget Is Used For
The Icon Section widget is ideal when you want to:
- Combine an icon with text content
- Present features, benefits, or services clearly
- Create step-by-step sections or explanations
- Add visual structure to long pages
- Build consistent icon + text layouts across a page
Common examples:
- Feature or benefit sections
- “How it works” steps
- Service overviews
- Value propositions
- Info blocks with icons and descriptions
Icon Symbol
Under Edit Icon, you can choose which icon symbol to display.
This allows you to:
- Select the exact icon that fits your message
- Switch between different symbols (arrows, actions, indicators, etc.)
- Change the meaning of the section without changing layout or text
Common uses:
- Checkmarks for benefits
- Arrows for steps or progression
- Action icons (send, play, download)
- Informational or decorative symbols
💡 Tip
Choose icons that clearly communicate intent. A clear symbol reduces the need for extra explanatory text.
Icon Section Layout Options
At the top of the Styling settings, you can choose between different layout styles, which control how the icon, title, and description are positioned relative to each other.
Available layout options include:
Icon inline with title (left-aligned)
The icon is positioned next to the title, with the text stacked below.
Ideal for lists, structured content, or sections where alignment and readability are important.
Icon above text
The icon is placed above the title and description, creating a clear vertical hierarchy.
Best for feature grids, highlights, or when you want the icon to be the primary visual focus.
Icon to the left of content
The icon sits to the left of both the title and description, creating a horizontal layout.
Works well for detailed explanations, benefits lists, or when icons should support text rather than dominate it.
💡 Tip
Choose a layout that matches your content density. Horizontal layouts often work best for feature lists, while vertical layouts are ideal for steps or highlights.
Show Icon Description
This toggle controls whether the text description below the title is visible.
- On – Shows both title and description
- Off – Shows only the title (more compact layout)
Use cases:
- Turn off descriptions for compact feature grids
- Turn on descriptions for explanatory or educational sections
Icon Color
Controls the color of the icon.
You can:
- Use one of your Global Colors
- Select a custom color
- Adjust opacity if needed
Best practices:
- Prefer Global Colors for consistency
- Ensure enough contrast between icon and background
- Use accent colors intentionally to guide attention
Background Color
Adds a background color behind the icon container.
Common use cases:
- Highlight important sections
- Create card-like layouts
- Separate icon sections from the page background
💡 Tip
Use background colors sparingly and keep contrast high for accessibility.
Padding Size
Padding controls the space inside the icon container.
- Smaller padding → compact, minimal look
- Larger padding → more spacious, card-like appearance
Best practice:
- Keep padding consistent across similar icon sections
- Avoid overly tight padding that makes content feel cramped
Shadow
The Icon Section widget allows you to add a shadow to the entire icon block, helping create depth and visual separation from the background.
Available shadow types:
No shadow
No shadow is applied.
Best for clean, minimal designs or when the icon section already sits inside a container or section with visual separation.
Outer shadow
Adds a shadow outside the icon section.
Useful for:
- Card-style layouts
- Highlighting icon sections against light backgrounds
Creating a subtle “floating” effect
Inner shadow
Adds a shadow inside the icon section.
Best for:
- Inset or pressed effects
- Subtle depth without lifting the element from the page
- More UI-style or contained designs
💡 Design tips
- Use shadows sparingly — they should support hierarchy, not distract from content.
- Outer shadows work best when combined with background color and padding.
- Inner shadows are more subtle and should be used with care to avoid reducing readability.
- Keep shadow styles consistent across similar sections for a cohesive design.
When in doubt, start with No shadow, then add an Outer shadow only if you need clearer visual separation.
Subtle shadows usually look more professional than heavy ones
Design & UX Tips
- Icons should support clarity, not replace it
- Always include text when meaning might be unclear
- Keep icon size, color, and spacing consistent
- Use Icon Sections for repeated patterns instead of mixing widgets
- Combine with Heading widgets for clear page structure
When Not to Use the Icon Section Widget
You may want to avoid Icon Sections if:
- You only need a single decorative icon → use the Icon widget
- A button or text link would be clearer
- The content requires complex layouts or tables
Summary
- The Icon Section widget combines icons, titles, and descriptions in one block
- Ideal for features, benefits, steps, and structured content
- Supports layout selection, icon styling, background, padding, and shadows
- Can be fully clickable using Add Link
- Best for repeated, consistent icon + text patterns
- Enhances clarity, structure, and visual hierarchy when used thoughtfully
Used correctly, the Icon Section widget helps you communicate more clearly, guide users visually, and build clean, structured pages that scale well as your content grows.