Skip to content
Landing Pages

Insert and edit icons in rich text modules

Last updated: June 21, 2021

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

  • In your HubSpot account, navigate to your blog, landing pages, or website pages.

  • 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.

insert-a-new-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. 

    1. 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. 
    2. Use the indent indent iconiconiconicons to move the icon to the right or to the left.
    3. Use the blockAlignmentBottom alignment icons to adjust the icon's position within a block of text. 
    4. To add a link to your icon, click thelinklink icon.
    5. 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.
insert-an-icon-1
  • 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
select-an-icon-purpose-1