---
title: "Use custom icons for Launcher"
slug: "use-custom-icons-for-launcher"
updated: 2026-05-08T05:50:12Z
published: 2026-05-08T05:50:12Z
canonical: "support.whatfix.com/use-custom-icons-for-launcher"
---

> ## 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 for Launcher

Whatfix enables you to upload and manage your own custom icons for Launchers, enabling you to align your widgets with your application's design and specific use cases.

### Prerequisites for adding custom icons:

You must first upload the custom icons to the Icon Library. For more information on uploading icons, see [Use custom icons in Whatfix Contents and Widgets](/studio/docs/customize-icons-in-whatfix-contents-and-widgets).

> [!WARNING]
> 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.
> - 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 custom icons for Launcher:

> [!WARNING]
> 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 Smart Tips from the Icon library:

1. On the Whatfix Guidance Dashboard, click **Style**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image(331).png)
2. Click **Launchers**.

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image(340).png)
3. Under the **Type** section, click **Icon only**using the dropdown menu.

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/2024-10-07_13-10-31.png)
4. Under the **Icon** section, click **+ Add Icon**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/2024-10-07_13-09-36.png)
5. Select the icon from the **Icon library**and click**Add**.

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Icon_library_DB.png)

> [!WARNING]
> Note:
> 
> - Add up to 5 icons to the **Icon** section.
> - Once this limit is reached, the **+ Add Icon** button appears grayed out. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image(342).png)
> - To add new icons, hover your cursor over the icon and click the **Remove icon**.
> 
> ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image(343).png)

1. Select the icon that you want to use.![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/2024-10-07_12-10-22.png)
2. Make the following customizations:

> [!WARNING]
> 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](/studio/docs/svg-best-practices-for-icon-library).
  - Select the **Color** from the existing color picker or enter the hexadecimal code of the desired color. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Select_color_DB.png)
  - Select the **Size** of the icon using the dropdown. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Select_Size_DB.png)
3. Click **Save**.

![Click_saveicon](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click_saveicon.png)

> [!WARNING]
> 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.

> [!NOTE]
> 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.
> 
> ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/2024-10-07_13-14-14.png)

## Related

- [Use custom icons in Whatfix Content and Widgets](/customize-icons-in-whatfix-contents-and-widgets.md)