How can I add the images to button using the ribbon xml?

You have to use getImage property for each button and the callback should return bitmap.

In Ribbon.xml

<button id="btnLogo" getImage="imageSuper_GetImage" size="large" />

Ribbon.cs

public Bitmap imageSuper_GetImage(IRibbonControl control)
        {
            return Resources.super_logo;
        }

You Can have the images from LoadImage Function.

You need to write as below:

<customUI xmlns="http://schemas.microsoft.com/office/2006/01/customui" 
  loadImage="GetImage">

public stdole.IPictureDisp GetImage(string imageName){
  return
    PictureConverter.IconToPictureDisp(Properties.Resources.MyIcon);
}

This is an old post, but I figured I'd add my answer in case anybody is still looking for an example (like I was)...

In Ribbon.xml, loadImage="GetImage" references the callback in Ribbon.cs that will get the image from the resources. In my example below, I am using image="Report_256x" to trigger the callback.

<?xml version="1.0" encoding="UTF-8"?>
<customUI onLoad="Ribbon_Load" xmlns="http://schemas.microsoft.com/office/2009/07/customui" loadImage="GetImage">
    <ribbon>
        <tabs>
            <tab idMso="TabMail">
                <group id="group1" label="Priority Tracker">
                    <button id="btnWIPReport" onAction="btnWIPReport_Click" label="WIP Report" size="large" image="Report_256x"/>
                </group>
            </tab>
        </tabs>
    </ribbon>
</customUI>

The callback that I use in my example looks like this...

public System.Drawing.Image GetImage(string ImageName)
{
    return (System.Drawing.Image)Properties.Resources.ResourceManager.GetObject(ImageName);
}