How to edit the HTML and CSS for the Filter Navigator icon?

[dauger]

Hello all!

I am having a hard time finding where the Filter Navigator's icon can be edited. The HTML from my browser's console shows the following...

<label class="input-group-addon-transparent icon-filter" aria-hidden="true" for="filter" ng-hide="isCollapsed"></label>

And when I say the Filter Navigator icon, I mean the below icon.

Any help would be appreciated, thanks!

[Tanushree Maiti]

Hi @dauger ,

Is this a customer requirement? If so, could you please share the business justification for this change?

ServiceNow has intentionally designed filtering across the platform using the funnel icon, as users commonly associate the funnel symbol with filtering functionality. This approach helps maintain consistency and provides a familiar user experience throughout the platform.

If this change is being considered primarily for learning or experimentation purposes, I would recommend selecting a different topic that does not involve modifying an out-of-the-box (OOB) ServiceNow feature.

[Ankur Bawiskar]

@dauger 

I don't think any direct way is available to change the color etc for that funnel icon

I will recommend not doing this as this is anyways old UI and many customers are moving towards new UI

but you can use UI script and change that

Something like this

addLoadEvent(changeColor);

function changeColor() {
   
    setTimeout(function() {
        var label = document.querySelector('.input-group-addon-transparent.icon-filter');
        if (label) {
            label.style.color = 'orange';
        }
    }, 1000);

}

See if that works

💡 If my response helped, please mark it as correct ✅ and close the thread 🔒— this helps future readers find the solution faster! 🙏