Skip to main content

Customize Ribbon Icons

You can use the Office RibbonX Editor to embed custom icons to ribbon. Custom UI supported ico, bmp, png, jpg and gif icons, but the best graphic format to use for custom icons is PNG (portable network graphics) as it supports an alpha channel and results in small file sizes. Icons can be any size, although the following sizes are recommended: 16x16, 32x32 pixels.

Create your custom icon

You can create your custom icons yourself or download a free SVG icon and convert SVG to PNG icons. If you want to create a custom icon yourself, follow these steps:

  1. Open Microsoft Paint.
  2. Resize the picture to 32x32 pixels.
  3. Create your icon and save it with the filename "custom-icon.png". The filename is the unique ID of the icon.

Add your custom icon

  1. Launch the Office RibbonX Editor.
  2. Open your workbook by clicking the Open button on the Office RibbonX Editor toolbar and navigating to the file.
  3. From the Insert menu, choose Office 2010+ Custom UI Part. This will add a customUI14.xml entry under your workbook in the tree view on the left.
  4. From the Insert menu, choose Icons.
  5. Browse and open your "custom-icon.png" file.
  6. Your icon file has been added under the "customUI14.xml" element.

Add the ribbon XML

  1. Copy and paste xml code below into customUI14.xml window.
    <customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui">
    	<ribbon startFromScratch="true">
    		<tabs>
    			<tab id="customTab"
    			     label="Custom Tab">
    				<group id="customGroup"
    				       label="Custom Group">
    					<button id="customButton"
    					        label="Custom Button"
    					        image="custom-icon"
    					        size="large"
    					        onAction="Callback"/>
    				</group>
    			</tab>
    		</tabs>
    	</ribbon>
    </customUI>
  2. Choose File > Save and then choose File > Close.
  3. Open the workbook and you will see the custom icon under the Custom Group.

Download Customize Ribbon Icons Example

Customize-Ribbon-Icons-Example.xlsm Download

Leave a comment

Your email address will not be published. Required fields are marked *

Format your code: <pre><code class="language-vba">place your code here</code></pre>