Fluentui: Font and Icon-Font alternative for non-office-related applications

[lukasbash]

According to the Assets License, the available MS fonts and icon fonts are only allowed in association with office products or office product integrations.
The licensed fonts and icons are matching the whole UI framework in a decent way. Do you recommend a proper font and icon font as an alternative to the licensed ones?
I know that it is possible to inject custom fonts or icons, but honestly material or font awesome icons do not really reflect the style of an application using this framework.

Any input on this?

[aneeshack4]

@lukasbash thanks for reaching out to us. What is it you're trying to do exactly? Please give us more details about your use case - are you trying to make a M365 themed app/website or are you trying use custom icons with Fluent UI components? There is guidance regarding all of this on https://developer.microsoft.com/en-us/fluentui#/styles/web/icons

[msft-github-bot]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fabric React!

[lukasbash]

@aneeshack4 sorry for the late reply. I am working on an application that simply has a microsoft themed design. The application has nothing to do (or at least not directly) with any office products, applications or plugins.
The license agreement for the assets license says that I am not allowed to use i.e. the default font and icon font.
Of course I am using a custom font and icon font right now. I was just asking, if you (as the development team behind this framework) have a free-to-use alternative font and icon font that also matches the microsoft theme. In my opinion, using e.g. Font Awesome or Material icons just does not fit the style of your components. Do you understand what I mean?

[msft-github-bot]

@aneeshack4

Gentle ping that this issue needs attention.

[ecraig12345]

For text fonts, there's an open source font called Selawik which is designed as a replacement for Segoe UI. As far as I'm aware we don't have a similar open source replacement for icon fonts, sorry.

[ecraig12345]

Also note that in the latest assets license agreement it says that you can use the fonts if you're interacting with any Microsoft service, not just Office. But that obviously won't help in all cases.

[fromberg100]

I am also willing to use Fluent UI for an ERP webapplication. It is a ASP.NET Core web application and will be deployed to Azure virtual machine. Am I allowed to use the Fluent UI font and icons for this purpose?

[ecraig12345]

@fromberg100 Per the assets license linked above, you're allowed to use the fonts:

a. In connection with the use of a Microsoft API within the development of a software
application, website, or product you create or a service you offer designed to provide access
or interact with a Microsoft service or application (“Application”)
b. To illustrate that Application integrates with one or more Microsoft products and services.

If you work somewhere with lawyers, further interpretation of exactly how this applies to your scenario is best left up to them. (Sorry to not be more helpful, but I'm not qualified to give legal advice and don't want to say something incorrect.)

[kakone]

This licensing problem is annoying. We can't use this great collection of icons in some websites, or even Uno Platform applications.
We can now also found another collection of Fluent UI Icons under Creative Commons license, so we are a little lost. Will these new icons be included in the Fabric Icons page ? And will the license of the Fabric Icons page be changed so we can use it in a website or application without using a Microsoft API ?

[paulgildea]

@lukasbash @fromberg100 @kakone First off, Thank you! This is all great feedback! This gives our team a lot of insight on how you all would like to leverage icons in your solutions. I really appreciate it.

I'm starting a dialog with the teams that manage the Fluent Icons and Fabric Icons to provide some clarity in the short term as well as a long term solution moving forward across all our Fluent UI (Web/React Native, iOS+macOS, Android) control libraries. So bear with us.

In the meantime - I'd like to ask you folks on the types of formats you'd like to use to consume icons?

1. Font hosted on a CDN?
2. Updated Font creator tool (like the Fabric Icon tool) that you can use to bundle in a custom font?
3. SVG assets that you can bundle in?
4. Other ways or formats you've used to include icons into your experiences?

Thanks again!

[kakone]

In the meantime - I'd like to ask you folks on the types of formats you'd like to use to consume icons?

In priority 4 - With a package manager (NuGet and npm). The package would contain the SVG assets and the web fonts in various formats (ttf, woff, woff2).
But I think the CDN option is needed too .
I also like the Font creator tool to embed just the icons I need in my application, but it is less necessary than 4 and 1 (I can do a custom font with the SVG assets from the npm package).

[fromberg100]

I would go for 2. (Font creator) or 3 (SVG assets) with the purpose my application only uses icons needed.

[lukasbash]

For me it would be 4 - web fonts (at least for me there is no need to do this via package manager; I'd simply need the different files).
Still, in my opinion the standard icon font that is used within your framework makes such a big part of the design of the framework. There is an open source replacement for the normal font already (Segoe UI -> Selawik), but for me it is actually a show stopper that there is still no "matching" icon font that we can use without interacting with any MS service.

There are a lot of companies and customers that simply want microsoft themed applications, regardless if they use a microsoft service in the background or not, simply because their company lives in a microsoft ecosystem and users are used to these UIs/UXs. This is also the case for me. No interactions with any service and people keep asking: "Are these the microsoft icons? They look different than the ones on Teams or Dynamics, or ...".

[paulgildea]

@lukasbash This is great feedback - I was unaware what Selawik existed. Thanks for pointing that out! I'll continue to route this feedback back to the teams. We'll definitely be investigating in this space on delivering a less restrictive solution for icons for web applications. Any more feedback just let us know!

[kakone]

For few icons, the alternative for Segoe MDL2 Assets was the (ugly) Symbols web font.

[paulgildea]

@kakone I do have some context around that Symbol font :-) (I worked on WinJS at one point) and yes those icons were designed with a different design language in mind. This is all great context everyone thank you!

