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.

Ribbon Workbench

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!