How to change sparkle icon in now assist

CDJ
Tera Contributor

‎08-29-2025 04:22 AM

 

Hi All,

I’m trying to update the Now Assist icon color. When I inspect the element in the browser, I can see it is using the class .now-icon with the following CSS:

 

 
.now-icon { fill-rule: evenodd; fill: currentcolor; } 
 

If I manually change the color in Inspect, it works, but the change doesn’t stay after refresh.

Can someone guide me where I need to apply this change so it is permanent?

  • Should I modify the Theme CSS in Service Portal?

  • Or is this controlled through UI Builder (Next Experience / Workspace)?

Any best practice on overriding the fill: currentcolor; for the Now Assist icon would be really helpful.

Thanks in advance!

CDJ_0-1756466538392.png

 

0 Helpfuls
  • 3,904 Views
6 REPLIES 6

Immanuel Ho
Tera Contributor

‎07-09-2026 11:39 PM

Change the first two in your theme to change the colour 

 

// Now Assist Self Service FAB Entry Point
$now-sp-nass-FAB-gradient-color-1: $brand-primary-lighter !default;
$now-sp-nass-FAB-gradient-color-2: $brand-info !default;
$now-sp-nass-FAB-gradient-hover-color-1: $brand-primary-darker !default;
$now-sp-nass-FAB-gradient-hover-color-2: darken($brand-info, 10%) !default;
$now-sp-nass-FAB-gradient-active-color-1: $brand-primary !default;
$now-sp-nass-FAB-gradient-active-color-2: $brand-info !default;

https://support.servicenow.com/kb?id=kb_article_view&sysparm_article=KB3129710

0 Helpfuls

cperez86
Tera Expert

‎07-10-2026 01:03 AM

Hi Immanuel,

 

Thanks for your reply.
The solution you suggested would change the icon's colors, but the goal is to replace that icon with a different one.

0 Helpfuls