---
sourceDocument: Yokohama ServiceNow AI Platform user interface
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/yokohama/platform-user-interface

 Release :

    - yokohama

ft:locale :

    - en-US

ft:publication_title :

    - Yokohama ServiceNow AI Platform user interface

ft:clusterId :

    - platux

bundleId :

    - platux

workflow :

    - Platform


---

# Override empty state illustrations with custom images

# Override empty state illustrations with custom images {#ariaid-title1}

Release version: Yokohama  
Updated March 19, 2025  
![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 minutes to read  
Modify or override the default empty state illustrations with your own custom images to ensure that visual elements reflect your company's branding.

## Before you begin

To make your image theme-able, add the following two design tokens to your code using your preferred text editor before uploading the custom SVG to Theme Builder.

*

      --empty-state--main-object--fill

*

      --empty-state--main-object---outline

{#override-empty-state-illustrations__ul_elk_3cs_hfc} For more information, see [Working with Image styles](https://servicenow-prod.fluidtopics.net/6YrLMAvyXZk1NySGEI2qpQ "Image styles enable you to experiment with different color schemes for illustrations and replace default illustrations with your own custom images. The Image styles feature provides flexibility in customizing the visual elements of your theme.").

Role required: admin

## About this task

Important:  
Custom images apply to Workspaces and are not supported in the Core UI.

## Procedure

1. Navigate to AllNow Experience FrameworkThemesTheme Builder.  
   The Theme Builder landing page opens in a new tab and is displayed in the Home page view.
2. Use the Page drop-down list to select the Editor page view.  
   Figure 1. Editor page view
3. From the Theme drop-down list, select the theme that you want to edit.
4. Select the Image styles tab from the general styles panel.  
   The empty state illustrations are displayed on the main stage and grouped by type.Figure 2. Image styles tab selected
5. Use one of the following options to select the empty state illustration that you want to override.  
   * Select the Filter (![Filter icon.]()) icon and expand the empty states category to select the specific empty state illustration that you want to override.
   * Scroll through the list of empty state illustrations within the main stage.
   {#override-empty-state-illustrations__ul_yvl_s35_bfc}  
   The property panel opens automatically.
6. From the property panel, select the Images tab.  
   Figure 3. Property panel Images tab
7. Select either the large, medium, or small image file of the illustration you want to override.  
   Note:  
   You can only override one image size at a time.  
   The upload images modal appears.Figure 4. Upload images modal
8. Use one of the following options to upload your custom image:
   * Select Browse, choose your custom image file from your computer's file browser, and select Open.
   * Drag your custom image file from your computer's file browser and drop the image directly into the modal.

   {#override-empty-state-illustrations__choices_ubj_tfz_v2c}  
   Refer to the upload image modal for size and format limitations. If your custom image doesn't meet the required size and format, your image isn't saved.Figure 5. Upload image modal with size and format limitations
9. Select Save.  
   Your custom image appears on the main stage within the empty state category you have chosen.Figure 6. Add data empty state category with custom image displayed Figure 7. Add data empty state category with custom image displayed (design tokens applied to image)
10. **Optional:** Select the Remove override symbol if you want to restore the default empty state illustration.  
    Figure 8. Image Remove override
11. **Optional:** Preview your edits before publishing your theme to your instance.
    1. Select the Experience preview tab from the Global styles panel.  
       ![Experience preview tab.]()
    2. Select the experience that you want to preview from the Experience drop-down list.  
    3. Select the Open in new tab icon ![]() to open the experience in a new tab.
    {#override-empty-state-illustrations__substeps_ylj_jqn_w2c}

## Result

Once you've uploaded your custom image with the two design tokens applied, you can customize the colors using Theme Builder just as you would for default empty state illustrations. For information on customizing colors, see [Customize the colors for empty state illustrations and custom images](https://servicenow-prod.fluidtopics.net/g5DOb~XXRrnIJkbBHzS2dw "Customize and control the colors automatically applied to empty state illustrations and your custom images to keep your visual experience engaging while maintaining brand recognition.").

If your theme is published, your custom images are visible to users who have your theme applied upon refresh. For more information about publishing themes, see [Publish your themes with Theme Builder](https://servicenow-prod.fluidtopics.net/W5uD0XSblTxIjcUPxAXNSw "Publish multiple themes to your web instance or a single theme to your mobile instance to reflect your company's brand.").

*[\>]: and then