Fluent UI Icons

Landscape today

Perspective: Fluent UI React developers are currently leveraging icons in their app today.

Today, we have a @uifabric/icons package. It contains 1200+ font-based icons based on the MDL2 design (reference pointer to MDL2) language. Developers in Microsoft and OSS (especially SharePoint developers) use these icons to build experiences.

Fabric core is a css library, which also exposes a stylesheet which vanilla HTML developers can use to reference the MDL2 icons using classnames. (E.g. ms-Icon ms-Icon--Add)

Additionally we have scaffolded @fluentui/react-icons package as a solution for React developers. The icons are represented as React components and use SVG icons.

Teams uses a different set of icons, which has been packaged under the @fluentui/react-icons-northstar package.

Lastly we have a new set of mobile-based icons living in the microsoft/fluentui-system-icons repo. There are approximately {TODO: fill in } icons living there, different from the other sets, and exposed only as SVG and PDF resources.

Problems

Licensing issues with @uifabric/icons

TODO

Icon duplication and muddy developer story

TODO

Not cross platform enough

Web
Angular developers - what do they do?
React-native

Ideal solution

Developers want a single story that works well for their platform. Focusing on web first, this would look like this:

Web developers using Fluent UI icons

  • one source of truth for Fluent UI icons (consumed via stylesheet or react-icons package.)
  • deprecate font-based solution
  • merge mobile set into one source
  • merge northstar set into one source
  • deprecate northstar package
  • standardize on customizations for icons (e.g. outline or even just color1 vs color2)

React developers should use the @fluentui/react-icons package for the latest icons. This package includes all of the icons from MDL2, with updates from the mobile set. That means that if Chevron icon has changed, developers get the update intuitively by using the package.

Developers using the current @uifabric/icons font-based package won't get updates. We stop publishing this.

The react-icons-northstar package goes away and we consolidate it into react-icons. One package so that we don't confuse partners.

So for React devs:

import { AddIcon } from '@fluentui/react-icons';

return () => <AddIcon style={{ ... }} />

For non-React developers, we can provide raw SVGs to leverage:

<img style="background: url('https://url/to.svg')" />

We can also produce a stylesheet akin to Fabric Core which defines classnames which create background images pointing to the SVGs on the standard cdn.

<i class="fui-Icon fui-Icon--Add fui-Icon-outline" /> 

React-native developers using Fluent UI icons

TBD

Windows developers using Fluent UI icons

TBD

Alternatives

Move license sensitive icons to a separate package

If some icons cannot be distributed in the primary package, we should separate them out into a separate license sensitive package that customers opt into, following whichever legal restrictions are necessary. We should provide a clear disclaimer on the readme on the package, rather than a oneliner in the LICENSE that points to a poorly worded Word document.