---
title: "Use custom icons in Whatfix Contents and Widgets"
slug: "customize-icons-in-whatfix-contents-and-widgets"
tags: ["Icon Library"]
updated: 2025-01-07T05:12:59Z
published: 2025-01-07T05:12:59Z
canonical: "support.whatfix.com/customize-icons-in-whatfix-contents-and-widgets"
---

> ## 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 in Whatfix Contents and Widgets

With the Whatfix Icon Library, upload and manage custom icons for Whatfix content and widgets like Smart Tips, Beacons, and Launchers. This enables you to align your widgets with your application's design and specific use cases.

> [!WARNING]
> Your title goes here
> 
> - Only the .SVG file format is supported for icons. Ensure your icons are in SVG format before uploading them to the Icon Library.
> - The SVG resolution should not exceed 48×48 pixels and the size should be less than 25 KB.
> - 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](/desktop/docs/icon-library-best-practices).

Use the following steps to upload custom icons:

          **Note:**

          

Only an **Account Manager** can perform the following task. For more information about available roles, see [Whatfix User Roles](/studio/docs/whatfix-user-roles).

1. On 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%3A21%3A29Z&se=2026-11-12T09%3A21%3A29Z&sr=c&sp=r&sig=CbutPO9DdLVGhNmpJsX4qBKuKS7EN33ix1dcCmepgZE%3D)
2. Click **Icon**.

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click_icon.png?sv=2026-02-06&spr=https&st=2026-11-12T08%3A21%3A29Z&se=2026-11-12T09%3A21%3A29Z&sr=c&sp=r&sig=CbutPO9DdLVGhNmpJsX4qBKuKS7EN33ix1dcCmepgZE%3D)
3. Click **+ Upload Icon**.![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click_uploadicon_DB.png?sv=2026-02-06&spr=https&st=2026-11-12T08%3A21%3A29Z&se=2026-11-12T09%3A21%3A29Z&sr=c&sp=r&sig=CbutPO9DdLVGhNmpJsX4qBKuKS7EN33ix1dcCmepgZE%3D)
4. On the **Upload icon** dialog box, enter a **Name** for your icon.

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Enter_name_DB.png?sv=2026-02-06&spr=https&st=2026-11-12T08%3A21%3A29Z&se=2026-11-12T09%3A21%3A29Z&sr=c&sp=r&sig=CbutPO9DdLVGhNmpJsX4qBKuKS7EN33ix1dcCmepgZE%3D)

> [!NOTE]
> Your title goes here
> 
> Use **Alt text** to provide a short alternative description of the image.
5. **Drag and drop** the icon from your local drive or click **choose file** to upload the icon from your local drive.

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click_choosefile_DB.png?sv=2026-02-06&spr=https&st=2026-11-12T08%3A21%3A29Z&se=2026-11-12T09%3A21%3A29Z&sr=c&sp=r&sig=CbutPO9DdLVGhNmpJsX4qBKuKS7EN33ix1dcCmepgZE%3D)

> [!WARNING]
> Your title goes here
> 
> Only SVG file types are supported. If you try to upload any other file types such as .jpg, .png, and more, you’ll see the **Your file is not in the supported format: SVG** error message.![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Error_message.png?sv=2026-02-06&spr=https&st=2026-11-12T08%3A21%3A29Z&se=2026-11-12T09%3A21%3A29Z&sr=c&sp=r&sig=CbutPO9DdLVGhNmpJsX4qBKuKS7EN33ix1dcCmepgZE%3D)
6. Click **Upload**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click_Upload_DB.png?sv=2026-02-06&spr=https&st=2026-11-12T08%3A21%3A29Z&se=2026-11-12T09%3A21%3A29Z&sr=c&sp=r&sig=CbutPO9DdLVGhNmpJsX4qBKuKS7EN33ix1dcCmepgZE%3D)

Once uploaded, custom icons are available in the Icon library and can be used in Smart Tips, Beacons, and Launchers. For more information, see:

- [Use custom icons for Smart Tips](/desktop/docs/use-custom-icons-for-smart-tips)
- [Use custom icons for Beacons](/desktop/docs/use-custom-icons-for-beacons)