UI guidelines


The guidelines here are not exhaustive. Hosts are expected to follow the terms of the Cloud Storage Partner Program contract with respect to Office for the web integration.


The following guidelines are required as part of Office for the web integration.

  1. Do not display any UI on or around the Office editor. The Office for the web editors must always be displayed ‘edge-to-edge’, with no surrounding UI. The editor cannot be ‘light-boxed’ or integrated as a component in host UI. The editor is a standalone application. Note that the Office for the web viewer can be ‘light-boxed’ or otherwise embedded in your application. However, if the user transitions to the editor, the editor must be edge-to-edge.

  2. Use Microsoft-provided application and file type icons. See Application and file type icons for more information.

  3. Provide favicons for the Office applications. Whenever the editor is displayed or the viewer is displayed full-window/full-tab, the favicon for the page should be set to the appropriate favicon. The preferred method is to use the URLs provided in WOPI discovery. See Favicon URLs for more information.

  4. Use Office application names in UI that activates Office. For example, if you have UI in your application that reads, Open, this UI should read Open in PowerPoint for the web, Open in Office for the web, or Open in Office in a browser. See this blog post for more information.

Other recommendations

While the following guidelines are not required, Office for the web strongly recommends partners do the following:

  1. Provide support for sharing within Office. Office for the web provides a mechanism to share documents with other users directly within the Office for the web applications. You should take advantage of this capability so that users can access sharing controls directly within Office for the web. See FileSharingPostMessage and FileSharingUrl for more information.

  2. Provide breadcrumb and breadcrumb URL values. Breadcrumbs are very helpful to users, because it helps them understand where their document is, as well as how to get back to where they were. See Breadcrumbs for more information.

  3. Provide an in-app Edit in Browser button. If you are using the Office for the web viewer and the current user has permissions to edit the document, you should always provide a HostEditUrl so that the Edit in Browser button is always displayed. This helps provide a more seamless transition for users.

    See also

    You can also use the EditModePostMessage property to receive a PostMessage when the Edit in Browser button is clicked, so you can handle the transition to edit mode yourself.

  4. Include the document name in the HTML title tag so it displays in the browser tab/window text. This is especially important in cases where users may open multiple documents in different browser tabs/windows.

Application and file type icons

As part of the Cloud Storage Partner Program, Microsoft will provide a ‘branding toolkit’ that includes proper file type and application icons in various sizes, as well as vector-based image formats for re-sizing.


The branding toolkit can be found in the Office 365 Cloud Storage Partner Program Yammer group, in the Network Resources section in the right sidebar. All O365 Cloud Storage partners should have access to this Yammer group.

You should use these icons as follows:

  1. When displaying an Office file, either individually or as part of a list of files, use the file type icons. Do not use the application icons for this purpose.

  2. When displaying a button or other UI element that opens an Office for the web application, use the application icons. For example, if you display an Open in Word on the web button, you should use the Word application icon.


If you re-size or otherwise modify the provided icons, you must use the vector source files to maintain the high image quality of the icons.