Fluent UI leverages and contributes to two iconography projects: Fluent Icons and Office UI Fabric Icons. These currently have different levels of support and the following outlines how to leverage the corresponding icon project with the respective Fluent UI library.

### Fluent Icons

[Microsoft Fluent System Icons](https://www.figma.com/community/file/836835755999342788) is an open source set of icons is derived from Microsoft’s MDL2 and Monoline icon sets. The Fluent System Icons are friendlier, have rounded corners, simplified shapes and come in 2 themes: Regular & Filled.

[Fluent UI iOS](https://developer.microsoft.com/en-us/fluentui#/controls/ios), [Fluent UI macOS](https://developer.microsoft.com/en-us/fluentui#/controls/macos), and [Fluent UI Android](https://developer.microsoft.com/en-us/fluentui#/controls/android) leverage the Fluent System Icons directly and are included with the respective UI libraries.

Fluent UI actively contributes to this project with the future goal to bringing full support across all UI librares and platforms.

### Office UI Fabric Icons
In production custom icon font for application icongraphy. This font contains glyphs that you can scale, color, and style in any way. There are also mirrored icons available for right-to-left localization. You can also download and install the icon font to use it with various design apps like Sketch, Figma, or Adobe XD.

This solution will remain supported until full support is achieved with Fluent System Icons.

**The icons on this page refer to the general-use monoline icons. See the [brand icons page](#/styles/web/office-brand-icons) for multi-color product icons and the [file type icons page](#/styles/web/file-type-icons) for document icons.**

#### When should I use Office UI Fabric Icons?

It is recommended to use Office UI Fabric icons for command bars, navigation or status indicators. If you need icons to represent Office apps, see the [Office brand icons page](#/styles/web/office-brand-icons) . If you are representing files or digital content, see the [file type icons page](#/styles/web/file-type-icons).

#### Fluent UI React

If you're using Fluent UI React, note that icons are not included in your bundle by default. To make the icons available, you'll need to initialize them by calling `initializeIcons` from the `@uifabric/icons` package. This is usually done at the root of your app:

import { initializeIcons } from '@uifabric/icons';
initializeIcons();

By default, this will load the icon fonts from the CDN used by OneDrive, SharePoint, and other Microsoft products. If you want to control where the fonts are served from, you can host them from another CDN or file share and pass that location to `initializeIcons`:

initializeIcons('https://my.cdn.com/path/to/icons/');

For more details about what `initializeIcons` does, check out Fluent UI's [wiki page about icons](https://github.com/microsoft/fluentui/wiki/Using-icons).

Once you've initialized the icons, you can use the Icon component in your app like any other Fluent UI component:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Icon } from '@fluentui/react/lib/Icon';

const MyIcon = () => <Icon iconName="CompassNW" className="ms-IconExample" />;

ReactDOM.render(<MyIcon />, document.body.firstChild);

Some components also include baked-in support for Icon via `iconProps`, which you can use to configure how the icon renders. Here's an example using IconButton:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { IconButton } from '@fluentui/react/lib/Button';

const MyIconButton = () => <IconButton iconProps={{ iconName: 'Add' }} title="Add" ariaLabel="Add" />;

ReactDOM.render(<MyIconButton />, document.body.firstChild);

#### Fabric Core

First, ensure that you've loaded the Fabric Core stylesheet following the [getting started instructions](#/get-started/web#fabric-core).

In your app, combine the base `ms-Icon` class with a modifier class for the specific icon:

<i class="ms-Icon ms-Icon--Mail" aria-hidden="true"></i>

Note the `aria-hidden` attribute, which prevents screen readers from reading the icon. In cases where meaning is conveyed only through the icon, such as an icon-only navigation bar, use the [`aria-label` attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute) on the button for accessibility.

#### Office UI Fabric Icons tool

The [Office UI Fabric Icons](https://aka.ms/fabric-icons) lets you search and browse all of Office UI Fabric's icons. You can also use it to create and maintain subsets of the icon font to use in your web apps, which are drop-in replacements for the default Fabric Core and Fluent UI React icon sets. In addition, the Office UI Fabric tool is updated with new icons several times a month. You can see detailed docs for the tool at https://aka.ms/fabric-icons?help.