[villuv]

Would it be possible to separate icons directly related to Microsoft products (file types, office icons etc) and keep them under the asset license and by default include "stardust" icon package that was originally under CC license?
Main idea is that if a developer follows "getting started" guide, nothing that requires a special license is pulled in behind the scenes. It has to be a conscious decision to include licensed components.

[paulgildea]

@villuv This is good feedback. We're investigating a series of solutions here - both short term and long term. I'm following up with the teams that created the original asset license and as a short term solution - determine if we can make any adjustments.

Long term, the dev experience you call out is what I believe most folks want - we will need to do more coordination with other teams to make that a reality :-).

But what I'm hearing is this folks would like a:

1. UI font with an open license (folks correct me here because we've mainly been talking about icons)
2. Icon solution with an open license (could be a font, could be SVG, could be CDN hosted, could be bundled in, could only include the icons you want)
3. UI font and Icon solutions should be matching/cohesive from a design perspective
4. Getting started should only be pulling in dependencies that have open licenses. Any special licenses should be an explicit opt-in

@lukasbash @kakone @fromberg100 @villuv - Does that sound right? Thumbs up works too :-)

[kakone]

It sounds perfect !

[CodeTao]

@paulgildea At the very least please provide very clear guidance for how to use Fluent in a way that doesn't risk falling foul of the asset license agreement. Right now it is far from obvious that using the project in its standard configuration may be breaking a license agreement, or what steps should be taken to avoid this.

[sgreinert]

We are also developing a microsoft ecosystem independent solution (web and client based, client via electron) and thought of fluent UI as the absolute best platform to develop the user experience. But: without fonts and icons, fluent UI won't make sense for us. And unless we will be absolutely safe on using the framework without breaching the license agreement rules, we will have to move on to other frameworks, unfortunately...

[sgreinert]

@paulgildea is there a new status on the topic?

[prajaybasu]

Microsoft needs to make it clear if Fluent UI is only intended for Microsoft 365 or if Fluent UI can be used as a general purpose, enterprise grade alternative to Material UI or other design frameworks.

I feel that the Microsoft employees encouraging the use of Fluent UI in non-Microsoft 365 scenarios on sites such as StackOverflow (and on related GitHub repos) or the branding on the official Fluent UI page is in direct contrast to posts on official blogs or even other MS employees that state clearly that these components are not useful outside Microsoft 365 or ignore the usage outside of Microsoft 365 completely.

The licensing issue needs to be answered in a proper FAQ document (mentioned in the main README file, preferably at the top) and the Fluent UI project direction/branding needs to be clear in the package/repository descriptions across the web.

It is not easy to explain to higher ups that the MIT license "should" allow me to use the JS and CSS (without the font/icons) in react web app (unrelated to Microsoft 365).

Even if my web app is hosted in Azure App Service (unrelated to Microsoft 365 still), I still feel uncomfortable using any fonts or iconography despite @ecraig12345's reply (that doesn't assure legality in any way).

People involved with Fabric UI/Fluent UI have assured some resolution about this issue since a long time, but nothing seems to have changed other than having the option to use another font, which doesn't solve the issue with iconography.

[sgreinert]

I suppose we will have to move on to blueprint.js (runner up react framework in our evaluation).

[GurliGebis]

Is it safe to assume, that this has gone stale, and nothing will come from it, since no updates has been given for 2 months?
It is a shame if so, if needed, maybe move the Microsoft product icons and what else is IP out into a separate package, that is not included by default maybe?

[duke7553]

Google allows their material design icons to be used anywhere. Why can't Microsoft do the same?

[gautamsi]

No matter how many name you change for the product it is not going to be adopted widely unless you change the terms of the license (fabric/fluentui asset license). see how vscode is being used. You can alternatively provide some home grown open font instead of licensed font, I have had numerous use of this and I come to this repo every few month to check if the license has been relaxed.

at least create a build process to use some other icon provider with name mapping in a json file with popular library like

{
 "GlobalNavButton": "FaBars",
"Forward": "FaArrowRight",
}

same with a default font, I can use Roboto font, obviously it is not going to fit in overall UX but you are choosing to make it difficult.
this way someone can use

[paulgildea]

Thanks for enduring with us folks.

We've been working internally with our legal team and we've recently published our quarterly OKRs on our wiki to begin to be more transparent on what our team is focused on a quarterly basis.

This quarter we are focused providing an open source version of our MDL2 icons. I can't guarantee that we'll hit that timeline since we've been really focused on shipping a Version 8 release
.

I want to say thanks again for the constructive feedback and our team is learning and improving as we start to become a better run open source project.

[villuv]

Might this be related? https://github.com/microsoft/fluentui-system-icons

[rizkyramadhan]

Might this be related? https://github.com/microsoft/fluentui-system-icons

Wow, those are MIT Licensed, how come @fluentui/react doesn't use that by default? is there anyway we can use those icons?

[GurliGebis]

Is there a specific reason for two separate repositories containing icons?