--- title: "Add an icon to Self Help" slug: "add-an-icon-to-self-help" updated: 2026-08-13T05:54:48Z published: 2026-08-13T05:54:48Z canonical: "support.whatfix.com/add-an-icon-to-self-help" --- > ## 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. # Add an icon to Self Help Whatfix enables you to add icons to the Self Help widget. Choose a default icon, such as a question mark, or a custom icon that matches other icons in your application. Expand the following accordions for more details: **Add an icon to the Old Self Help** **End-user experience:** ![SH_old_icon.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/SH_old_icon.png?sv=2026-02-06&spr=https&st=2026-11-10T16%3A41%3A34Z&se=2026-11-10T17%3A41%3A34Z&sr=c&sp=r&sig=nVpC8eA7MgTHdpJdfGhrc2EPFFZYB%2BoCGLc%2BN3CCej4%3D) Use the following steps to add icons to your Old Self Help widget: 1. On the Whatfix Guidance dashboard, click **Style**. ![ia_left%20nav_style](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/ia_left%20nav_style.png?sv=2026-02-06&spr=https&st=2026-11-10T16%3A41%3A34Z&se=2026-11-10T17%3A41%3A34Z&sr=c&sp=r&sig=nVpC8eA7MgTHdpJdfGhrc2EPFFZYB%2BoCGLc%2BN3CCej4%3D) 2. Click **Self Help**. ![styles_sh.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/styles_sh.png?sv=2026-02-06&spr=https&st=2026-11-10T16%3A41%3A34Z&se=2026-11-10T17%3A41%3A34Z&sr=c&sp=r&sig=nVpC8eA7MgTHdpJdfGhrc2EPFFZYB%2BoCGLc%2BN3CCej4%3D) 1. In the **Appearance** section, under **Widget Icon**, click the dropdown menu next to **Type**. Select either **Label with Icon** or **Icon only** based on your requirements. ![RB_DB_SH_addicon](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/RB_DB_SH_addicon.png?sv=2026-02-06&spr=https&st=2026-11-10T16%3A41%3A34Z&se=2026-11-10T17%3A41%3A34Z&sr=c&sp=r&sig=nVpC8eA7MgTHdpJdfGhrc2EPFFZYB%2BoCGLc%2BN3CCej4%3D) 2. In the **Icon** section, choose the **Custom** option. ![DB_SH_Themes_Addicon1](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/DB_SH_Themes_Addicon%281%29.png?sv=2026-02-06&spr=https&st=2026-11-10T16%3A41%3A34Z&se=2026-11-10T17%3A41%3A34Z&sr=c&sp=r&sig=nVpC8eA7MgTHdpJdfGhrc2EPFFZYB%2BoCGLc%2BN3CCej4%3D) 3. Click **Choose Icon**, then select the image you want to use from your device. ![DB_SH_Themes_chooseicon](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/DB_SH_Themes_chooseicon.png?sv=2026-02-06&spr=https&st=2026-11-10T16%3A41%3A34Z&se=2026-11-10T17%3A41%3A34Z&sr=c&sp=r&sig=nVpC8eA7MgTHdpJdfGhrc2EPFFZYB%2BoCGLc%2BN3CCej4%3D) > [!WARNING] > Note: > > - Whatfix supports **PNG** and **SVG** formats for custom icons. > - The image resolution can be up to 24x24 pixels. > - The file size should be less than 25 KB. 1. After uploading the image, click **Save**. ![RB_DB_SH_Clicksavesupport](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/RB_DB_SH_Clicksavesupport.png?sv=2026-02-06&spr=https&st=2026-11-10T16%3A41%3A34Z&se=2026-11-10T17%3A41%3A34Z&sr=c&sp=r&sig=nVpC8eA7MgTHdpJdfGhrc2EPFFZYB%2BoCGLc%2BN3CCej4%3D) > [!WARNING] > Note: > > Once saved, you must [push the changes made to Production](/studio/docs/pushing-whatfix-content-to-production) so that the latest behavior reflects for end users. **Add an icon to the Improved Self Help** **End-user experience:** ![SH_Icon_preview.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/SH_Icon_preview%281%29.png?sv=2026-02-06&spr=https&st=2026-11-10T16%3A41%3A34Z&se=2026-11-10T17%3A41%3A34Z&sr=c&sp=r&sig=nVpC8eA7MgTHdpJdfGhrc2EPFFZYB%2BoCGLc%2BN3CCej4%3D) Use the following steps to add icons to your Improved Self Help widget: 1. On the Whatfix Guidance dashboard, click **Style**. ![ia_left%20nav_style](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/ia_left%20nav_style.png?sv=2026-02-06&spr=https&st=2026-11-10T16%3A41%3A34Z&se=2026-11-10T17%3A41%3A34Z&sr=c&sp=r&sig=nVpC8eA7MgTHdpJdfGhrc2EPFFZYB%2BoCGLc%2BN3CCej4%3D) 2. Click **Self Help**. ![styles_sh.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/styles_sh.png?sv=2026-02-06&spr=https&st=2026-11-10T16%3A41%3A34Z&se=2026-11-10T17%3A41%3A34Z&sr=c&sp=r&sig=nVpC8eA7MgTHdpJdfGhrc2EPFFZYB%2BoCGLc%2BN3CCej4%3D) 1. In the **Customisations** section, click **FAB**. ![DB_SH_Fab.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/DB_SH_Fab%281%29.png?sv=2026-02-06&spr=https&st=2026-11-10T16%3A41%3A34Z&se=2026-11-10T17%3A41%3A34Z&sr=c&sp=r&sig=nVpC8eA7MgTHdpJdfGhrc2EPFFZYB%2BoCGLc%2BN3CCej4%3D) 2. In the **Icon** section, click the **+** icon. ![SH_Click_Plus_Icon.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/SH_Click_Plus_Icon.png?sv=2026-02-06&spr=https&st=2026-11-10T16%3A41%3A34Z&se=2026-11-10T17%3A41%3A34Z&sr=c&sp=r&sig=nVpC8eA7MgTHdpJdfGhrc2EPFFZYB%2BoCGLc%2BN3CCej4%3D) 3. Select the image you want to use from your device. > [!WARNING] > Note: > > - Whatfix supports **PNG** and **SVG** formats for custom icons. > - The image resolution can be up to 32x32 pixels. 1. Add a text for your icon. The text appears on hover over the FAB icon. ![SH_Add_Text.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/SH_Add_Text.png?sv=2026-02-06&spr=https&st=2026-11-10T16%3A41%3A34Z&se=2026-11-10T17%3A41%3A34Z&sr=c&sp=r&sig=nVpC8eA7MgTHdpJdfGhrc2EPFFZYB%2BoCGLc%2BN3CCej4%3D) 2. Click **Save**. ![RB_DB_SH_Clicksavesupport](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/RB_DB_SH_Clicksavesupport.png?sv=2026-02-06&spr=https&st=2026-11-10T16%3A41%3A34Z&se=2026-11-10T17%3A41%3A34Z&sr=c&sp=r&sig=nVpC8eA7MgTHdpJdfGhrc2EPFFZYB%2BoCGLc%2BN3CCej4%3D) > [!WARNING] > Note: > > Once saved, you must [push the changes made to Production](/studio/docs/pushing-whatfix-content-to-production) so that the latest behavior reflects for end users. ## Related - [Create a Self Help Segment](/create-a-self-help-segment.md)