Can I use Office UI Fabric React in a non-Microsoft internal application?

Question

I was wondering if I can just use the Office React Fabric UI framework in a company internal application that is not related to Microsoft services such as SharePoint or Office.

I read the License but didn't quite clear my question.

https://github.com/OfficeDev/office-ui-fabric-react/blob/master/LICENSE

Equidistant

It's an open source UI library so naturally, you can use it in any of your applications. With that said, there are some limitations on the usage of Microsoft assets like fonts and icons. There is a link at the end of the link you provided where you can find out more details about it. – Dereism

Answer 1

Yes! You can definitely use Fabric for these kinds of apps. However, according to the assets license linked to from that license doc, the assets (fonts and icons) can only be used if the app connects to a Microsoft service somehow. This could be as simple as hosting the app as an Azure web app.

Here's a related quote from this GitHub comment that expands on this a little:

Fabric's assets (fonts, icons, and product logos) are part of Microsoft's brand, and can only be used in apps & services--including commercial ones--that connect with Microsoft products. These include Add-ins for Office, web parts for SharePoint, and other extensions for Microsoft products. This applies to usage of the assets in application code itself as well as any designs produced by the toolkit.

However, all of Fabric's code (JS, CSS, etc.) is MIT-licensed and can be used in non-Microsoft commercial products. There's even first-class support for Selawik, an open source drop-in substitute for Segoe UI. There is not a substitute for the icon font today, however.

To opt out of those assets, you can you substitute Fabric's default icons with something like Font Awesome like so:

import { registerIcons } from '@uifabric/styling';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';

registerIcons({
  icons: {
    'check-square': <FontAwesomeIcon icon='check-square' />,
    ...etc
  }
});

To opt out of Segoe UI, you can use create a custom theme that replaces the defaultFontStyle with a different font. Here's a CodePen illustrating that: https://codepen.io/jahnp/pen/pYMyZM

Thordis

Nice! thanks Peter, will take a look at the icon topic. – Equidistant

I know this is a 3 year old question, but would C# count as a Microsoft Service that could be a valid use case for the Assets? – Grassofparnassus