Example of Spark ButtonBar Skin with different icons states using custom ButtonBarButton Spark Skin.

IconButtonBarButton.as

package com.thanksmister.components.controls
{
	import spark.components.ButtonBarButton;
	import spark.primitives.BitmapImage;
	
	public class IconButtonBarButton extends ButtonBarButton
	{
		[SkinPart(required = "false")]
		public var iconElement:BitmapImage;

		public function IconButtonBarButton()
		{
			super();
		}
		
		override protected function getCurrentSkinState():String 
		{
			var state:String = super.getCurrentSkinState();
			
			if (state == "downAndSelected" || state == "overAndSelected" || state == "upAndSelected") {
				iconElement.source = data.iconActive;
			} else {
				iconElement.source = data.iconNormal;
			}
			
			return state;
		}
	
		override protected function partAdded(partName:String, instance:Object):void
		{
			super.partAdded(partName, instance);
			
			if (data !== null && instance == iconElement) {
				iconElement.source = data.iconNormal;
			}
		}
	}
}

IconButtonBarButtonSkin.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
                   xmlns:s="library://ns.adobe.com/flex/spark" 
                   xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
                   width="17" height="18" 
                   alpha.disabled="0.5">

	<fx:Metadata>
		[HostComponent("com.thanksmister.components.controls.IconButtonBarButton")]
	</fx:Metadata>
	
	<!-- host component -->
	<fx:Script>
		
		import com.thanksmister.components.controls.IconButtonBarButton;

    </fx:Script>
    
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" stateGroups="overStates" />
        <s:State name="down" stateGroups="downStates" />
        <s:State name="disabled" stateGroups="disabledStates" />
        <s:State name="upAndSelected" stateGroups="selectedStates, selectedUpStates" />
        <s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
        <s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
        <s:State name="disabledAndSelected" stateGroups="selectedUpStates, disabledStates, selectedStates" />
    </s:states>
	
	<s:Rect width="100%" height="100%" x="0" y="0">
		<s:fill>
			<s:SolidColor color="0xFFFFFF" alpha="0"/>
		</s:fill>
	</s:Rect>
    
	<s:BitmapImage id="iconElement" width="17" height="18" verticalCenter="0" horizontalCenter="0" />  
    
</s:SparkButtonSkin>

IconButtonBarSkin.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
        alpha.disabled="0.5" xmlns:controls="com.thanksmister.components.controls.*">

    <fx:Metadata>
    <![CDATA[ 
        [HostComponent("spark.components.ButtonBar")]
    ]]>
    </fx:Metadata> 

    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
    
    <fx:Declarations>
    
		<!--- 
		@copy spark.components.ButtonBar#firstButton
		@default spark.skins.spark.ButtonBarFirstButtonSkin
		@see spark.skins.spark.ButtonBarFirstButtonSkin
		-->
		<fx:Component id="firstButton">
			<controls:IconButtonBarButton skinClass="com.thanksmister.components.skins.IconButtonBarButtonSkin"/>
		</fx:Component>
	
		<!--- 
		@copy spark.components.ButtonBar#middleButton
		@default spark.skins.spark.ButtonBarMiddleButtonSkin
		@see spark.skins.spark.ButtonBarMiddleButtonSkin
		-->
		<fx:Component id="middleButton" >
			<controls:IconButtonBarButton skinClass="com.thanksmister.components.skins.IconButtonBarButtonSkin" />
		</fx:Component>
		
		<!--- 
		@copy spark.components.ButtonBar#lastButton
		@default spark.skins.spark.ButtonBarLastButtonSkin
		@see spark.skins.spark.ButtonBarLastButtonSkin
		-->
		<fx:Component id="lastButton" >
			<controls:IconButtonBarButton skinClass="com.thanksmister.components.skins.IconButtonBarButtonSkin" />
		</fx:Component>


    </fx:Declarations>
	
	<s:Rect width="100%" height="100%" x="0" y="0">
		<s:fill>
			<s:SolidColor color="0xFFFFFF" alpha="0"/>
		</s:fill>
	</s:Rect>

    <!--- @copy spark.components.SkinnableDataContainer#dataGroup -->
    <s:DataGroup id="dataGroup" width="100%" height="100%">
        <s:layout>
            <s:ButtonBarHorizontalLayout gap="-1"/>
        </s:layout>
    </s:DataGroup>

</s:Skin>