---
sourceDocument: Australia Mobile Configuration and Navigation
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/mobile

 Release :

    - australia

ft:locale :

    - en-US

ft:publication_title :

    - Australia Mobile Configuration and Navigation

ft:clusterId :

    - mobile

bundleId :

    - mobile

workflow :

    - Development, Data and Analytics


---

# Color variable support for icon UI sections

# Color variable support for icon UI sections {#ariaid-title1}

* Release version: Australia
* 
* Updated March 12, 2026
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 1 minute to read

Learn how to use color variables to change theming in your mobile icon UI sections.

|-|-|
| Icon UI sections have a Color section with two fields to control the foreground and background colors for the element. * Background color Variable * Foreground color variable {#color-var-ui-section__ul_ovp_tkb_yvb} These two fields can be found on the following tables: * Icon section destination launcher \[sys_sg_navigation_section_destination_applet_launcher\] * Icon section destination function \[sys_sg_navigation_section_destination_button\] * Icon section destination screen \[sys_sg_navigation_section_destination_screen\] {#color-var-ui-section__ul_acr_flx_1xb} For details on creating these actions, see [Configure an icon UI section](https://servicenow-prod.fluidtopics.net/tFaWgy84xNd2Yl3wOf_TIQ "Use the icon UI section type to navigate to screens, launcher screens, and functions."). You can define any color variable from the UX Theme Properties \[sys_ux_theme_property\] table. For a list available variables see the color design guide below. |   |
[ ]

{#color-var-ui-section__table_nvp_tkb_yvb}

## Mobile icon UI section color guide {#color-var-ui-section__section_ffp_xkg_cxb}

Color variables are divided into Use the design guideline to identify the right color variable for your use case.

Alert color palette
:   Alert color palette colors highlight important statuses, states and tasks. Use alert colors to communicate a specific meaning rather than for decoration or organization.

Grouped color palette
:   Grouped color palette colors follow color conventions in a line of industry. Use these colors to show that the colored item is associated with a specific industry or line of business. The meaning of each color depends on
    context, but should remain consistent within your app.

## Alert color palette {#color-var-ui-section__section_d55_nbh_cxb}

{#color-var-ui-section__table_otd_c1q_1xb__entry__4}

| Color name | Color | Example | Color options |
|-|-|-|-|
| Primary | ![Primary icon color]() | ![Primary icon example]() | Mobile variable :   `primary` Web variable :   `--now-color--primary-1 ` |
| Critical | ![Critical icon color]() | ![Critical icon example]() | Mobile variable :   `alert--critical-2` Web variable :   `--now-color_alert--critical-2` |
| High | ![High icon color]() | ![High icon example]() | Mobile variable :   `alert--high-2` Web variable :   `--now-color_alert--high-2` |
| Warning | ![Warning icon color]() | ![Warning icon example]() | Mobile variable :   `alert--warning-2` Web variable :   `--now-color_alert--warning-2` |
| Moderate | ![Moderate icon color]() | ![Moderate icon example]() | Mobile variable :   `alert--moderate-2` Web variable :   `--now-color_alert--moderate-2` |
| Info | ![Info icon color]() | ![Info icon example]() | Mobile variable :   `alert--info-2` Web variable :   `--now-color_alert--info-2` |
| Positive | ![Positive icon color]() | ![Positive icon example]() | Mobile variable :   `alert--positive-2` Web variable :   `--now-color_alert--positive-2` |
| Low | ![Low icon color]() | ![Low icon example]() | Mobile variable :   `alert--low-2` Web variable :   `--now-color_alert--low-2` |
[ ]

{#color-var-ui-section__table_otd_c1q_1xb}

## Grouped color palette {#color-var-ui-section__section_dff_pbh_cxb}

{#color-var-ui-section__table_eff_pbh_cxb__entry__4}

| Color name | Color | Example | Color options |
|-|-|-|-|
| Blue | ![Blue icon color]() | ![Blue icon example]() | Web variable :   `--now-color_grouped--blue-2` |
| Brown | ![Brown icon color]() | ![]() | Web variable :   `--now-color_grouped--brown-2` |
| Gray | ![Gray icon color]() | ![Gray icon example]() | Web variable :   `--now-color_grouped--gray-2` |
| Green | ![Green icon color]() | ![Green icon example]() | Web variable :   `--now-color_grouped--green-2` |
| Green-Yellow | ![Green-yellow icon color]() | ![Green-yellow icon example]() | Web variable :   `--now-color_grouped--green-yellow-2` |
| Magenta | ![Magenta icon color]() | ![Magenta icon example]() | Web variable :   `--now-color_grouped--magenta-2` |
| Orange | ![Orange icon color]() | ![Orange icon example]() | Web variable :   `--now-color_grouped--orange-2` |
| Pink | ![Pink icon color]() | ![Pink icon example]() | Web variable :   `--now-color_grouped--pink-2` |
| Purple | ![Purple icon color]() | ![Purple icon example]() | Web variable :   `--now-color_grouped--purple-2` |
| Teal | ![Teal icon color]() | ![Teal icon example]() | Web variable :   `--now-color_grouped--teal-2` |
| Yellow | ![Yellow icon color]() | ![Yellow icon example]() | Web variable :   `--now-color_grouped--yellow-2` |
[ ]

{#color-var-ui-section__table_eff_pbh_cxb}