UI5ers Buzz #05: All new Icon Explorer App – Get Icons fast!

Have you ever struggled with finding the perfect icon out of more than 600 icons for your UI5 application? With release 1.48 of UI5 you can now use our new Icon Explorer Demo App to browse with ease through all our official icons. Search via tags, names or categories and have a bunch of different previews, to see what the icon could look like in your application!

I have always had problems finding the right icons for my applications in the old icon explorer. It was annoying to scroll through all the icons hoping to find the one fitting my needs. Some of the icon categories had more than 100 entries, so it took me ages to go through all of them. Besides, the previews of the icons could be boring. So, what’s new? It’s so much fancier now!

The new app has three different display options for the icons. It will start presenting you the grid view. You can switch to the detail view and lastly there is a visual view, which displays the icons in different sizes. It doesn’t matter on which view you are, whenever you press on an icon, the preview with typical use cases opens on the right.

Picture 1: Copy icon name or icon itself to clipboard

As soon as you found the right icon you can copy its code to the clipboard to directly use it in your app. Or you can copy the icon symbol itself to use it, for example, working on mockups.

Picture 2: New icon preview

In this screenshot you can see the preview for the “approvals” icon. Compared to the old one, this is much more colorful and has a lot more variety. It even includes what the icon would look like in a generic tile! And, before you ask: Of course it’s still possible to add icons to your favorites. Just press the star button and the icon will appear in the favorites view.

Picture 3: Details Preview

As you may have realized when you look at the new explorer, it uses the new belize theme, being published with the sapui5 release 1.40. Belize replaces the kind of old-fashioned standard theme BlueCrystal, which is now deprecated and will not be supported anymore. As you can see, belize is a lot more contemporary, using softer colors and state-of-the-art icon shapes. Furthermore, margins have been adjusted.

Finally, did you spot the funny gimmick in between all these fresh new features? Hidden in the upper right corner of the app awaits you the “Surprise me!” button! Press this little fellow and a random icon preview will show up. Try it out!

We hope you enjoy our changes to the icon explorer. And, of course, we are open for feedback. Leave a comment or contact us over slack.

The next post of our UI5ers Buzz blog series will cover using OPA5 together with Gherkin!
Previous Post: UI5ers Buzz #04

Cheers,

Lisa

Lisa is a Scrum Master and UI5 developer at SAP. Her passion is to fortify her knowledge of Web development technologies and stay connected with the different communities shes’s part of. A further favorite of hers is evangelizing the UI5 technology around the world. Follow her here or on Twitter.