HOW TO – Use SAP UI5 Icons in SAC-Stories and SAC-Applications 


Icons are immensely helpful when designing SAP Analytic Cloud Stories and/or Applications. It helps to give a consistent view on navigation elements. There are multiple ways of creating Icons for instance via uploading of images. 

This blog gives a “best practice” of having a consistent look and feel using the same icon library in SAP Analytics Stories but also Applications. 


The objective of the approach is to show a consistent and flexible way of integrating Icons on Buttons and Elements in SAP Analytics Could Stories and Applications. 


1. Add UI5 Link to your SAC Tenant

From the side navigation go to the administration and choose “Default Appearance” tab 

Add this CDN Link to Fonts and save it.

2. Go to the SAPUI5 Icons official website and choose the icon you want to add 

This is the link for the SAPUI5 Icon Lists

In this example we want to add the activate icon in my sac story / application designer. 

Click the clipboard button in the second row -> activate (Symbol) 


3. Create an application designer app

After you copy the icon, you can create a dashboard and add a button. 

In the styling panel paste your copied UI5 icon to the text field. 

You will think you did something wrong because it is just a [] but it is all correct. 


4. Change the Font to SAP-Icon 

Please change the font to the SAP-icons in the styling panel. 

This SAP-icons appears because we added the font in step 1. 


And you should see the SAP UI5 icon within your SAC dashboard. 

5. Create SAC story with the same icon. 

After you created SAC story you can insert the text element, paste the copied UI5 icon in the box. 

It will also be showing a bracket [] like this. 

6. Go to the styling panel and change the font to sap-icons.  

You can also change the size and color.  


You should see the same Icon as in the Application Design dashboard.