Mobile icons - Product Documentation: Vancouver

Mobile icons

<a class="link" href="../../../administer/tablet-mobile-ui/concept/mobile-config-navigation.html" title="Access your instance from anywhere using the ServiceNow Mobile Platform. The Mobile Platform enables you to create customized mobile experiences on the Now Mobile and Mobile Agent apps. Using these apps, your users access custom reports and can execute multiple tasks, enabling them to perform their work from anywhere, at any time.">Mobile Platform > Building and configuring mobile apps >

Mobile icons

Use icons to provide unique identifiers for navigation and actions in your mobile applications.

Icons can be used in the following places in mobile apps.

Note: To find a list of icon codes, see the topics for the icon font family you want to use in the Mobile icon reference . For a visual introduction to the mobile icons, see Mobile UX Improvement with Icon Sections , a lesson in the ServiceNow Community Mobile App Academy on YouTube.com.

navigation bars buttons cards and card records tiles in the icon section of apps items in lists quick action functions links to employee profiles

Icon types There are three basic types of icons.

Font icons User icons Image icons

Each type is designed to be used for distinct purposes and locations in your mobile apps. For visual examples of these icons, see the Mobile icon reference .

Font icons Font icons are the largest group of icons. There are several font families which are designed for specific uses.

now-mobile-icons font family

These icons are designed to be used in screens. Use them for lists, section destinations that go to list screens and browser screens. Use these icons to represent a work flow or a screen that you want users to navigate to.

now-mobile-icons-cards font family

Use these icons in the body of cards.

now-mobile-icons-buttons font family

These icons are designed to be used for functions. They can be used on buttons that are located on cards or for quick actions.

now-mobile-icons-ALPnavbar font family

These icons appear in the upper right corner of your mobile screen and are used as navigation to another screen.

Image icons Image icons are not font-type icons. They are designed to be used on navigation tabs and on image-type section destinations. These are the same section destinations that font icons from the now-mobile-icons font family are used on.

For information about configuring the icon section destination, see Adding images to an icon section .

User icons These icons represent the logged-in user and are used to launch the logged-in user's profile. They can be used on a head function of a launcher screen. They cannot be used in header functions of other screen types such as list, calendar, or map screens.

Configure font type icons Configure font type icons that can be used in a variety of places in mobile apps. For example, you can use font type icons in screens, cards, functions for quick actions, and navigation bars and tabs. Configure a font icon to use a theme variable to define its color Specify the CSS custom property of a sys_ux_theme record to define the color of a font icon. Configure using a font icon in a mobile app Use Mobile App Builder to configure mobile apps that use a font family icon. Configure user type icons Configure user icons that can be used to launch the user profile of the logged in user in mobile apps. Configure using a user icon in a mobile app After you configure a user type icon, you must use Mobile App Builder to configure a header function in a mobile app to use the icon. Configure an image icon for a navigation bar Use Mobile App Builder to configure an image type icon that can be used in navigation bars on mobile apps. Configure using an image icon in a screen Use Mobile App Builder to configure a screen in your mobile app to an image icon. Mobile icon reference Use Mobile App Builder to insert these icons in your mobile apps.

Parent Topic: Mobile styles