Color variable support for icons
reference australia Updated Sep 10, 2026 3 min read color-var-mobile-icons.md
Learn how to use color variables to change theming in your mobile map screens
|
Mobile icons have a Set appearance section used to define the appearance of your icons. Use the FontColorVariable style option to use a color variable a color. Using this style 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. For details on creating map screens, see Configure an icon UI section. For details on creating icons in mobile, see Mobile icons. |
[Omitted image "color-var-example-4.png"] Alt text: Color variable used in an icon |
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.
Each support color has three options, including an assessable option. Consider using the accessible color option for icons that do not contain text to improve navigability for your users.
|
Color name |
Example |
Color variables |
|---|---|---|
|
Critical |
[Omitted image "icons-mobile-critical.png"] Alt text: Critical mobile icons |
|
|
High |
[Omitted image "icons-mobile-high.png"] Alt text: High mobile icons |
|
|
Warning |
[Omitted image "icons-mobile-warning.png"] Alt text: Warning mobile icons |
|
|
Moderate |
[Omitted image "icons-mobile-moderate.png"] Alt text: Moderate mobile icons |
|
|
Info |
[Omitted image "icons-mobile-info.png"] Alt text: Info mobile icons |
|
|
Positive |
[Omitted image "icons-mobile-positive.png"] Alt text: Positive mobile icons |
|
|
Low |
[Omitted image "icons-mobile-low.png"] Alt text: Low mobile icons |
|
|
Color name |
Example |
Color options |
|---|---|---|
|
Blue |
[Omitted image "icons-mobile-blue.png"] Alt text: Blue mobile icons |
|
|
Brown |
[Omitted image "icons-mobile-brown.png"] Alt text: Brown mobile icons |
|
|
Gray |
[Omitted image "icons-mobile-gray.png"] Alt text: Gray mobile icons |
|
|
Green |
[Omitted image "icons-mobile-green.png"] Alt text: Green mobile icons |
|
|
Green-Yellow |
[Omitted image "icons-mobile-green-yellow.png"] Alt text: Green-yellow mobile icons |
|
|
Magenta |
[Omitted image "icons-mobile-magenta.png"] Alt text: Magenta mobile icons |
|
|
Orange |
[Omitted image "icons-mobile-orange.png"] Alt text: Orange mobile icons |
|
|
Pink |
[Omitted image "icons-mobile-pink.png"] Alt text: Pink mobile icons |
|
|
Purple |
[Omitted image "icons-mobile-purple.png"] Alt text: Purple mobile icons |
|
|
Teal |
[Omitted image "icons-mobile-teal.png"] Alt text: Teal mobile icons |
|
|
Yellow |
[Omitted image "icons-mobile-yellow.png"] Alt text: Yellow mobile icons |
|
371 lines · 9.0 KB
---
title: Color variable support for icons
description: Learn how to use color variables to change theming in your mobile map screens
locale: en-US
canonical_url: https://www.servicenow.com/docs/r/australia/mobile/color-var-mobile-icons.html
release: australia
topic_type: reference
last_updated: "2026-09-10"
reading_time_minutes: 3
breadcrumb: [Color theme considerations, Configure theming, Next Experience theming, Configuring the Mobile Platform, Mobile Platform]
---
# Color variable support for icons
Learn how to use color variables to change theming in your mobile map screens
<table id="table_st2_mtb_yvb"><tbody><tr><td>
Mobile icons have a **Set appearance** section used to define the appearance of your icons. Use the **FontColorVariable** style option to use a color variable a color.
Using this style 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.
For details on creating map screens, see [Configure an icon UI section](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/mobile/sg-ui-section-config-navig.md).
For details on creating icons in mobile, see [Mobile icons](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/mobile/sg-mobile-icon.md).
</td><td>
\[Omitted image "color-var-example-4.png"\] Alt text: Color variable used in an icon
</td></tr></tbody>
</table>## Mobile icon color guide
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.
Each support color has three options, including an assessable option. Consider using the accessible color option for icons that do not contain text to improve navigability for your users.
<table id="table_otd_c1q_1xb"><thead><tr><th>
Color name
</th><th>
Example
</th><th>
Color variables
</th></tr></thead><tbody><tr><td>
Critical
</td><td>
\[Omitted image "icons-mobile-critical.png"\] Alt text: Critical mobile icons
</td><td>
- **Mobile variables**
- Option 1: `alert--critical-2`
- Option 2: `alert--critical-3`
- Option 3 \(Accessible\): `alert--critical-4`
- **Web variable**
- Option 1:`--now-color_alert--critical-2`
- Option 2:`--now-color_alert--critical-3`
- Option 3 \(Accessible\):`--now-color_alert--critical-4`
</td></tr><tr><td>
High
</td><td>
\[Omitted image "icons-mobile-high.png"\] Alt text: High mobile icons
</td><td>
- **Mobile variables**
- Option 1: `alert--high-2`
- Option 2: `alert--high-3`
- Option 3 \(Accessible\): `alert--high-4`
- **Web variable**
- Option 1:`--now-color_alert--high-2`
- Option 2:`--now-color_alert--high-3`
- Option 3 \(Accessible\):`--now-color_alert--high-4`
</td></tr><tr><td>
Warning
</td><td>
\[Omitted image "icons-mobile-warning.png"\] Alt text: Warning mobile icons
</td><td>
- **Mobile variables**
- Option 1: `alert--warning-2`
- Option 2: `alert--warning-3`
- Option 3 \(Accessible\): `alert--warning-4`
- **Web variable**
- Option 1:`--now-color_alert--warning-2`
- Option 2:`--now-color_alert--warning-3`
- Option 3 \(Accessible\):`--now-color_alert--warning-4`
</td></tr><tr><td>
Moderate
</td><td>
\[Omitted image "icons-mobile-moderate.png"\] Alt text: Moderate mobile icons
</td><td>
- **Mobile variables**
- Option 1: `alert--moderate-2`
- Option 2: `alert--moderate-3`
- Option 3 \(Accessible\): `alert--moderate-4`
- **Web variable**
- Option 1:`--now-color_alert--moderate-2`
- Option 2:`--now-color_alert--moderate-3`
- Option 3 \(Accessible\):`--now-color_alert--moderate-4`
</td></tr><tr><td>
Info
</td><td>
\[Omitted image "icons-mobile-info.png"\] Alt text: Info mobile icons
</td><td>
- **Mobile variables**
- Option 1: `alert--info-2`
- Option 2: `alert--info-3`
- Option 3 \(Accessible\): `alert--info-4`
- **Web variable**
- Option: 1`--now-color_alert--info-2`
- Option 2:`--now-color_alert--info-3`
- Option 3 \(Accessible\):`--now-color_alert--info-4`
</td></tr><tr><td>
Positive
</td><td>
\[Omitted image "icons-mobile-positive.png"\] Alt text: Positive mobile icons
</td><td>
- **Mobile variables**
- Option 1: `alert--positive-2`
- Option 2: `alert--positive-3`
- Option 3 \(Accessible\): `alert--positive-4`
- **Web variable**
- Option 1:`--now-color_alert--positive-2`
- Option 2:`--now-color_alert--positive-3`
- Option 3 \(Accessible\):`--now-color_alert--positive-4`
</td></tr><tr><td>
Low
</td><td>
\[Omitted image "icons-mobile-low.png"\] Alt text: Low mobile icons
</td><td>
- **Mobile variables**
- Option 1: `alert--low-2`
- Option 2: `alert--low-3`
- Option 3 \(Accessible\): `alert--low-4`
- **Web variable**
- Option 1:`--now-color_alert--low-2`
- Option 2:`--now-color_alert--low-3`
- Option 3 \(Accessible\):`--now-color_alert--low-4`
</td></tr></tbody>
</table><table id="table_f5d_c1q_1xb"><thead><tr><th>
Color name
</th><th>
Example
</th><th>
Color options
</th></tr></thead><tbody><tr><td>
Blue
</td><td>
\[Omitted image "icons-mobile-blue.png"\] Alt text: Blue mobile icons
</td><td>
- **Web variable**
- Option 1:`--now-color_grouped--blue-2`
- Option 2:`--now-color_grouped--blue-3`
- Option 3 \(Accessible\):`--now-color_grouped--blue-4`
</td></tr><tr><td>
Brown
</td><td>
\[Omitted image "icons-mobile-brown.png"\] Alt text: Brown mobile icons
</td><td>
- **Web variable**
- Option 1:`--now-color_grouped--brown-2`
- Option 2:`--now-color_grouped--brown-3`
- Option 3 \(Accessible\):`--now-color_grouped--brown-4`
</td></tr><tr><td>
Gray
</td><td>
\[Omitted image "icons-mobile-gray.png"\] Alt text: Gray mobile icons
</td><td>
- **Web variable**
- Option 1:`--now-color_grouped--gray-2`
- Option 2:`--now-color_grouped--gray-3`
- Option 3 \(Accessible\):`--now-color_grouped--gray-4`
</td></tr><tr><td>
Green
</td><td>
\[Omitted image "icons-mobile-green.png"\] Alt text: Green mobile icons
</td><td>
- **Web variable**
- Option 1:`--now-color_grouped--green-2`
- Option 2:`--now-color_grouped--green-3`
- Option 3 \(Accessible\):`--now-color_grouped--green-4`
</td></tr><tr><td>
Green-Yellow
</td><td>
\[Omitted image "icons-mobile-green-yellow.png"\] Alt text: Green-yellow mobile icons
</td><td>
- **Web variable**
- Option 1:`--now-color_grouped--green-yelow-2`
- Option 2:`--now-color_grouped--green-yelow-3`
- Option 3 \(Accessible\):`--now-color_grouped--green-yelow-4`
</td></tr><tr><td>
Magenta
</td><td>
\[Omitted image "icons-mobile-magenta.png"\] Alt text: Magenta mobile icons
</td><td>
- **Web variable**
- Option 1:`--now-color_grouped--magenta-2`
- Option 2:`--now-color_grouped--magenta-3`
- Option 3 \(Accessible\):`--now-color_grouped--magenta-4`
</td></tr><tr><td>
Orange
</td><td>
\[Omitted image "icons-mobile-orange.png"\] Alt text: Orange mobile icons
</td><td>
- **Web variable**
- Option 1:`--now-color_grouped--orange-2`
- Option 2"`--now-color_grouped--orange-3`
- Option 3 \(Accessible\):`--now-color_grouped--orange-4`
</td></tr><tr><td>
Pink
</td><td>
\[Omitted image "icons-mobile-pink.png"\] Alt text: Pink mobile icons
</td><td>
- **Web variable**
- Option 1:`--now-color_grouped--pink-2`
- Option 2:`--now-color_grouped--pink-3`
- Option 3 \(Accessible\):`--now-color_grouped--pink-4`
</td></tr><tr><td>
Purple
</td><td>
\[Omitted image "icons-mobile-purple.png"\] Alt text: Purple mobile icons
</td><td>
- **Web variable**
- Option 1:`--now-color_grouped--purple-2`
- Option 2:`--now-color_grouped--purple-3`
- Option 3 \(Accessible\):`--now-color_grouped--purple-4`
</td></tr><tr><td>
Teal
</td><td>
\[Omitted image "icons-mobile-teal.png"\] Alt text: Teal mobile icons
</td><td>
- **Web variable**
- Option 1:`--now-color_grouped--teal-2`
- Option 2:`--now-color_grouped--teal-3`
- Option 3 \(Accessible\):`--now-color_grouped--teal-4`
</td></tr><tr><td>
Yellow
</td><td>
\[Omitted image "icons-mobile-yellow.png"\] Alt text: Yellow mobile icons
</td><td>
- **Web variable**
- Option 1:`--now-color_grouped--yellow-2`
- Option 2:`--now-color_grouped--yellow-3`
- Option 3 \(Accessible\):`--now-color_grouped--yellow-4`
</td></tr></tbody>
</table>| title | Color variable support for icons |
| description | Learn how to use color variables to change theming in your mobile map screens |
| locale | en-US |
| canonical_url | https://www.servicenow.com/docs/r/australia/mobile/color-var-mobile-icons.html |
| release | australia |
| topic_type | reference |
| last_updated | 2026-09-10 |
| reading_time_minutes | 3 |
| breadcrumb | Color theme considerationsConfigure themingNext Experience themingConfiguring the Mobile PlatformMobile Platform |