Use custom icons for Smart Tips

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.

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.

Use custom icons for Smart Tips:

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.

2. Click Smart-tips.

   

3. Under the Icon section, click + Add Icon.

   

4. Select the icon from the Icon library and click Add.

   

Info:

• Add up to 5 icons to the Icon section.

• Once this limit is reached, the + Add Icon button appears grayed out.

• To add new icons, hover your cursor over the icon and click Remove icon.

  

5. Select the icon that you want to use.

   

6. Make the following customizations:

   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.

   • Select the Color from the existing color picker or enter the hexadecimal code of the desired color.  

   • Select the Size of the icon using the dropdown.  

7. Click Save.

   

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.    

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.