Icon Library

Using Icons | Status Icons | Navigation Icons | Action Icons

Using Icons

Judicious use of easily understood icons can enhance the usability and overall user experience of an application's user interface. Icons can provide quick and easily understood graphical cues to functions and status of information, while at the same time conserving space and improving the look and feel.

However, overuse of icons or the use of overly complex icons can be detrimental to the usability of an application. Colorful icons, while they can be individually appealing, can quickly overwhelm the user visually. Additionally, using a large number of icons can be overwhelming to users of varying skill levels. Therefore, icons should be used sparingly. It is a clear case of "less is more" when it comes to icons.

That being said, in the case of mobile applications, where the user interface "real estate" is highly limited, and therefore precious, the benefits of providing simple, strong, compact visual cues to users cannot be ignored.

The icons presented here are based on standard SAP icons.. However, they have been optimized for mobile applications—they are small, designed with a simple color scheme, and suitable for non-color displays.

The following section contains the complete list of icons allowed for white-collar worker PDAs.

 

Status Icons

Icon
Name
Description
Status Green Status Green Represents that the business object has been synchronized successfully
Status Yellow Status Yellow Represents that the business object has been sent to the server, but that no confirmation has been received from the server
Status Red Status Red Represents that an error occurred while synchronizing the business object with the server
Status Null Status Inactive Represents that the business object has not yet been synchronized

During synchronization, incoming items from the server are listed separately from outgoing items. In the interests of simplicity and usability, only incoming errors will be marked with an icon.

All icons were created with a transparent background and are available in the Icon Archive.

 

Navigation Icons

Icon
Name
Description
Back
Back Represents the Back navigation function within an application.
Find Represents the function for searching.
F4 Help
Help Represents the function for calling Help or Search Help screens (including date and time pickers).
Next Page
Next Page Represents the function for displaying the next page (month) in the date picker
Previous Page
Previous Page Represents the function for displaying the previous page (month) in the date picker

First Page Enabled / First Page Disabled

First Page (enabled/disabled) Represents the function First Page for pagination within a table or group
Page Up Enabled / Page Up Disabled
Page Up (enabled/disabled) Represents the function Page Up for pagination within a table or group
Page Down Enabled / Page Down Disabled
Page Down (enabled/disabled) Represents the function Page Down for pagination within a table or group
Last Page Enabled / Last Page Disabled
Last Page (enabled/disabled) Represents the function Last Page for pagination within a table or group

Icons must not be used to represent navigation functions that are not listed here. They should be represented with hyperlinks or buttons.

All icons were created with a transparent background and are available in the Icon Archive.

 

Action Icons

Icon
Name
Description
New/Create
New
Represents the function for creating a new business object.
Copy
Copy Represents the function for copying an existing business object.
Edit/Change
Edit Represents the function for editing an existing business object.
Save
Save Represents the function for saving a new or changed business object.
Cancel
Cancel Represents the function for canceling the creation or editing of a business object.
Delete
Delete Represents the function for deleting an unsynchronized business object, or marking a previously synchronized business object for deletion.

Action icons ar located on the object header. All icons were created with a transparent background and are available in the Icon Archive file.

 

top top

Source:  SAP Style Guide for White-Collar Worker PDAs