Icons for the masses (Fiori launchpad edition)

[Former Member]

Hi,

While SAP has provided us with many good icons, there are just sometimes, where they don't quite fit your needs. Some of these icons are a bit of a mystery to me, what does the football has to do with anything in SAP?

Well that's another topic.

I want to show you how to add custom icons to the launchpad. User research has shown that icon resemblance helps usabilty

Firstly we need to upload an image to the server.

So head on in to SE80 and select the mime repository.

I uploaded my image to the filepath "/sap/public/bc/WebIcons/ur/default/l/Workcenter/" as this is a public folder accessible as well by NWBC, if you want to change icons in the index page. Have a look at this blog on how to achieve that.

Now we have all we need!

Go to transaction /ui5/theme_designer and create your own theme. I won't go into detail with that, but read this blog how to do that.

What is important is that you select a theme that can be used by FLP. I used blue_crystal.

Open up the fiori launchpad preview page.

Open the CSS tab and add the following code

[title^='Launch "My Benefits"'] > span[id^="__icon"]:before {

    background-image: url("/sap/public/bc/WebIcons/ur/default/l/Workcenter/stormtrooper_wc1.png") !important;

    background-size: 100% 100% !important;

    display: inline-block;

    width: 38px;

    height: 38px;

    content: " ";

}

So here i change the icon on the tile titled my benefits. If you are in doubt of the title use the inspector from Chrome like below

That is it. You know have a custom icon in your fiori launchpad.

Follow me on Twitter or Linkedin for updates and thoughts about SAP User Experience.