Three Column - Icons
A three column section of Icons with Text modules.
View a live demo of this section.
How to Use This Section
The Three Column - Icons section provides a clean, symmetrical layout that’s perfect for highlighting key features, services, or benefits on your marketing pages. This pre-built section combines three Icons with Text modules in a responsive grid that automatically adapts to different screen sizes.
You’ll find this section most effective on your homepage to showcase core value propositions, on service pages to outline key offerings, or on landing pages where you need to quickly communicate multiple benefits. The icon-driven design makes complex information digestible at a glance, improving user engagement and conversion potential.
Adding and Customizing the Section
To add this section to any page, open the HubSpot page editor and click the ”+” button where you want to insert content. Navigate to the “Sections” tab and select “Three Column - Icons” from the Spark theme options. The section will appear with placeholder content that you can immediately customize.
Each column contains an Icons with Text module that you can edit independently. Click on any column to modify the icon (choose from HubSpot’s icon library or upload custom SVGs), headline text, and description copy. You can also adjust the icon size and color through the module settings to match your brand guidelines.
Design Best Practices
For optimal visual impact, keep your headlines concise—ideally 2-4 words per column. Your description text should be roughly equal length across all three columns to maintain visual balance. Consider using icons that share a similar visual style rather than mixing different icon families.
The section works particularly well when placed after a hero section or before a call-to-action block, creating a natural information hierarchy that guides visitors through your page content.