So, since adoption of Unified Interface is growing, people are asking – “What happened to the Ribbon icons?”. Well, a simple answer to this is tweaking the implementation a little.
Typically, you have custom icons on your classic Web UI that look like this –
But the same looks like a puzzle piece in the Unified Interface –
So, here’s what you need to do. Icons on the Unified Interface take SVG format. You’ll need to take you existing PNG Web Resources
Creating SVG Icons
Like most online services or applications, you can easily convert images to SVG. In this example, I’m using this online tool – https://www.online-convert.com/
Or you can try this too which I found quite a few people recommended – https://www.syncfusion.com/downloads/metrostudio
For this example, I used https://convertio.co/png-svg/ And I got my converted SVG document downloaded.
Now, create a new Web Resource in SVG and Upload the same.
Once your Web Resource for the SVG format is set, going back to your Ribbon Workbench customization work space, go to the Button where you wan to update the icon and select the SVG Web Resource under Modern Image as shown below
Publish Changes and See
Once your customization are published, you can simply refresh and check that your image has been updated
Note: An online converted might not give you an accurate image. However, it is best recommended to create SVGs on an app. I’ve heard recommendations about https://www.syncfusion.com/downloads/metrostudio
Hope this helps!