How to Insert and Edit Icons in Hubspot Rich Text Modules

Designing polished website and landing page content in Hubspot often requires clean, scalable icons that match your brand. This guide explains how to insert, format, and manage icons in rich text modules so your pages look consistent and professional.

Icons added with the icon tool are vector-based and responsive, making them ideal for calls-to-action, lists, and feature highlights across your Hubspot content.

Understanding the Hubspot Icon Tool

The rich text editor in Hubspot includes a dedicated icon tool that lets you quickly search, insert, and customize icons without uploading separate image files.

When you insert an icon in a rich text module, it behaves similarly to text in the content flow, which means you can:

• Align it with surrounding text or elements
• Resize it to fit headings or body copy
• Change its color to match your global styles
• Link it to another page, file, or anchor

This flexibility helps keep your design lightweight and consistent across all Hubspot website and landing pages.

Where You Can Use Icons in Hubspot

You can add icons in most places where a standard rich text module is available. Common use cases in Hubspot include:

• Website pages (headers, feature sections, footers)
• Landing pages and opt-in sections
• Blog post bodies or post templates
• Email templates that support the rich text editor

Always work in the content editor or page editor where you can access the toolbar that contains the icon button.

Step-by-Step: Insert an Icon in a Hubspot Rich Text Module

Follow these steps to add an icon to your content using the Hubspot rich text editor.

1. Open the Content in the Hubspot Editor

1. In your Hubspot account, navigate to Marketing > Website or Landing Pages (or to the specific content type you’re editing).
2. Hover over the page or post you want to edit.
3. Click Edit to open the content editor.

Locate the rich text module where you want the icon to appear.

2. Place the Cursor in Your Rich Text Module

1. Click inside the rich text module.
2. Position your text cursor exactly where the icon should be inserted, such as before a heading, inside a list item, or next to a call-to-action link.

The placement of your cursor in Hubspot determines where the icon will be added in the text flow.

3. Insert an Icon with the Toolbar

1. In the rich text toolbar, look for the Icon button (usually represented by a small symbol).
2. Click the Icon button to open the icon selector panel.

From here, you can browse or search available icons that Hubspot provides.

Selecting and Customizing Icons in Hubspot

Once the icon selector is open, you can choose the most suitable option for your layout and message.

4. Search and Choose an Icon

1. Use the search field in the icon selector to find icons by keyword (for example, “arrow”, “check”, or “star”).
2. Preview the available icons in the grid.
3. Click your preferred icon to select it.
4. Confirm your choice to insert the icon into the rich text module.

The icon will now appear inline with your text in Hubspot, ready to be styled.

5. Resize the Icon

To adjust the size of the icon:

1. Select the icon within the rich text module by clicking it.
2. Use the size controls in the floating toolbar or side panel (depending on your editor version).
3. Choose a preset size or enter a custom size value if supported.

Be sure to keep sizing consistent across your Hubspot pages for a professional look.

6. Change Icon Color to Match Your Brand

To edit the color of an icon:

1. Click the icon to select it.
2. In the toolbar or inspector, open the Color options.
3. Choose a theme color, enter a hex code, or pick a custom color from the palette.

Using brand colors for icons helps maintain visual consistency across your Hubspot website and campaigns.

7. Align Icons with Text or Other Elements

To control alignment:

1. Select the icon.
2. Use the alignment buttons (left, center, right) in the rich text toolbar.
3. Check how the icon aligns with surrounding text or columns in your layout.

Adjust spacing around the icon using standard formatting tools like line breaks or non-breaking spaces where necessary.

Linking Icons Inside Hubspot Content

Icons are especially useful as visual links in Hubspot, for example, arrows that point to forms or checkmarks that open feature pages.

8. Add a Link to an Icon

1. Click the icon inside the rich text module to select it.
2. Click the Link button in the toolbar.
3. Choose the link type (URL, page, file, email address, or anchor link) supported by Hubspot.
4. Enter or select the destination.
5. Confirm to apply the link.

The icon now acts as a clickable element, just like linked text.

9. Edit or Remove an Icon Link

To update or remove a link from an icon in Hubspot:

1. Select the icon.
2. Click the Edit link option to change the URL or settings, or choose Remove link to strip the hyperlink.

This allows you to reuse the same icon design without rebuilding it from scratch.

Editing or Replacing Existing Icons in Hubspot

Sometimes you need to adjust an icon after content is published. You can easily modify icons within the editor.

10. Change an Icon’s Style or Type

1. Open the page or post in the Hubspot editor.
2. Locate the rich text module containing the existing icon.
3. Click the icon to select it.
4. Use the toolbar to change size, color, or alignment.
5. If available, use the icon picker to switch to a different icon while keeping the same position.

Always preview your page after editing icons to confirm the new style works with your layout.

11. Remove an Icon

If an icon is no longer needed:

1. Select the icon within the rich text module.
2. Press the Delete or Backspace key on your keyboard.

The surrounding text or content in Hubspot will reflow automatically once the icon is removed.

Best Practices for Icons in Hubspot Content

To use icons effectively and keep your Hubspot pages accessible and consistent, follow these tips:

• Use icons to support text, not replace it. Always include descriptive text near icons so users understand meaning.
• Maintain consistent sizes. Apply the same icon size for similar elements (like bullet lists or features).
• Stick to your brand palette. Use theme or brand colors defined in your Hubspot settings when possible.
• Test on different devices. Preview icons on desktop and mobile to confirm they scale and align properly.

Consistent icon usage improves readability, user experience, and overall design quality in your Hubspot assets.

Additional Hubspot Resources

If you need the original product documentation, you can review the official guide on the Hubspot Knowledge Base here: Insert and edit icons in rich text modules.

For broader strategy on optimizing your site structure, internal linking, and conversions alongside your Hubspot implementation, you can explore more resources at Consultevo.

By following the steps above, you can confidently insert, edit, and style icons across all your Hubspot rich text modules, ensuring your pages look modern, consistent, and aligned with your brand.

Need Help With Hubspot?

If you want expert help building, automating, or scaling your Hubspot , work with ConsultEvo, a team who has a decade of Hubspot experience.

Scale Hubspot

“`