---
title: "Migrate from PNG Icons to SVG Icons"
slug: "migrating-from-old-png-icons-to-svg-icons"
updated: 2025-08-01T07:47:25Z
published: 2025-08-01T07:47:25Z
canonical: "support.whatfix.com/migrating-from-old-png-icons-to-svg-icons"
---

> ## 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.

# Migrate from PNG Icons to SVG Icons

### Why migrate 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.

Expand the accordion for more details.

### 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 migrate from PNG to SVG Icons in Smart Tips?

1. Create or find SVG replacements for your existing PNG icons.
2. Upload the SVG icons to the Icon Library. For more information, see [Use custom icons in Whatfix Contents and Widgets](https://support.whatfix.com/desktop/docs/customize-icons-in-whatfix-contents-and-widgets?highlight=Use%20custom%20icons%20in%20Whatfix%20Contents%20and%20Widgets).

Expand the accordion for more details.

**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](/desktop/docs/customize-icons-in-whatfix-contents-and-widgets).
3. Replace existing PNG Icons with SVG Icons.

Expand the accordion for more details.

**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**.

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image(319).png?sv=2026-02-06&spr=https&st=2026-11-12T08%3A29%3A35Z&se=2026-11-12T09%3A29%3A35Z&sr=c&sp=r&sig=B5oDLve8r6AERGQnS0jjqARwjywwPA%2FrCvSL6nt7jic%3D)
  2. Click **Smart-tips**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image(397).png?sv=2026-02-06&spr=https&st=2026-11-12T08%3A29%3A35Z&se=2026-11-12T09%3A29%3A35Z&sr=c&sp=r&sig=B5oDLve8r6AERGQnS0jjqARwjywwPA%2FrCvSL6nt7jic%3D)
  3. Under the **Icon** section, click **+ Add Icon**.![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image(398).png?sv=2026-02-06&spr=https&st=2026-11-12T08%3A29%3A35Z&se=2026-11-12T09%3A29%3A35Z&sr=c&sp=r&sig=B5oDLve8r6AERGQnS0jjqARwjywwPA%2FrCvSL6nt7jic%3D)
  4. Select the uploaded icon from the **Icon Library** and click **Add**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image(399).png?sv=2026-02-06&spr=https&st=2026-11-12T08%3A29%3A35Z&se=2026-11-12T09%3A29%3A35Z&sr=c&sp=r&sig=B5oDLve8r6AERGQnS0jjqARwjywwPA%2FrCvSL6nt7jic%3D)
  5. Select the icon and then configure its **Color** and **Size**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image(400).png?sv=2026-02-06&spr=https&st=2026-11-12T08%3A29%3A35Z&se=2026-11-12T09%3A29%3A35Z&sr=c&sp=r&sig=B5oDLve8r6AERGQnS0jjqARwjywwPA%2FrCvSL6nt7jic%3D)
  6. Click **Save**.

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image(401).png?sv=2026-02-06&spr=https&st=2026-11-12T08%3A29%3A35Z&se=2026-11-12T09%3A29%3A35Z&sr=c&sp=r&sig=B5oDLve8r6AERGQnS0jjqARwjywwPA%2FrCvSL6nt7jic%3D)

Once saved, this SVG icon applies to all the Smart Tips in your application, and wherever PNG icons are used, they are replaced with this SVG icon. The PNG icons are deprecated.