Replace PNG Icons with SVG Icons

Updated On 03 Sep 2025
1 Minute To Read

Print
Share
Dark
Light
PDF

Article summary

Did you find this summary helpful?

Thank you for your feedback

Why switch to SVG Icons?

With the Icon Library, Whatfix deprecates the use of PNG icons. If you are using PNG icons in content such as Smart Tips, ensure that you update all existing PNG icons to the SVG format. Migrating to SVG icons ensures that your content remains consistent and aligns with your application’s design.

Benefits of using SVG Icons over PNG Icons

Aspect	SVG icons	PNG icons
Scalability	Can be resized without losing quality; remains sharp and clear at any size	Loses quality when resized, becomes blurry or pixelated
File Size	Often smaller, which improves load time and performance for your application	Can be larger, especially at higher resolutions, which may slow down the application
Customization	Enable easy manipulation using CSS or JavaScript for dynamic changes in color, size, and effects	Static, requires new images for any changes, making customization cumbersome
Consistency	Maintains a uniform appearance across devices and screen sizes, contributing to a consistent user experience	May appear differently on various devices, leading to inconsistencies in content

How to switch from PNG to SVG Icons in Smart Tips?

Create or find SVG replacements for your existing PNG icons
Upload the SVG icons to the Icon Library
Upload the SVG icons to the Icon Library
To upload SVG icons to the Icon Library, see Use custom icons in Whatfix Contents and Widgets.
Replace existing PNG Icons with SVG Icons
Replace existing PNG Icons with SVG Icons
Use the following steps to replace existing icons with SVG icons in Smart Tips:
1. Go to the Whatfix Guidance Dashboard, click Style.
2. Click Smart-tips.
3. Under the Icon section, click + Add Icon.
4. Select the uploaded icon from the Icon Library and click Add.
5. Select the icon and then configure its Color and Size.
6. Click Save.
  Note:
  Once saved, the selected SVG icon applies to all the Smart Tips in your application, and wherever a PNG icon is used, it’s replaced with this SVG icon. The PNG icon is deprecated permanently. That means you can no longer use the same PNG icon. If you want the same icon type, ensure you use the SVG version of it.