Icons with Text
Simple boxes of content with icon, text, and call to actions
View a live demo of this module.
Content
- Add a FontAwesome icon or custom image
- Make entire content clickable to a link (do not add more than one CTA or a CTA with differing URL as they will not work)
- Add a CTA
- Set how many columns to have in a row
- Edit padding between rows
- Edit padding between columns
- Change max icon height
- Choose icon alignment (top, top center, right, left)
Styles
- Set Dark Mode
- Box In the columns (add background and border)
- Split lists into two columns
- Change text alignment
- Edit module spacing
Note: Edit these global styles from your Theme Settings under the Components > Icon with Text section.
- Change icon color
- Set Dark Mode icon color
How to Use This Module
The Icons with Text module is perfect for creating feature showcases, service highlights, or benefit lists on your HubSpot pages. This versatile module works exceptionally well on homepage sections, service pages, and landing pages where you need to communicate multiple value propositions in a scannable format.
When adding this module through the HubSpot page editor’s drag-and-drop interface, consider your content hierarchy first. The module shines when presenting 3-6 related items, as this creates visual balance without overwhelming visitors. For homepage hero sections, try using 3-4 columns to highlight your core services. On deeper pages like about or services sections, you can expand to more items while maintaining readability.
Layout Strategy: The column configuration directly impacts user experience on different devices. Three columns work well for desktop viewing, while the module automatically stacks on mobile devices. Test your icon and text length combinations to ensure consistent heights across all columns – mismatched content can create awkward spacing gaps.
Icon Selection Tips: When choosing between FontAwesome icons and custom images, consider your brand consistency. FontAwesome icons maintain crisp scaling across all screen sizes, while custom images give you more brand control but require careful optimization. If uploading custom icons, use SVG format when possible for the sharpest results.
The global theme settings approach means style changes apply across all instances of this module on your site, ensuring design consistency. However, remember that content-specific settings like the number of columns and individual CTAs are configured at the module level within each page editor instance. This hybrid approach gives you design consistency with content flexibility – perfect for maintaining brand standards while allowing page-specific customization.