---
sourceDocument: Zurich ServiceNow AI Platform user interface
sourceDocumentLink: https://www.servicenow.com/docs/r/zurich/platform-user-interface

 Release :

    - zurich

ft:locale :

    - en-US

ft:publication_title :

    - Zurich ServiceNow AI Platform user interface

ft:clusterId :

    - platux

bundleId :

    - platux

workflow :

    - Platform


---

# Customize empty state images

# Customize theme-able empty state images for your theme {#ariaid-title1}

* Release version: Zurich
* 
* Updated July 31, 2025
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 minutes to read

Customize default theme-able empty state images for your Next Experience and Theme Builder themes using the theme's Imagery record.

## Before you begin

Role required: admin

## About this task

Important:  
This procedure applies only to Next Experience themes that use the now-illustration component. You can customize empty state images for Workspaces, but customization is not supported in the Core UI.

## Procedure

1. Navigate to AllNow Experience FrameworkThemes.  
   The UX Themes table is displayed.
2. Select your custom theme from the UX Themes table.  
   The UX Theme record for your chosen theme appears.
3. From the Compositional App Theme tab, select the Imagery record.
4. From the Imagery style record, enter the following empty state image theme hooks into the Style field.  

       {
           "properties": {
               "--now-illustration--add-attachment-sm--url": "",
               "--now-illustration--add-attachment-md--url": "",
               "--now-illustration--add-attachment-lg--url": "",
               "--now-illustration--add-data-sm--url": "",
               "--now-illustration--add-data-md--url": "",
               "--now-illustration--add-data-lg--url": "",
               "--now-illustration--completed-tasks-sm--url": "",
               "--now-illustration--completed-tasks-md--url": "",
               "--now-illustration--completed-tasks-lg--url": "",
               "--now-illustration--error-sm--url": "",
               "--now-illustration--error-md--url": "",
               "--now-illustration--error-lg--url": "",
               "--now-illustration--first-time-user-sm--url": "",
               "--now-illustration--first-time-user-md--url": "",
               "--now-illustration--first-time-user-lg--url": "",
               "--now-illustration--interrupted-sm--url": "",
               "--now-illustration--interrupted-md--url": "",
               "--now-illustration--interrupted-lg--url": "",
               "--now-illustration--no-data-sm--url": "",
               "--now-illustration--no-data-md--url": "",
               "--now-illustration--no-data-lg--url": "",
               "--now-illustration--no-search-results-sm--url": "",
               "--now-illustration--no-search-results-md--url": "",
               "--now-illustration--no-search-results-lg--url": "",
               "--now-illustration--offline-sm--url": "",
               "--now-illustration--offline-md--url": "",
               "--now-illustration--offline-lg--url": "",
               "--now-illustration--permissions-sm--url": "",
               "--now-illustration--permissions-md--url": "",
               "--now-illustration--permissions-lg--url": "",
               "--now-illustration--unconfigured-sm--url": "",
               "--now-illustration--unconfigured-md--url": "",
               "--now-illustration--unconfigured-lg--url": "",
               "--now-illustration--no-activities-sm--url": "",
               "--now-illustration--no-activities-md--url": "",
               "--now-illustration--no-activities-lg--url": ""
           }
       }

5. Add your custom image in one of the following ways.
   * Add image to UX Style Assets list.
     1. On the UX Style Assets tab, select New.
     2. Select the Lookup icon(![Lookup icon.]()) next to the Asset item.
     3. In the UX Theme Assets list, select New.
     4. Select the Manage Attachments icon (![Manage attachments icon]()) to add an image.
     5. When the image asset is uploaded, close the Attachments window.  
        Note:  
        Verify that your image is in SVG format.
     6. Enter the file name of the asset in the Name field and select Submit. The asset is added to the UX Style Assets list.
     7. In the UX Style Assets tab, select and hold (or right-click) the asset and select Copy sys_id.
     8. Enter the sys_id into the Style field using the following format:<kbd class="ph userinput"> "/uxta/ENTERYOURSYSID.assetx"</kbd>
     {#customize-themeable-empty-state-images__ol_dkg_qn3_qcc}
   * Add your custom image to the Images \[db_images_list.do\] table.  
     Note:  
     Verify that your image is in SVG format.
     1. For detailed instructions, see [Upload one or more images](https://www.servicenow.com/docs/VglaqvmGU~Rsg2zvyvSxHw "You can upload one image or multiple images at one time.").
     2. From the Imagery style record, enter the image file name into the Style field using the following format: <kbd class="ph userinput"> "/FILENAME.svg"</kbd>.
     {#customize-themeable-empty-state-images__ol_s42_dpl_rcc}
   {#customize-themeable-empty-state-images__choices_awg_2n3_qcc}
6. Select Update.  
   The custom images appear in your theme.
7. **Optional:** Customize the colors of your empty state images using the UX Style color record associated with your theme to override the default theme hooks.  
   For a step-by-step tutorial on editing your UX Style color record, see Exercise 3, Activity 2 and 3 of the [Next Experience Workshop](https://servicenownextexperience.github.io/labs/CCL1319-K24-Theming-Lab/ex3/activity-2) in the ServiceNow Community.  
   Note:  
   Using the default theme hooks is recommended.

*[\>]: and then