---
title: "Use custom icons in Whatfix Content and Widgets"
slug: "customize-icons-in-whatfix-contents-and-widgets"
tags: ["Icon Library"]
updated: 2026-03-03T14:47:38Z
published: 2026-03-03T14:47:38Z
---

> ## 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 Content and Widgets

Upload and manage custom icons for Whatfix Content and widgets such as Smart Tips, Beacons, and Launchers to the Whatfix Icon Library. The use of custom icons enables you to align your content with your brand and/or specific use cases.

> [!WARNING]
> Note:
> 
> - 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](/studio/docs/svg-best-practices-for-icon-library).

### Use the following steps to upload custom icons:

> [!WARNING]
> 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)
2. Click **Icon**.

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click_icon.png)
3. Click **Upload Icon**.![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click_uploadicon_DB.png)
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)

> [!NOTE]
> Info:
> 
> Use **Alt text** to provide a short alternative description of the image.
5. Drag**and drop** an 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)

> [!WARNING]
> Note:
> 
> Only SVG file types are supported. If you try to upload any other file types such as .jpg or .png, the **Your file is not in the supported format: SVG** error message appears. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Error_message.png)
6. Click **Upload**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click_Upload_DB.png)

Once you upload the custom icons, you can view them in the Icon library. Use the icons in Smart Tips, Beacons, and Launchers. For more information, see the following:

- [Use custom icons for Smart Tips](/studio/docs/use-custom-icons-for-smart-tips)
- [Use custom icons for Beacons](/studio/docs/change-the-icon-for-beacon)
- [Use custom icons for Launchers](/studio/docs/use-custom-icons-for-launcher)

Whatfix Content includes Flows, Images, Videos, PDFs, Articles and Links.

## Related

- [Icon Library Best Practices](/svg-best-practices-for-icon-library.md)
- [Replace PNG Icons with SVG Icons](/migrating-from-old-png-icons-to-svg-icons.md)