D365: Ribbon Button Icon Update in Unified Client Interface(UCI)

In the new type of interface in D365 CE i.e. Unified Client Interface(UCI), for any custom new ribbon button that we put on the form will have default puzzle icon as shown below:

To use icons of our own choice, we need to use “.svg” image file. We can follow almost the same steps to update the icon except one which we’ll go through below.

Step – 1: In our case, for 2 buttons, download any 2 meaningful image files. Flat icons is a good source. If we download image files other than .svg files then we can convert them to .svg file online using many free websites. We used https://www.online-convert.com to convert .png files to .svg files. If we download directly .svg files then we don’t need to convert them in this step.

Step – 2: Create 2 web resources of type Vector Format(SVG) for the 2 .svg image files as shown below:

Step – 3: Open the solution with required entity in Ribbon Workbench. After selecting the button for updating the icon, unlike classic UI where we used to update Image 16 and/or Image 32 fields, we need to select the ModernImage field with the required web resources we created earlier as shown below:

Step – 4: Once done, publish the changes in Ribbon Workbench. After publishing is complete, the ribbon button icons should be reflected as shown below:

Hope it helps !!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.