Insert and edit icons in rich text modules

Icons help draw attention to important information and actions in rich text content. Insert 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.

Insert an icon

1. Navigate to your content:
   • Website Pages: In your HubSpot account, navigate to Content > Website Pages.
   • Landing Pages: In your HubSpot account, navigate to Content > Landing Pages.
   • Blog: In your HubSpot account, navigate to Content > Blog.
2. Click the name of your content.
3. Click the rich text module where you want the icon to appear.
4. In the top right of the rich text toolbar, click the Insert dropdown menu and select Icon.

5. In the pop-up box, search for the icon in the search bar.
6. Click the icon to insert it into your rich text module.
7. When finished, click Publish or Update in the top right.

Edit an icon

Edit an icon's styles, alignment, or link to other content. You can also replace an icon or remove it.

1. Navigate to your content:
   1. Website Pages: In your HubSpot account, navigate to Content > Website Pages.
   2. Landing Pages: In your HubSpot account, navigate to Content > Landing Pages.
   3. Blog: In your HubSpot account, navigate to Content > Blog.
2. Click the name of your content.
3. 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 , click the Advanced tab.
   • Use the indent indent icons to move the icon right or 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 the link link icon, then insert a link.
   • 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.
4. To remove an icon from a rich text module, click the icon. Then click the delete delete icon.
5. To replace the icon, click the icon. Then click the replace replace icon, and select a new icon.
6. When finished, click Publish or Update in the top right.

Edit advanced icon options

Edit advanced options for your icon to add accessibility text or customize the icon link. 

1. Navigate to your content:
   • Website Pages: In your HubSpot account, navigate to Content > Website Pages.
   • Landing Pages: In your HubSpot account, navigate to Content > Landing Pages.
   • Blog: In your HubSpot account, navigate to Content > Blog.
2. Click the name of your content.
3. In the content editor, click the icon.
4. Click the edit edit icon.
5. In the pop-up box, click Advanced.
6. If your icon has a link, 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.
7. 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 doesn't convey information, select Ignored by screen readers.

8. Click Apply.
9. When finished, click Publish or Update in the top right.