# Change live chat icon

**URL:** <https://community.hubspot.com/t/change-live-chat-icon/74972>\
**Category:** Tickets & Conversations\
**Tags:** chat, integrations, how-to\
**Created:** [February 10, 2023, 4:08pm UTC](https://community.hubspot.com/t/change-live-chat-icon/74972 "2023-02-10T16:08:32Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![ABatman](https://avatars.discourse-cdn.com/v4/letter/a/e0b2c6/32.png) [@ABatman](https://community.hubspot.com/u/ABatman)\
**Post date:** [February 10, 2023, 4:08pm UTC](https://community.hubspot.com/t/change-live-chat-icon/74972/1 "2023-02-10T16:08:32Z")

</div>

Hi, I am integrating live chat with wordpress and I need different icon for widget. But I cannot find anywhere how to change it. In the settings I can only see options to change color or move chat icon left or right but nothing about having a different one. Can you please assist me with this issue?

---

<div class="post-metadata">

**Author:** ![karstenkoehler](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/karstenkoehler/32/68554_2.png) [@karstenkoehler](https://community.hubspot.com/u/karstenkoehler)\
**Post date:** [February 10, 2023, 8:53pm UTC](https://community.hubspot.com/t/change-live-chat-icon/74972/2 "2023-02-10T20:53:43Z")

</div>

Hi @ABatman,

You can change the image by navigating to _Menu_ \> _Conversations_ \> _Chatflows_ \> hover mouse over live chat \> _Edit_ \> tab _Display_ \> _Choose chat avatar_.

Best regards!

---

<div class="post-metadata">

**Author:** ![ABatman](https://avatars.discourse-cdn.com/v4/letter/a/e0b2c6/32.png) [@ABatman](https://community.hubspot.com/u/ABatman)\
**Post date:** [February 12, 2023, 8:12pm UTC](https://community.hubspot.com/t/change-live-chat-icon/74972/3 "2023-02-12T20:12:01Z")

</div>

Hi, that is not what I’m looking for. I want to change the icon of widget itself, not the person avatar

 ![ABatman_0-1676232675748.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/b/e/beb8150439ad1320bb95242ed1f79d741e7fb337.png)

---

<div class="post-metadata">

**Author:** ![SNigam](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/snigam/32/24290_2.png) [@SNigam](https://community.hubspot.com/u/SNigam)\
**Post date:** [February 13, 2023, 11:31am UTC](https://community.hubspot.com/t/change-live-chat-icon/74972/4 "2023-02-13T11:31:03Z")

</div>

_\*Note from the moderator:_  
_This content appears to be created with the help of AI tools and **might be of low relevance or could contain incorrect information.** _  
_We recommend fact-checking the content._  
_Please use AI responsibly going forward (see [Community Guidelines](https://community.hubspot.com/t5/Getting-Started-on-the-Community/HubSpot-Community-Guidelines/ba-p/384050#:~:text=revoked%20Community%20membership.-,2.%20Be%20relevant.,-There%E2%80%99s%20a%20lot))._  
--------------------------------------  
Hello @ABatman ,

Hubspot Live Chat does not provide a direct option to change the icon for the chat launcher. However, you can customize the look of the chat launcher by modifying the HTML and CSS code of the chat launcher.

Here is a step-by-step guide on how you can change the icon of the Hubspot Live Chat Launcher:

1. Go to your Hubspot account and navigate to the Live Chat section.
2. Copy the code provided.
3. Create a new HTML file on your computer and paste the copied code into it.
4. Find the following line in the code:

`<div class="hs-chat-icon"></div>`

1. Replace this line with the following code to display a custom icon using an image  
`<div class="hs-chat-icon"><img src="path/to/icon.png"></div>​`
2. Save the HTML file and host it on a web server.
3. Copy the URL of the hosted HTML file and paste it in the Install code section in your Hubspot account.
4. Click on the Save button to apply the changes.

Now, the custom icon will be displayed in the chat launcher. You can further customize the look of the chat launcher by modifying the CSS code in the HTML file.

This is an AI generated reply. I hope this will work for you.

Thank you

Shubham Nigam

---

<div class="post-metadata">

**Author:** ![ABatman](https://avatars.discourse-cdn.com/v4/letter/a/e0b2c6/32.png) [@ABatman](https://community.hubspot.com/u/ABatman)\
**Post date:** [February 13, 2023, 12:34pm UTC](https://community.hubspot.com/t/change-live-chat-icon/74972/5 "2023-02-13T12:34:59Z")

</div>

Thanks, this answers my question! A bit dissapointing though that there is no easy option, since other chat providers have it.

---

<div class="post-metadata">

**Author:** ![MSchiano](https://avatars.discourse-cdn.com/v4/letter/m/b5a626/32.png) [@MSchiano](https://community.hubspot.com/u/MSchiano)\
**Post date:** [May 9, 2023, 4:11pm UTC](https://community.hubspot.com/t/change-live-chat-icon/74972/6 "2023-05-09T16:11:19Z")

</div>

Hi there,

This looks like an awesome soltuion and simiple enough to execute but I don’t see an install code option. Don’t see any in inbox settings either.

 ![Screen Shot 2023-05-09 at 12.09.49 PM.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/6/3/63f7398c77979343612d95be973d6cf7d5cca033.png)

---

<div class="post-metadata">

**Author:** ![HayatoYu](https://avatars.discourse-cdn.com/v4/letter/h/57b2e6/32.png) [@HayatoYu](https://community.hubspot.com/u/HayatoYu)\
**Post date:** [May 17, 2023, 1:34am UTC](https://community.hubspot.com/t/change-live-chat-icon/74972/7 "2023-05-17T01:34:18Z")

</div>

Hi SNigam,

I have the same problem and I found your reply. However, I can’t find the Install code button at step 2. I navigated to Conversations \> Chatflows but there’s only chatflows I created. Did I navigate to a wrong section?

---

<div class="post-metadata">

**Author:** ![AhmedAITELAOUAD](https://avatars.discourse-cdn.com/v4/letter/a/e19adc/32.png) [@AhmedAITELAOUAD](https://community.hubspot.com/u/AhmedAITELAOUAD)\
**Post date:** [July 17, 2023, 7:41am UTC](https://community.hubspot.com/t/change-live-chat-icon/74972/8 "2023-07-17T07:41:38Z")

</div>

where con i find the code provider

---

<div class="post-metadata">

**Author:** ![JStanleyPG](https://avatars.discourse-cdn.com/v4/letter/j/c67d28/32.png) [@JStanleyPG](https://community.hubspot.com/u/JStanleyPG)\
**Post date:** [June 3, 2024, 11:05am UTC](https://community.hubspot.com/t/change-live-chat-icon/74972/9 "2024-06-03T11:05:20Z")

</div>

Hello,

this solution doesn’t seem to work in 2024

Where do i find the code you reference in point 2 ?

cheer

---

<div class="post-metadata">

**Author:** ![TangoForge](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tangoforge/32/31851_2.png) [@TangoForge](https://community.hubspot.com/u/TangoForge)\
**Post date:** [October 10, 2023, 4:26pm UTC](https://community.hubspot.com/t/change-live-chat-icon/74972/10 "2023-10-10T16:26:59Z")

</div>

I am trying to change the icon of the chat launcher. Per your instructions, I have inserted this into Wordpress\>Customize\>CSS. It’s not working, could you please correct?  
.hs-chat-icon {content: url(“[//tangoforge.com/wp-content/uploads/chat-bubble](https://tangoforge.com/wp-content/uploads/chat-bubble)\_vio.png”);}
