--- title: "Use custom icons for Smart Tips" slug: "use-custom-icons-for-smart-tips" updated: 2026-09-25T06:28:57Z published: 2026-09-25T06:28:57Z canonical: "support.whatfix.com/use-custom-icons-for-smart-tips" stale: true --- > ## Documentation Index > Fetch the complete documentation index at: https://support.whatfix.com/llms.txt > Use this file to discover all available pages before exploring further. # Use custom icons for Smart Tips > [!WARNING] > Note: > > - Whatfix evaluates only one Smart Tip Collection per page at any given time. To show two or more Smart Tips on the same page, create them as part of a single Collection. > - Whatfix also enables you to display multiple Smart Tip Collections on the same page. To enable this feature, contact [support@whatfix.com](mailto:support@whatfix.com?subject=Request%20to%20enable%20the%20Unified%20Content%20Experience&body=Hi%20Whatfix%20Support%20Team%2C%0A%0APlease%20enable%20the%20Unified%20Content%20Experience%20for%20my%20account.%0A%0AThanks%2C%0A). Whatfix enables you to upload and manage your own custom icons for Smart Tips, enabling you to align your widgets with your application's design and specific use cases. ### Prerequisites You must first upload the icons to the Icon Library. For more information on uploading icons, see [Use custom icons in Whatfix Contents and Widgets](/studio/docs/customize-icons-in-whatfix-contents-and-widgets). > [!WARNING] > Note: > > - Only .SVG file format is supported for icons. Ensure your icons are in .SVG format before you upload them to the Icon Library. > - The SVG resolution should not exceed 48×48 pixels and the file size should be less than 25 KB. > - You can only Upload up to 25 custom icons to the Icon Library. Once the upload limit is reached, delete any unused icons to add new ones. > - To know more about SVG behavior and best practices, see [Icon Library Best Practices](/studio/docs/svg-best-practices-for-icon-library). #### Use custom icons for Smart Tips: > [!WARNING] > Note: > > This is an account-level configuration, changes made here apply to all Smart Tip collections. Use the following steps to add custom icons for Smart Tips from the Icon library: 1. On the Whatfix Guidance Dashboard, click **Style**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image(331).png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A33%3A46Z&se=2026-11-12T08%3A33%3A46Z&sr=c&sp=r&sig=QsFHIpTHFTCk9keuOjqdI3W%2FFn0PFletEJ0h9iem80w%3D) 2. Click **Smart-tips**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click_Smarttips_DB.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A33%3A46Z&se=2026-11-12T08%3A33%3A46Z&sr=c&sp=r&sig=QsFHIpTHFTCk9keuOjqdI3W%2FFn0PFletEJ0h9iem80w%3D) 3. Under the **Icon** section, click **+ Add Icon**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click_Addicon_DB.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A33%3A46Z&se=2026-11-12T08%3A33%3A46Z&sr=c&sp=r&sig=QsFHIpTHFTCk9keuOjqdI3W%2FFn0PFletEJ0h9iem80w%3D) 4. Select the icon from the **Icon library** and click **Add**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Icon_library_DB.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A33%3A46Z&se=2026-11-12T08%3A33%3A46Z&sr=c&sp=r&sig=QsFHIpTHFTCk9keuOjqdI3W%2FFn0PFletEJ0h9iem80w%3D) > [!NOTE] > Info: > > - Add up to 5 icons to the **Icon** section. > - Once this limit is reached, the **+ Add Icon** button appears grayed out. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Greyed_button.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A33%3A46Z&se=2026-11-12T08%3A33%3A46Z&sr=c&sp=r&sig=QsFHIpTHFTCk9keuOjqdI3W%2FFn0PFletEJ0h9iem80w%3D) > - To add new icons, hover your cursor over the icon and click **Remove icon**. > > ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click_removeicon.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A33%3A46Z&se=2026-11-12T08%3A33%3A46Z&sr=c&sp=r&sig=QsFHIpTHFTCk9keuOjqdI3W%2FFn0PFletEJ0h9iem80w%3D) 1. Select the icon that you want to use. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Selecticon_DB.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A33%3A46Z&se=2026-11-12T08%3A33%3A46Z&sr=c&sp=r&sig=QsFHIpTHFTCk9keuOjqdI3W%2FFn0PFletEJ0h9iem80w%3D) 2. Make the following customizations: > [!WARNING] > Your title goes here > > Some customizations might not apply to certain SVG files because of their structure or other factors. In that case, try uploading a different SVG. For more information, see [Icon Library Best Practices](/studio/docs/svg-best-practices-for-icon-library). - Select the **Color** from the existing color picker or enter the hexadecimal code of the desired color. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Select_color_DB.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A33%3A46Z&se=2026-11-12T08%3A33%3A46Z&sr=c&sp=r&sig=QsFHIpTHFTCk9keuOjqdI3W%2FFn0PFletEJ0h9iem80w%3D) - Select the **Size** of the icon using the dropdown. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Select_Size_DB.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A33%3A46Z&se=2026-11-12T08%3A33%3A46Z&sr=c&sp=r&sig=QsFHIpTHFTCk9keuOjqdI3W%2FFn0PFletEJ0h9iem80w%3D) 3. Click **Save**. ![Click_saveicon](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click_saveicon.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A33%3A46Z&se=2026-11-12T08%3A33%3A46Z&sr=c&sp=r&sig=QsFHIpTHFTCk9keuOjqdI3W%2FFn0PFletEJ0h9iem80w%3D) > [!WARNING] > Note: > > If you click **Discard changes**, all the modifications you've made to the content are lost, and the page reverts to its previously saved state. > [!NOTE] > Info: > > Once you save the changes, the icons you add to the **Icon** section on the Dashboard appear along with the default type icons in the Studio's **Icon** section. > > ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Smartips.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A33%3A46Z&se=2026-11-12T08%3A33%3A46Z&sr=c&sp=r&sig=QsFHIpTHFTCk9keuOjqdI3W%2FFn0PFletEJ0h9iem80w%3D) ## Related - [Icon Library Best Practices](/svg-best-practices-for-icon-library.md)