> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.blab.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Widgets: Icon

# Widget Categories: Basic

Use icons to emphasize your text and balance the layout of your site.

For information on adding widgets, see [Add Widgets](https://help.booklikeaboss.com/en/articles/10353857-widgets-library-and-overview#h_45d573b76d).

**Tip**

Fore more information on widgets and the widgets library, see [Widgets: Library and Overview](https://intercom.help/book-like-a-boss/en/articles/10353857-widgets-library-and-overview).

**Note**

* SVG files can be resized without losing resolution.

* SVGs are image files that contain HTML code, meaning when you add an SVG icon to your site you are also adding lines of code. Multiple complex SVGs can add thousands of lines of code and cause your site to load slowly. If you need to use multiple SVG icons on the same page, we recommend turning some of them into regular images (.png, .jpeg, etc) to avoid loading or functionality issues.

* For guidelines on media, see [Media Guidelines and Specifications](https://intercom.help/book-like-a-boss/en/articles/10390919-media-guidelines-and-specifications).

# Content Editor

To access the content editor, right click the widget and select **Edit Content**. Or, if you are in flex mode or Editor 2.0, the option to access the content editor is available in the floating menu.

1. Click **Choose Icon** to select a ready-made icon, or click **Upload SVG File**.
2. To link the icon, click **Link Icon**, and select the page you want to link the icon to.
3. Type Alt text for the icon. Alt text enables search engines to recognize image content. Use text that clearly describes the image. Or, click the **Sparkle** **icon** to use the AI Assistant to generate alt text.

**Note**

* Alt text generated by the AI Assistant is in the same language as the page's current language.

* The Sparkle icon for AI will be disabled if an icon is not selected.

4. Type a **Tooltip** for the icon. The tooltip text displays when a user hovers over the image.

# Design Editor

To access the design editor, right-click the element, and click **Edit Design**. Or if you are in flex mode or Editor 2.0, select **Edit Design** from the floating menu to open the design panel.

In the **Design Editor**, you can make changes to the layout of your icon, adjust the icon size and color, and make changes to the spacing of the widget.

To make the icon a floating widget, enable the **Floating** toggle, and select a position for the widget. To display the floating button on the current page only, enable the **Show on this page only** toggle.

**Note**

Floating icons can be set to display on specific pages, but it will appear on all pages by default (there isn't currently a way to toggle it off only for particular pages).

For information about design options that are not specific to this widget (for example, layout, style, or spacing), see [Widget Design](https://help.booklikeaboss.com/en/articles/10353857-widgets-library-and-overview#h_bd5957206f).  
​

# FAQs and Troubleshooting

**Why is the color of the icon not changing when I'm selecting a different color?**

This issue is typically related to the way the file was originally created. The icon's color must be true black (e.g., hex code #000000).

Additionally, the SVG needs to be exported with inline style.

Since SVG files can be made up of intricate code, it’s recommended to consult someone experienced with SVGs for any adjustments.