Alternate small icons for resized buttons

This question is related resizing toolbar buttons. I have just begun implementing the resizing of toolbar buttons in LIveContent Create from big buttons to small buttons by hiding the big button and recreating the button as small button. I used the example you provided in a previous question:

<x:overlay xmlns="http://xopus.com/2009/lui">
<!-- Hide default Finish Editng button -->
<ribbon-bigbutton id="FinishEditingButton" available="false"/>
<!-- Add small Finish Editing button next to Save button -->
<ribbon-smallbutton id="CustomFinishEditingButton" after="SaveButton" command="FinishEditingCommand" iconsrc="finish_editing_icon.png" />
</x:overlay>

The follow up question concerns images for the buttons. I noticed that icons_standalone.png contains the big button images upon examination with the developer tools in the browser as well as smaller versions of those icons for all except FinishEditing and CancelEditing. Is there any way in the configuration to redirect the background position to these icons? Or with JavaScript manipulating the HTML DOM? I'm assuming it would have the correct height and width based on it being defined as small button. It is a lot of effort to recreate almost a dozen images, so I want to utilize as much of out-of-the-box as possible. 

Thanks in advance!