Introduction

SAP Analytics Cloud and Data Warehouse Cloud use their own icon font: FPA-icons. The font includes generic icons from the SAP-icon font and Product specific symbols which have been specifically made for our application. The font is centrally hosted and embedded in our product code.

Light Theme Icons

The design language for icons used within SAP products is created to work across all supported browsers, devices and operating systems. The style can be described as: Simple, Fresh, Serious, and Neutral.

All icons follow the Fiori Icon Design Guidelines. They are designed in a 16px grid with a main line thickness of 1px. Different to SAP-icons, some of our FPA-icons may run a bit wider or narrower than 16 x 16px. This is caused due some very specific icon requests, which are difficult to fit into a tiny square, or the symbol just doesn’t need the full width in order to look visually balanced to other icons in the font.

Skinnier Icon 001.jpg

Skinnier Icon

16px by 16px Icon 001.jpg

Default Size (16px by 16px Icon)

Wider Icon 001.jpg

Wider Icon

Icon are used in many different areas of the application. Some key areas where it is okay to use an icon are in

toolbars, buttons, menus, and drop-downs.

Navigation Example.jpg

Navigation

Shown here, is an example of the modules navigation menu. Icons are used here to differentiate between modules and allow for easier scanning of tools.

Buttons Example.jpg

Buttons

These are buttons which are used in the styling panel in stories. A user can select a button in order to style their font in a text widget.

Dropdown Example.jpg

Dropdown Menu

Located in stories, is a dropdown menu where a user can select a specific type of widget which they would want to add to their story.

Icon semantics are used to define a set of visual elements that indicate functions, objects, and states for iconographic communication.

Icons used for specific features, are not allowed to be used for others. This causes semantic overlap and confusion. In this case, please refer to the icon request process.

Examples of icons which have been created for different purposes

icon request example 001.jpg

Icon Request Example

Semantic Overlap example 003.jpg

Semantic Overlap Example

false

Do, go through the icon request process when wanting to include a SAP-icon or new icon into the icon font. This will ensure that the icon goes with the library that we have. (Request an Icon Process at bottom of page)

dont

false

Don’t use an existing icon which is already reserved for a feature in SAC or DWC for a new feature. This will cause semantic overlap of icons which we would like to avoid. All Icons must be added to the FPA-icons font. This is to maintain clean code, and avoid inconsistencies if Fiori updates their icon library styles.

Icon Accessibility

All Icons should be keyboard accessible. This means that they should work with Alt Text and have a System tooltip. Alt Text means that in the code, we should define alternative text which will be used by browser screen readers. System tooltips appear when hovering over a component, this is code which we get for free.

Accessibility Examples from the Stories Styling Panel

icon with system tooltip 001.jpg

Icon With System Tooltip

icon without system tooltip 001.jpg

Icon Without System Tooltip

false

Do, add alt text to the icons, focus state, and system

tooltip so that users will be able to understand what the icons mean when reading and using a screen reader.

dont

false

Don’t forget to add alt text, focus state, and system tooltips to the icons. Then users will not be able to tell when the icon is in focus.

The typical size of our icons are: 1rem (16px). Ensure to call icons by their HTML Unicode (icon names are only given as reference).

information

Please see the individual control specifications for further styling details.

<div> <div>Use-Case Visual Guide</div> <div>Pixel Size</div> <div>Rem</div> </div> <div> <div> <p>This is the Standard Icon size in Compact and Condensed mode (optimized for Desktop)</p> <p>Example: buttons</p> <p>Also used for some controls in Cozy Form Factor (optimized for touch)</p> <p>Example: checkbox</p> <p>Notification icons in Table (where the icon is smaller than the touch area)</p> </div> <div>16 px</div> <div></div> </div> <div> <div>Example: Buttons</div> <div>22 px</div> <div></div> </div> <div> <div> <p>Tiles on phone</p> <p>Generic Tiles</p> <p>and Fiori 1 Standard Tiles</p> </div> <div>24 px</div> <div></div> </div> <div> <div> <p>Fiori 1 Standard Tiles</p> <p>on Tablet/Desktop</p> </div> <div>32 px</div> <div></div> </div> <div> <div>Generic Tiles</div> <div>36 px</div> <div></div> </div> <div> <div> <p>Thumb icons</p> <p>Pictograms</p> <p>Attachment list</p> </div> <div>40 px</div> <div></div> </div>

It is possible to change the icon color within the properties of the sap.ui.core.Icon. Only certain icons can have a different color such as the ones listed below.

we want to improve the colors which are used in our application and use the @ values moving forward. this will be important and easier for when we want to upgrade to future Fiori themes.

example good icon colors 001.jpg