Skip to Content
Author's profile photo Dirk Mayrock

SAPUI5 Icon Explorer for Design Studio

Hi Design Studio community,

a colleague of mine developed a simple to use application that help you adding SAPUI5 icons into your applications.

We’v called it “Icon Explorer”.

You might know the SAPUI5 Icon Explorer

Whenever you want to use one of these icons you have to think about the best way to implement it… here is the solution.


Steps to install:

  • go to your Design Studio local repository and create a new folder
  • download the English or German version of the app as txt file to your folder and rename it to content.biapp
  • download the css file of the app and rename it to custom.css

Steps to use:

  • create a new app and link the custom.css file in in the application properties
  • add a text element to your application and assign the css class “icons” to it
  • execute the Icon Explorer App you have downloaded and execute it
  • select the icon you want and copy it with STRG + C
  • go to your text component and paste the icon into the text property with STRG + V

> Do not care about the content of the text property as long as you see the icon.

> Check the embedded help in the Icon Explorer App

What would you have to do without that approach?

If you like to use one of the icons in your application you would need to do the following steps for each of the icons:

    1. Go to SAP UI5 Icon Explorer page
    2. find and copy the ID for example “\e19b”
    3. create a css class in your css file with a syntax like:
      ICON_BOOKMARK:before {
      font-size: 22px;
      font-family: ‘SAP-icons’;             
      content: “\e19b”;          
      speak: none;
      color: #F4F6F6;
    4. assign the newly created class to the component

You see that each icon you want to use would lead into an own class that has to be created manually so that your css file gets “crowded” and it would be a lot of manual work.

What is the benefit of the new approach?

  • You see all available icons on one page and not on many separate ones like in SAP UI5 Icon Explorer page
  • simple copy & paste into your app possible no manual css class creation needed
  • a single css class is sufficient for all icons
  • your css file stays clear and can be reused easily


Together with the two comments I received from Anne-Katrin Barthoff and Karol Kalisz (see below) you can use the css in combination with yours in 2 ways…

  • plain css

          ==> use “@import url(“custom.css”) within my own css-file

  • using sdk component

          ==> use the Design Studio SDK: Custom CSS Collector to dynamically attach more CSS files component

Hope you like that simple way of adding the icons.

If you need help using it or if I should share a video please let me know.

All the best


Assigned Tags

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

      Hi Dirk,

      you list as on of the benifits that your css file stays clear. But there is no way to use more than one css file in DS, is it? Custom.css AND my (clear) css-file.


      Author's profile photo Dirk Mayrock
      Dirk Mayrock
      Blog Post Author


      you are right, there is only one css file that you attach to an application.

      The css in this blog can be enriched with all the other css code you need of course so there is no need for another css. Of ocurse its quite a bit of code in it, but if you bring it to the end of your file its good to use.

      the one provided does not have an separate multi line code for each and every icon you want to use, that's what I had in mind.

      Does that help to clarify?


      Author's profile photo Former Member
      Former Member

      Meanwhile I found a solution: I use "@import url("custom.css") within my own css-file. Works perfect. Thanks for your post!

      Author's profile photo Karol Kalisz
      Karol Kalisz

      you can take my brand new custom css collector component, see here.. Design Studio SDK: Custom CSS Collector to dynamically attach more CSS files

      Author's profile photo Karol Kalisz
      Karol Kalisz

      for those who can / want use SDK -> Design Studio SDK: Fiori Button (with SAP Image)

      Author's profile photo Christoph Wassermann
      Christoph Wassermann

      Hi Dirk, thanks for this, it is very useful - and thanks to your colleague who built this.

      Just one point for everyone who might be having the same problem: I am using the provided biapp in DS 1.4. There is a new property "Tooltip" that was added to standard components such as the Text component and corresponds to the html "title" attribute which displays a text when hovering over an element.

      Now if you don't set a tooltip on a text component in DS1.4, the component's text content is set as a tooltip. This strangely leads to a major performance problem when using your biapp with IE9 - the browser does not seem to like rendering all those Unicode Glyphs when the mouse hovers over the SAP_ICONS_LIST component.

      Long story short, the problem is solved by setting SAP_ICONS_LIST's Tooltip property to any non-empty String.

      Author's profile photo Dirk Mayrock
      Dirk Mayrock
      Blog Post Author

      Hi Christoph,

      thanks for your comment. I have not retested the app in 1.4...

      I will do the needed changes and upload new version within next week.



      Author's profile photo Christian Sass
      Christian Sass


      I assume that this is realy a basic question but I need to solve this problem.

      I've tried to use the UI5 Font in my DashBoard but I don't see anything.

      Actually I can see that the browser does not find the font-family "SAP-icons". We are useing BI 4.1. Do we have to install the font seperatly or do I have to install the font locally?


      Author's profile photo Rajender Singh
      Rajender Singh


      I can't see the attachments.