Skip to Content
Author's profile photo Kimmo Jokinen

Enhance UI5 app with custom icon fonts

What and why

Have you ever tried looking for appropriate icon in UI5 and found out that you couldn’t find one? UI5 comes with 546 different icons and a few hundred additional icons are available when using Fiori Launchpad. That is quite a few icons but you will eventually run into a use case where SAP provided icons does not have what you need. Or, it might be that your customer requires that the app uses specific icons.

When you have to start styling your app with custom icons, wouldn’t it be great if they worked exactly the same as icons in UI5? You could apply CSS styles, like color, to them or rotate and scale them easily. But it could be that all you have are PNG, JPG raster images or SVG vector images. With PNG and JPG you’re out of luck when it comes to CSS styling. SVGs can be styled but CSS styling may not work well with some UI5 controls like ObjectListItem.

Luckily you can convert your images into icon fonts easily with free tools. All you have to do is:

  1. Prepare SVG vector images
  2. Convert vector icons into icon font
  3. Register and use icon font icons in your app

With icon fonts you get these benefits over using individual images:

  • Consistent with UI5 icon fonts
  • Can be styled and animated
  • Smaller in size
  • Can be loaded in single HTTP Request

Next we will go through all the steps required to get your UI5 app styled with beautiful custom font icons.

Prepare vector images

Let’s say there is a requirement for an app for controlling kitchen equipment. SAP luckily provides an icon for a dishwasher but unfortunately fridge, oven and microwave oven are missing. Luckily there are many places to find free icons in the Internet and suitable icons are available in Pubzi [].

source images.png

Unfortunately they are raster images so first they need to be converted into vector images. Inkscape is a free tool that can be used for conversion. Conversion is easy. First copy paste the images into Inkscape one at a time. In Inkscape images can then be converted into SVG format with a feature called Trace Bitmap. Then it’s just fitting the converted vector image into the document and possibly changing the document dimensions in Inkscape.


document properties.png

Convert vector icons into icon font

Once vector images are ready, you can convert them into an icon font. IcoMoon App is a really good, free tool for that. Vector icons can be imported into IcoMoon App with a few clicks and all the icons can be converted into the font simultaneously. Then all you’ve to do is download the icon font, extract it and integrate it into your UI5 app.

fonts generated.png

A few words on icon fonts generated by IcoMoon App. They use Private Use Area (PUA) that is a range of code points in Unicode. Those code points won’t be used by Unicode Consortium but they could be occupied by other custom fonts. So test properly and assign different code point range for your font in IcoMoon App if there are any collisions.

Here are the important files that your downloaded icon font contains:

font files.png

In addition to these font files some lines of CSS are needed for integrating the newly created font icons. Luckily the downloaded package has these also in file style.css.

Use icon font in UI5 app

Using a custom icon font in your app is almost as simple as using icons that come with UI5. These are the steps required:

  1. Register the font and icons with CSS
  2. Add the font into UI5
  3. Use the icons

Same steps with example:

   1. Register the font and icons with css

