Use custom icons for Beacons

Whatfix enables you to upload and manage your own custom icons for Beacons, 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 learn more about SVG behavior and best practices, see Icon Library Best Practices.

Use custom icons for Beacons:

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 Beacons from the Icon library:

1. On the Whatfix Guidance Dashboard, click Style.
   
   

2. Click Beacons.

   

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

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

Your title goes here

• 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 the Remove icon.

5. Select the icon that you want to use.
   

6. Make the following customizations:

   Note:

   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.