Skip to Content
Author's profile photo Former Member

Custom icons in Fiori Launchpad

A customer has recently asked me to integrate their custom Font Type and home grown icon gallery not only in a set of custom made Fiori Applications but also into the standard SAP Fiori Launchpad. After investigating for a while and reading great posts like Fiori Icon logic by Jerry Wang I reached following conclusions:


1. A custom Font Type can be exposed via url as mime object within a BSP


The Font Type will be accessible thru an url as following:

https://<host>.<domain>:<port>/ sap/bc/bsp/sap/<bsp_name>/<font_type.ttf>


2. Theme Designer allows referencing a custom Font via url using CSS font-face :

@font-face {
font-family: <FontType>;
src: url(https://<host>.<domain>:<port>/sap/bc/bsp/sap/<bsp_name>/<FontType.ttf>;);


See w3s documentation in


3. When defining a Launchpad tile only SAP standard icons can be selected:





4. Each SAP icon has an icon code associated. For instance, sap-icon://course-book has E096 linked to it



The complete SAP icon list can be found in the Icon Explorer.

5. As Jerry explains in  Fiori Icon logic, SAP uses attribute data-sap-ui-icon-content which is filled by the IconRenderer, which itself brings icon name and icon code together. At that point, icon name course-book is linked to icon code E096.

If we check in the browser debugger, we can see the font family used is the standard “SAP-icons” and the icon name is “course-book”.



6. For my research I’ve taken few icons from the open Fontello collection and customized them to make them fit the UI5 icon codes and I’ve created a custom Font Type called “euro.ttf”.  So in my example, the Fontello icon-heart has been given icon code E096, which attached to course-book in Fiori.


You can find more information about Fontellon on

7. As we already know, we can define a custom font via CSS. That means we can link the icon code E096 to another custom icon when setting up our custom Font Type and reference it in the Theme Designer CSS tab.


So whenever the Launchpad pulls the configuration for our tile, font name “course-book” associated to icon code E096 will now fetch the icon-heart defined in our custom Font Type. Same happens with other icons I’ve also defined in the custom Font Type “euro.ttf”:


I hope this trick can help those willing to use custom fonts and custom icons in the SAP Fiori Launchpad. Your comments are highly welcome! 🙂

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Sarbjeet Singh
      Sarbjeet Singh

      Useful information. Thanks for sharing.

      Author's profile photo Former Member
      Former Member

      This is what I am looking for. Thanks for sharing it.

      Author's profile photo Florian Henninger
      Florian Henninger

      Hi Jaime,

      but that mean you need to kill some of the SAP-Logo's. Nice to know about the logic behind, but I highly recommend not doing things like that.

      Imagine a simple situation A new developers join you company and do not know about some scret-stuff... Some years later this will end in a mess and what about an upgrade. Are the custom-logos overwritten all the time, or is my original lost forever?

      A lot of questions not answered. Just because you can do it, doesn't mean you should do it 😉


      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Florian,

      Indeed custom icons/fonts won't be overwritten because it is part of your company's brand. Does you custom theme get overwritten on each upgrade? Not really. We would be on serious trouble if our custom CSS would get messed after normal upgrades. If a new developer joins and there is no documentation describing your company's Theme/CSS then troubles will be same serious sooner or later 🙂



      Author's profile photo Florian Henninger
      Florian Henninger

      Hi Jaime,

      don't say that you aren't allowed to do it, just want to give another view on the situation. If you got it handled your one of the lucky guys. I got a lot of customers which aren't that sure about things like that...


      Author's profile photo Grahame Collins
      Grahame Collins

      Hello Jaime,
      Firstly this is a great guide.
      Just wondering if you know if there is a guide that details how to create a custom icon?
      this guide explains how to use them but not how to create them?
      Any information you have would be greatly appreciated.


      Author's profile photo Frederico Rocha
      Frederico Rocha

      Thanks for sharing! Very useful!

      Author's profile photo Former Member
      Former Member

      Hello all,

      I tried to follow this method and is not getting the icons displayed.

      When i apply the theme with the mentioned changes, all the icons present are seen appeared by square boxes as shown below.

      I think, the applied css is changing the font family to the custom one for all tiles. Any suggestions?


      Author's profile photo Thorsten Dencker
      Thorsten Dencker

      Hi all,

      changing the Icon Font is officially not supported by the SAP Theme Designer.

      In general using custom CSS is not supported by SAP. SAP strongly recommends not to use custom CSS. Please refer to the disclaimer showing by the Theme Designer once opening the custom CSS tab for the first time.

      Custom CSS provides almost infinite possibilities to adapt and change the rendering of applications which means that it is simply impossible for SAP to provide a guaranty for upgradability and support and analyze custom CSS created by customers at scale.

      Issue coming up with custom CSS cannot be handled by the normal support process.

      Please be aware about this restriction before trying this approach.

      Thorsten Dencker