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
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.
Related Articles
HighLevel Live Chat Widget 101: The Complete Guide to Setting Up Website Chat
Learn how to set up the live chat widget in HighLevel. This complete guide covers widget installation, customization, chat routing, automate
HighLevel Step-by-Step Tutorial: How to Add Multiple Chat Widgets
You ever wished you could have different chat widgets on different landing pages—each one customized for specific offers, services, or audie
HighLevel Step-by-Step Tutorial: How to Add a Chat Widget to HighLevel In Just a Few Clicks!
Is there anything better than landing on a website and seeing a bunch of easy ways to interact? For me, chat widgets are where it’s at. Fill