Modify ServiceNow’s Employee Center Out-of-the-box Icons

Ceanna — Wed, 06 May 2026 13:46:26 GMT

Modify ServiceNow’s Employee Center Out-of-the-box Icons

Employee Center comes with some icons out-of-the-box, but they might not meet your organization's branding needs. When it comes to modifying or replacing the icons on the Employee Center out-of-box instance, there are many different approaches you can take. This article outlines a couple of those options. Anytime you are choosing to modify something in your instance, ensure you are following both ServiceNow and design best practices. If you have questions around best practices, talk to your ServiceNow account team.

Disclaimer: This guidance outlines a few of many approaches for updating icons and is not official ServiceNow documentation.

Recommended Skillsets: UX Designer, Experience with Figma + ServiceNow Service Portal Experience

Option 1: Modify the Existing Icons to Match your Organization’s Branding

This section provides step-by-step guidance on how to apply your own branding colors to the existing ServiceNow demo icons in EC.

Considerations before getting started

Pros:

Limited ServiceNow platform/ technical knowledge required

Cons:

Need Figma

Basic Figma knowledge is recommended. For project teams with limited design resources, it is recommended to check-in-house for a UI Designer or graphic designer who may be able to support this initiative.

This approach is not very scalable. Meaning, what you see if what you get – ServiceNow provides these icons for out-of-box topics. In the future, if you create a new topic that doesn't match an existing icon, you might not have a corresponding icon to match it with.

Step 1: Prepare Your Icon Design in Figma:

Download the EC Components file from the Figma Community Site.
Open the “Widget assets” page and locate the Icons section
Reference your organization's taxonomy (mega menu topics) to align each icon with the appropriate topic.
Override the existing theme colors as needed.
Reference your organization's branding/color palette to ensure consistency with your brand guidelines.
Replace the existing hex values with the hex values from your organizations color pallet, which can usually be found in brand guidelines or internal design systems documentation.
IMPORTANT: Reference design and accessibility leading practices: Ensure icons have high contrast and are compliant with accessibility guidelines. Avoid light colors that might disappear or lose contrast.

Step 2: Export Icons from Figma

Once you are satisfied with the look of your icons, export each icon. It is important to maintain appropriate naming conventions (this will make it easier to associate them to the corresponding topic when you upload them into the platform later on).
When exporting, make the background transparent/ export as a PNG (Note: try unchecking the show export option under “Fill” for a clear icon).
Export
Organize your exported icons in a structured file system for easier management and future updates. Example:

Step 3: Upload Icons to ServiceNow:

Log into your ServiceNow platform. In the Filter Navigator, type in "taxonomy" and select "Taxonomies" to locate your active taxonomy record.
Choose the relevant subtopic (e.g., Software under Technology Services) where you want the icon to appear.
Starting with your first topic, upload each icon to the corresponding subtopic.

Step 4: Validate/Test

Navigate to the Employee Center in your ServiceNow platform. Validate your icon has been updated, renders correctly from the portal view, is clear and uses the appropriate pixels.

Consider Alternative Icon Sources

If you prefer not to use the ServiceNow demo icons or wish to create custom icons, consider using pre-made icons from sources like Font Awesome or Material Design.
See option 2 below for more details on a method of streamlining the use of Font Awesome icons.

Option 2: Replace Icons Using an icon kit from Font Awesome

Considerations before getting started:

Pros:

2k+ icons available to use for free

Better scalability (as you build new topics in your Employee Center in the future), as there are hundreds of icons to choose from.

Cons:

Time consuming if done manually (opposed to script method linked below)

Font Awesome Pro license required if you want more variety and bigger icon library

Step 1: View Icons in Font Awesome

Go to the Font Awesome site
Search for the desired icon
Use the styling tools to design your icon - refer to Font Awesome documentation for additional support
Upload it to your taxonomy topic record- Follow Steps 3 and 4 above

Follow the steps in this article for a more automated and quicker method (using a script) that will update the colors of your icons locally before uploading them. Note: Some technical skills required or some general understanding of PowerShell (PC)- Mac users can use this method as well (using Homebrew), but the steps will vary slightly.

Maintain Consistency and Accessibility

Whichever approach you take to modify your Employee Center icons, remember to:

Ensure that all icons across the platform have a consistent look and feel by following your organization's internal design systems.
Regularly review icons and update them as needed to maintain a clean and accessible design.
Ensure that new topics created in the platform get assigned icons to as you scale and create new topics.

Read this article to learn more about using Figma to design your Employee Center.

Have questions? Let me know below!

post Modify ServiceNow’s Employee Center Out-of-the-box Icons in User Experience SIG

Modify ServiceNow’s Employee Center Out-of-the-box Icons