--- sourceDocument: Australia Mobile Configuration and Navigation sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/pt-BR/mobile Release : - australia ft:locale : - pt-BR ft:publication_title : - Australia Mobile Configuration and Navigation ft:clusterId : - mobile bundleId : - mobile workflow : - Development, Data and Analytics --- # Color variable support for icons # Color variable support for icons {#ariaid-title1} * Versão de lançamento: Australia * * Atualizado 12 de mar. de 2026 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 min. de leitura 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](https://servicenow-prod.fluidtopics.net/YLACb2pmXSZyC_KMUJbzAA "Use the icon UI section type to navigate to screens, launcher screens, and functions."). For details on creating icons in mobile, see [Mobile icons](https://servicenow-prod.fluidtopics.net/UAVfV1f4~hbuDo3I~qN6TA "Use icons to provide unique identifiers for navigation and actions in your mobile applications."). | | [ ] {#color-var-mobile-icons__table_st2_mtb_yvb} ## Mobile icon color guide {#color-var-mobile-icons__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. 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-var-mobile-icons__table_otd_c1q_1xb__entry__3} | Color name | Example | Color variables | |-|-|-| | Critical | ![Critical mobile icons]() | Mobile variables : * Option 1: `alert--critical-2` * Option 2: `alert--critical-3` * Option 3 (Accessible): `alert--critical-4` {#color-var-mobile-icons__ul_hqj_lzh_cxb} Web variable : * Option 1:`--now-color_alert--critical-2` * Option 2:`--now-color_alert--critical-3` * Option 3 (Accessible):`--now-color_alert--critical-4` {#color-var-mobile-icons__ul_wvy_lzh_cxb} | | High | ![High mobile icons]() | Mobile variables : * Option 1: `alert--high-2` * Option 2: `alert--high-3` * Option 3 (Accessible): `alert--high-4` {#color-var-mobile-icons__ul_lsh_rxm_cxb} Web variable : * Option 1:`--now-color_alert--high-2` * Option 2:`--now-color_alert--high-3` * Option 3 (Accessible):`--now-color_alert--high-4` {#color-var-mobile-icons__ul_msh_rxm_cxb} | | Warning | ![Warning mobile icons]() | Mobile variables : * Option 1: `alert--warning-2` * Option 2: `alert--warning-3` * Option 3 (Accessible): `alert--warning-4` {#color-var-mobile-icons__ul_hxg_5xm_cxb} Web variable : * Option 1:`--now-color_alert--warning-2` * Option 2:`--now-color_alert--warning-3` * Option 3 (Accessible):`--now-color_alert--warning-4` {#color-var-mobile-icons__ul_ixg_5xm_cxb} | | Moderate | ![Moderate mobile icons]() | Mobile variables : * Option 1: `alert--moderate-2` * Option 2: `alert--moderate-3` * Option 3 (Accessible): `alert--moderate-4` {#color-var-mobile-icons__ul_upy_vxm_cxb} Web variable : * Option 1:`--now-color_alert--moderate-2` * Option 2:`--now-color_alert--moderate-3` * Option 3 (Accessible):`--now-color_alert--moderate-4` {#color-var-mobile-icons__ul_vpy_vxm_cxb} | | Info | ![Info mobile icons]() | Mobile variables : * Option 1: `alert--info-2` * Option 2: `alert--info-3` * Option 3 (Accessible): `alert--info-4` {#color-var-mobile-icons__ul_bhs_xxm_cxb} Web variable : * Option: 1`--now-color_alert--info-2` * Option 2:`--now-color_alert--info-3` * Option 3 (Accessible):`--now-color_alert--info-4` {#color-var-mobile-icons__ul_chs_xxm_cxb} | | Positive | ![Positive mobile icons]() | Mobile variables : * Option 1: `alert--positive-2` * Option 2: `alert--positive-3` * Option 3 (Accessible): `alert--positive-4` {#color-var-mobile-icons__ul_hy3_1ym_cxb} Web variable : * Option 1:`--now-color_alert--positive-2` * Option 2:`--now-color_alert--positive-3` * Option 3 (Accessible):`--now-color_alert--positive-4` {#color-var-mobile-icons__ul_iy3_1ym_cxb} | | Low | ![Low mobile icons]() | Mobile variables : * Option 1: `alert--low-2` * Option 2: `alert--low-3` * Option 3 (Accessible): `alert--low-4` {#color-var-mobile-icons__ul_avy_bym_cxb} Web variable : * Option 1:`--now-color_alert--low-2` * Option 2:`--now-color_alert--low-3` * Option 3 (Accessible):`--now-color_alert--low-4` {#color-var-mobile-icons__ul_bvy_bym_cxb} | [Tabela 1. Alert color palette] {#color-var-mobile-icons__table_otd_c1q_1xb} {#color-var-mobile-icons__table_f5d_c1q_1xb__entry__3} | Color name | Example | Color options | |-|-|-| | Blue | ![Blue mobile icons]() | Web variable : * Option 1:`--now-color_grouped--blue-2` * Option 2:`--now-color_grouped--blue-3` * Option 3 (Accessible):`--now-color_grouped--blue-4` {#color-var-mobile-icons__ul_lqy_gym_cxb} | | Brown | ![Brown mobile icons]() | Web variable : * Option 1:`--now-color_grouped--brown-2` * Option 2:`--now-color_grouped--brown-3` * Option 3 (Accessible):`--now-color_grouped--brown-4` {#color-var-mobile-icons__ul_kcy_kym_cxb} | | Gray | ![Gray mobile icons]() | Web variable : * Option 1:`--now-color_grouped--gray-2` * Option 2:`--now-color_grouped--gray-3` * Option 3 (Accessible):`--now-color_grouped--gray-4` {#color-var-mobile-icons__ul_ols_lym_cxb} | | Green | ![Green mobile icons]() | Web variable : * Option 1:`--now-color_grouped--green-2` * Option 2:`--now-color_grouped--green-3` * Option 3 (Accessible):`--now-color_grouped--green-4` {#color-var-mobile-icons__ul_fy1_nym_cxb} | | Green-Yellow | ![Green-yellow mobile icons]() | 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` {#color-var-mobile-icons__ul_l5v_nym_cxb} | | Magenta | ![Magenta mobile icons]() | Web variable : * Option 1:`--now-color_grouped--magenta-2` * Option 2:`--now-color_grouped--magenta-3` * Option 3 (Accessible):`--now-color_grouped--magenta-4` {#color-var-mobile-icons__ul_vlk_pym_cxb} | | Orange | ![Orange mobile icons]() | Web variable : * Option 1:`--now-color_grouped--orange-2` * Option 2"`--now-color_grouped--orange-3` * Option 3 (Accessible):`--now-color_grouped--orange-4` {#color-var-mobile-icons__ul_xyn_qym_cxb} | | Pink | ![Pink mobile icons]() | Web variable : * Option 1:`--now-color_grouped--pink-2` * Option 2:`--now-color_grouped--pink-3` * Option 3 (Accessible):`--now-color_grouped--pink-4` {#color-var-mobile-icons__ul_xsm_rym_cxb} | | Purple | ![Purple mobile icons]() | Web variable : * Option 1:`--now-color_grouped--purple-2` * Option 2:`--now-color_grouped--purple-3` * Option 3 (Accessible):`--now-color_grouped--purple-4` {#color-var-mobile-icons__ul_dbl_sym_cxb} | | Teal | ![Teal mobile icons]() | Web variable : * Option 1:`--now-color_grouped--teal-2` * Option 2:`--now-color_grouped--teal-3` * Option 3 (Accessible):`--now-color_grouped--teal-4` {#color-var-mobile-icons__ul_egx_tym_cxb} | | Yellow | ![Yellow mobile icons]() | Web variable : * Option 1:`--now-color_grouped--yellow-2` * Option 2:`--now-color_grouped--yellow-3` * Option 3 (Accessible):`--now-color_grouped--yellow-4` {#color-var-mobile-icons__ul_w3p_vym_cxb} | [Tabela 2. Grouped color palette] {#color-var-mobile-icons__table_f5d_c1q_1xb}