Icon

• Icon Type [Choice]Choices: None, FontAwesome, Image
• Icon _[Icon]
  _If Icon Type is FontAwesome, select a FontAwesome icon
• Color _[Color]
  _If Icon Type is FontAwesome, select a color for the icon
• Size _[Number]
  _If Icon Type is FontAwesome, set the size of the icon
• Icon _[Image]
  _If Icon Type is Image, upload or browse for an image

---

How to Use Icon Field Groups

The Icon field group in the Rubric theme provides flexible icon display options across multiple modules, helping you maintain visual consistency while accommodating different content needs. This shared field group appears in various modules throughout your HubSpot pages, from feature lists to service sections.

When working with FontAwesome icons, you’ll have access to thousands of scalable vector icons that maintain crisp quality at any size. The color picker integrates with your theme’s color palette, ensuring brand consistency across your educational or event site. Size values are measured in pixels, with typical ranges from 16px for small inline icons to 64px or larger for prominent display elements.

The image upload option gives you complete creative control when FontAwesome’s library doesn’t meet your specific needs. This works particularly well for custom branded icons, logos, or specialized symbols relevant to your institution or industry. When uploading custom icons, use SVG format when possible for the sharpest results, or high-resolution PNG files with transparent backgrounds.

In the HubSpot page editor, you can easily switch between icon types using the dropdown selector, and the relevant fields will dynamically appear based on your choice. This makes it simple to test different visual approaches without recreating entire modules.

Best practices include maintaining consistent sizing within the same page section, choosing colors that provide adequate contrast against your backgrounds, and selecting icons that clearly communicate their intended meaning to your audience. The “None” option lets you temporarily hide icons while preserving other module content, which is useful during content development phases or when testing different layouts in your drag-and-drop editor.