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

[Ceanna]

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

Employee Center includes a set of out-of-the-box icons, but they may not fully align with your organization’s brand or visual design standards. There are several approaches you can take to customize or replace these icons within your Employee Center experience. This article outlines the available options and key considerations. As with any customization, be sure to follow ServiceNow-recommended practices and your organization’s design standards to maintain consistency, usability, and upgradeability.

 

UPDATED 2026:

Option 1:  Latest recommended approach- Use CDN URLs to reduce the load time of the banner images, background images, and app icons on the E...

Option 2: Modify Existing Icons to Match Your Organization’s Branding

Pros

• Requires minimal ServiceNow technical knowledge.

• Maintains consistency with the OOTB Employee Center icon style.

Cons

• Requires Figma and basic design knowledge. Consider involving a UI/UX or graphic designer if needed.

• Limited scalability. New topics may not have a suitable matching OOTB icon, requiring additional custom icon creation.

Step 1: Prepare Your Icon Design in Figma: 

1. Download the EC Components file from the Figma Community Site.  
2. Open the “Widget assets” page and locate the Icons section 
3. Reference your organization's taxonomy (mega menu topics) to align each icon with the appropriate topic.  
4. Override the existing theme colors as needed. 
5. Reference your organization's branding/color palette to ensure consistency with your brand guidelines. 
6. 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. 
7. 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

1. Export icons, maintaining appropriate naming conventions (this will make it easier to associate them to the corresponding topic when you upload them into the platform later on).  
2. When exporting, make the background transparent/ export as a PNG (Note: try unchecking the show export option under “Fill” for a clear icon).  
3. Export

Step 3: Upload Icons to ServiceNow: 

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

Step 4: Validate/Test

1. 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 3: Replace Icons Using an icon kit (ex: 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

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

Option 2: Replace Icons Using an icon kit (ex: ServiceNow Icon Library)

Or use ServiceNow's Icon library.

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:

1. Ensure that all icons across the platform have a consistent look and feel by following your organization's internal design systems.  
2. Regularly review icons and update them as needed to maintain a clean and accessible design. 
3. 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!