Rubric Documentation

Icon Styles

Fields for styling an icon.

  • Enclose Icons [Boolean]
    Add a background, border, and/or padding to the icons.
  • Size [Number]
  • Color [Color]
    Only effects non-custom, SVG icons.
  • Color (Hover) [Color]
    Only effects non-custom, SVG icons.
  • Box Styles [Common Module Fields]

How to Use Icon Styles

The Icon Styles field group gives you comprehensive control over the visual presentation of icons throughout your Rubric theme modules. These settings are particularly valuable when creating educational content, event listings, or feature showcases where icons serve as visual cues to help visitors quickly understand and navigate your content.

When working in the HubSpot page editor, you’ll find these icon styling options integrated into various modules like feature lists, service grids, and informational sections. The Enclose Icons toggle is especially powerful for creating consistency across your educational site—when enabled, it transforms simple icons into professional-looking elements with unified backgrounds and spacing that align with Rubric’s structured design philosophy.

The Size field uses pixel values and automatically maintains proper proportions across desktop and mobile devices. For education institutions, consider using larger icons (40-60px) for main navigation elements and smaller sizes (24-32px) for inline content features. The drag-and-drop editor will show you real-time previews as you adjust these values.

Color settings work exclusively with HubSpot’s built-in SVG icon library, not with custom uploaded icons. This ensures your icons remain crisp at all sizes while maintaining brand consistency. The hover color feature enhances user experience by providing visual feedback—particularly effective for interactive elements like course category buttons or event registration links.

Pro tip: When using the Enclose Icons feature with Box Styles, start by enabling enclosure first, then customize the box styling. This workflow prevents formatting conflicts and ensures your icons integrate seamlessly with Rubric’s content-first layout system. The combination works exceptionally well for creating compelling call-to-action sections and highlighted course features that education sites often require.