Free GHL templatesGet them free

How to Change the Chat Widget Icon on the HighLevel Chat Widget

Matt @ HLPT
Matt @ HLPT
1 min read
How to Change the Chat Widget Icon on the HighLevel Chat Widget

So want something different from the double chat bubble icon that comes default for the HighLevel chat widget?

Lucky for you there’s a simple bit of code that you can use to change the icon to anything you find in the FontAwesome Free library of icons!

Here’s the code you’ll add below the HighLevel Chat widget code:

<style>
.icon.widget-open-icon svg {
    display: none !important;}

.icon.widget-open-icon:before {
    content: "\f179"; 
    font-family: 'FontAwesome';}
</style>

In the line where it says “content” you’ll replace that with the corresponding Unicode found on the FontAwesome icon page.

That’s all it takes! Be sure to refresh your dashboard if you’re using the chat widget inside of the HighLevel backend and enjoy!

The Complete Operator's Playbook

Weekly strategies from top-performing agencies

Join 5,000+ operators who get weekly tutorials, templates, and strategies that are actually working right now.

Matt @ HLPT

Matt @ HLPT

Founder, HL Pro Tools

Matt and his team of 250+ are known for making it easy to win with GoHighLevel. They bundle tools, trainings and team time for a complete solution. You can use them for all your HighLevel needs from white label support to done-for-you fractional marketing services.