@font-face {
  font-family: 'icomoon';
  src:url('icomoon.eot?5qvb9g#iefix') format('embedded-opentype'),
  url('icomoon.ttf?5qvb9g') format('truetype'),
  url('icomoon.woff?5qvb9g') format('woff'),
  url('icomoon.svg?5qvb9g#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  [class^="icon-"], [class*=" icon-"] {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  .icon-microwave:before {
  content: "\e900";
  .icon-oven:before {
  content: "\e901";
  .icon-refridgerator:before {
  content: "\e902";

   2. Add the font into UI5

// first parameter is font name, second parameter is collection name, third parameter is font-family and the last parameter is the code point in Unicode
sap.ui.core.IconPool.addIcon('microwave', 'customfont', 'icomoon', 'e900');
sap.ui.core.IconPool.addIcon('oven', 'customfont', 'icomoon', 'e901');
sap.ui.core.IconPool.addIcon('refridgerator', 'customfont', 'icomoon', 'e902');

   3. Use the icons

new sap.ui.core.Icon({
      src : "sap-icon://customfont/microwave"

And that’s it. Now your app has custom icons that can be styled with CSS. Example:


Live example

Further reading

Good font icon set:

Good tutorial on making an icon font:

Assigned Tags

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

      Thanks Kimmo for sharing!

      Author's profile photo Nagesh Caparthy
      Nagesh Caparthy

      Much Required. Thanks for sharing.



      Author's profile photo Former Member
      Former Member

      Thanks for Sharing.

      Author's profile photo Naseem VP
      Naseem VP

      Thanks for sharing. It was really informative.

      However i have a doubt, is there a way to maintain the custom icons centrally so that it can be accessed by all fiori apps?



      Author's profile photo Kimmo Jokinen
      Kimmo Jokinen
      Blog Post Author

      Hi Naseem,

      Thanks for your feedback and question.

      You can maintain icons centrally by registering them in a library. Haven't done this myself but you can look into the following links as a starting point:

      sapui5 - Adding a custom library as a dependency in SAP Fiori - Stack Overflow

      openui5/ at master · SAP/openui5 · GitHub

      How to create custom libraries - Ui5Strap Docs

      If you get it to work, the community would greatly appreciate your findings documented in an SCN blog. 😉

      Best regards,


      Author's profile photo Former Member
      Former Member

      Thanks for sharing, but I did have a question. I have created a Fiori Extension Application and wish to add a custom font icon to this extension. I followed all the steps above, but yet the icon does not appear.

      1. Created the Font (only one glyph named hazardous with \e900 code) and copied them to the webapp root of the extension application.

      2. In the index.html of the extension I added the CSS as above, the only difference was I used icon-hazardous as that was the name of the glyph.

      3. In the onInit function of the controller I placed the sap.ui.core.IconPool.addIcon("hazardous", "customicons", "icomoon", "e900");

      4. In the view extension I referenced the new icon icon="sap-icon://customicons/hazardous"

      Unfortunately the tab appears but with no icon. I am wondering if because it is an extension application the relative URL to the font is pointing to the original app url and not the extensions? Was hoping someone with Fiori experience might shed some light.

      Author's profile photo Former Member
      Former Member

      Hi Kimmo,

      I followed the steps you have provided. But there is no luck for me.

      The Custom Icons I added are not being displayed.



      Author's profile photo Former Member
      Former Member

      Hi Divya,

      what the error it is showing in console.

      I followed the steps Kimmo has provided. I created custom icons.



      Author's profile photo André Freitas Ferreira
      André Freitas Ferreira

      Hi Kimmo,


      Could you explain how, in the live example, you do Icon resizing?




      Author's profile photo Prashanth Rajasekaran
      Prashanth Rajasekaran

      Thank you  so much Kimmo  process works as expected.

      Author's profile photo Phillip Smith
      Phillip Smith

      Awesome blog mate!

      This worked brilliantly for me, was looking for a neat way to integrate font awesome, and here it is!

      One amendment, I noticed the addIcon function signature was a little different, it may have been changed in recent versions. my syntax ended up being the following

      sap.ui.core.IconPool.addIcon("smile","fontawesome-free", { fontFamily: "Font Awesome 5 Free", content: "eF118" });

      And for those watching at home, you can get the address generated using

      sap.ui.core.IconPool.getIconURI(iconName, collectionName?)

      But the address will always be the first two parameters you specified in addIcon

      eg, mine is "sap-icon://fontawesome-free/smile"

      Thanks for sharing Kimmo!

      Author's profile photo Arun Jadhav
      Arun Jadhav

      Thanks for the blog. It was a great help.

      Author's profile photo Sanjoy Saha
      Sanjoy Saha

      SAPUI5/OpenUI5 icon explorer has lot many icons now, still I need some icons to create for my application development. This blog saved my lot of time from judging many free icon maker tool/websites. Thanks a lot Kimmo

      Kind Regards,