Insert and edit icons in rich text modules
Last updated: January 19, 2023
Applies to:
All products and plans |
You can add any icon in the Font Awesome library to rich text modules on blog posts and pages. Once the icon is added, you can customize its color, positioning, and size.
Please note: icons cannot be added directly to marketing emails. To use an icon in an email, save the icon as an image, then insert the image into the email editor.
Add an icon to your content in a rich text module
-
Navigate to your content:
- Website Pages: In your HubSpot account, navigate to Marketing > Website > Website Pages.
- Landing Pages: In your HubSpot account, navigate to Marketing > Landing Pages.
- Blog: In your HubSpot account, navigate to Marketing > Website > Blog.
- Hover over the name of your blog post or page and click Edit.
- Click the rich text module where you want the icon to appear.
- In the upper right of the rich text toolbar, click the Insert dropdown menu and select Icon.
- In the pop-up window, search for the icon in the search bar.
- Click the icon to insert it into your rich text module.
Edit an icon
Once you've inserted your icon, you can edit its appearance and position, or link to other content.
-
Navigate to your content:
- Website Pages: In your HubSpot account, navigate to Marketing > Website > Website Pages.
- Landing Pages: In your HubSpot account, navigate to Marketing > Landing Pages.
- Blog: In your HubSpot account, navigate to Marketing > Website > Blog.
- Hover over the name of the blog post or page and click Edit.
- In the content editor, click your icon to open the icon editor.
-
- To edit the icon's color, click the backgroundColor icon color dropdown menu and select a color. To enter a hex value or RGB color value, navigate to the Advanced tab.
- Use the indent indent iconiconiconicons to move the icon to the right or to the left.
- Use the blockAlignmentBottom alignment icons to adjust the icon's position within a block of text.
- To add a link to your icon, click thelinklink icon.
- To resize your icon, click and drag the icon's corners in the editor or enter pixel values for the width and height in the toolbar.

- To remove an icon from a rich text module, click the image, then click the deletetrash icon .
- To replace the icon, click the image, then click the replace replace icon
and add a new icon.
Edit advanced icon options
You can edit advanced options for your icon to add accessibility text or customize the icon link.
- In the content editor, click the icon.
- Click the edit edit icon.
- In the upper right of the pop-up window, click Advanced.
- If your icon is linked, you can select one or more link types. This tells search engines how this link relates to your website. Learn more about different link types.
- Select a purpose for your image.
- If your icon is intended to convey information, select Read by screen readers and add a title that describes its purpose.
- If your icon does not convey information, select Ignored by screen readers.

Landing Pages
Blog
Website Pages
Thank you for your feedback, it means a lot to us.
This form is used for documentation feedback only. Learn how to get help with HubSpot.