Office Web Add-In Command Button Images resource

Question

I'm creating a custom ribbon in MS Word and would like to add Open and Save buttons.

Is there an online resource for the Microsoft Office buttons images?

I thought Fabric was meant to be the place where I sourced all my images. However the guide says not to.

Don't reuse Office UI Fabric icons in the Office ribbon or contextual menu. Fabric icons are stylistically different and will not match. https://dev.office.com/docs/add-ins/design/design-icons

This strikes me a quite silly. Fabric is meant to give my app an 'Office feel', right? If that's the case, why is it different from the Office buttons?

I tried sourcing my images from the Word Online app. Unfortunately Word Online uses a big composite image

https://s1-word-edit-15.cdn.office.net:443/we/s/1684243702_resources/1033/we.png

Is there some way of using this png in my Office Add-In Manifest?

Slava Ivanov Slava Ivanov · Accepted Answer · 2017-07-28T17:06:34

Is there an online resource for the Microsoft Office buttons images?

Officially Microsoft Office team do not publish products images. As far as I know the resources are intellectual property and copyrighted.

Fabric is meant to give my app an 'Office feel', right?

Yes.

If that's the case, why is it different from the Office buttons?

The Office UI Fabric is designed to be used inside your application to make components looks like native Office UI.

Is there some way of using this png in my Office Add-In Manifest?

No. Office Add-In manifest has certain requirements for Image element. The size attribute gives the size, in pixels, of the image. Three image sizes are required: 16, 32, and 80. Five optional sizes are also supported: 20, 24, 40, 48, and 64. The following is example for clarification:

<Icon>
  <bt:Image size="16" resid="icon1_32x32" />
  <bt:Image size="32" resid="icon1_32x32" />
  <bt:Image size="80" resid="icon1_32x32" />
</Icon>

What you have is called CSS Image Sprite which designed to be used with CSS files. Nothing to do with XML manifest file. For clarification please refer to: Anatomy of an Office Add-in

From myself: I understand your point, but would like to mention that Office team provides you with design guidelines other than icons itself. Did you questions yourself: "Why are they do that?" Perhaps they don't want you to re-use the icons already used by Office product, as a user use to those icons and knows what action happen when press on it. If you will use the same icon in your application (add-in) and perform some other actions, user will be confused. On the other hand if you duplicate the same action in some other place (your own tab) user may be confused as well: "why is that two 'Save' buttons?". Yet another point: Office icons are evolving with the versions of the software, they may be different on variety devices and platforms supported by Office. Your add-in will be equally supported across all of them and you will have same "Save" icon ripped from Desktop Office for Windows. Basically want I wanted to say ... it is good practice to use your own art work for your app.

Office Web Add-In Command Button Images resource

1 Answers