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

[Ceanna]

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. Remember, 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.

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: 

1. Download the EC Templates file from the Figma Community Site.  
2. Open the “Topic 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 Polaris theme colors. 
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. 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).  
2. When exporting, make the background transparent by unchecking the show export option under “Fill” for a clear icon.  
3. Export
4. Organize your exported icons in a structured file system for easier management and future updates. Example:

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 and appears correctly from the portal view. 

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

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

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!