Color variable support for icons

  • Release version: Zurich
  • Updated July 31, 2025
  • 2 minutes to read
    • Summarize
    Summarized using AI
    This content was generated using new OpenAI-powered functionality. Results are provided on an as is basis and are not guaranteed to be accurate or complete.

    Summary of Color variable support for icons

    This feature enables ServiceNow customers to customize the appearance of mobile map screen icons by applying color variables. Using theFontColorVariablestyle option, you can assign colors defined in the UX Theme Properties (sysuxthemeproperty) table to mobile icons, enhancing theming consistency and visual communication within your mobile applications.

    Show full answer Show less

    Using Color Variables for Mobile Icons

    In mobile icon configuration, the Set appearance section allows you to specify a color variable instead of a fixed color. This approach leverages predefined color variables from ServiceNow’s UX Theme Properties, ensuring alignment with your overall design system and accessibility standards.

    To select appropriate colors, refer to the color design guide, which categorizes variables into two main palettes:

    • Alert color palette: Used for highlighting important statuses, states, and tasks with specific meanings rather than decoration.
    • Grouped color palette: Follows industry color conventions to denote association with specific industries or business lines. Consistency in usage across your app is recommended.

    Alert Color Palette

    The alert palette includes colors such as Critical, High, Warning, Moderate, Info, Positive, and Low. Each color offers three options:

    • Two standard mobile variables
    • One accessible option designed to improve navigability for icons without text

    These variables are named consistently, for example, alert--critical-2, alert--critical-3, and the accessible option alert--critical-4 for mobile. Corresponding web variables follow a similar naming convention with the prefix --now-coloralert--.

    Grouped Color Palette

    This palette provides a range of colors including Blue, Brown, Gray, Green, Green-Yellow, Magenta, Orange, Pink, Purple, Teal, and Yellow. Similar to the alert palette, each grouped color offers three variable options (two standard and one accessible) to ensure consistent use and accessibility in your mobile icons.

    Variable names follow the pattern --now-colorgrouped--colorname-level for web and grouped--colorname-level for mobile.

    Practical Benefits for ServiceNow Customers

    • Consistent Theming: Apply standardized color variables to icons, maintaining visual consistency across mobile applications.
    • Improved Accessibility: Use accessible color options to enhance usability for all users, particularly for icons lacking text.
    • Clear Status Communication: Utilize alert colors to effectively convey important statuses and task priorities.
    • Industry Alignment: Use grouped palette colors to reflect industry-specific color conventions, reinforcing business context.

    Next Steps

    To implement these color variables:

    • Access the mobile icon’s Set appearance section and select the FontColorVariable style option.
    • Choose the desired color variable from the UX Theme Properties table based on your use case and accessibility requirements.
    • Refer to the color design guide to select the appropriate alert or grouped palette variable.
    • Test icon appearance in your mobile map screens to ensure clarity and consistency.

    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.

    		 Color variable used in an icon

    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 1. Alert color palette
    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
    Web variable
    • Option 1:--now-color_alert--critical-2
    • Option 2:--now-color_alert--critical-3
    • Option 3 (Accessible):--now-color_alert--critical-4
    High High mobile icons
    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
    Warning Warning mobile icons
    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
    Moderate Moderate mobile icons
    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
    Info Info mobile icons
    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
    Positive Positive mobile icons
    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
    Low Low mobile icons
    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
    Table 2. Grouped color palette
    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
    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
    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
    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
    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
    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
    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
    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
    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
    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
    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