Fluent UI System Icons

https://github.com/microsoft/fluentui-system-icons
Admin
Fluent UI System Icons is a collection of familiar, friendly, and modern icons from Microsoft,...
Tokens:72,972
Snippets:523
Trust Score:10
License:MIT
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Install @fluentui/react-icons-file-type with npm

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/react-icons-file-type/README.md

Install the package via npm before using the components.

```bash
npm install @fluentui/react-icons-file-type
```

--------------------------------

### Install importer dependencies

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/README.md

Run these commands from the repository root to enable corepack and install all dependencies in the single yarn workspace.

```bash
corepack enable
yarn install
```

--------------------------------

### List available importer commands

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/README.md

Run this command to list all available commands in the importer.

```bash
yarn run
```

--------------------------------

### Clean importer directory

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/README.md

Jump into the importer directory and clean it before running commands.

```bash
cd importer
yarn clean
```

--------------------------------

### Install FluentIcons via Carthage

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/README.md

Add this line to your Cartfile to install the FluentIcons framework via Carthage.

```bash
git "git@github.com:microsoft/fluentui-system-icons.git" "1.1.344"
```

--------------------------------

### Install FluentIcons via CocoaPods

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/README.md

Add these lines to your Podfile to install the FluentIcons pod for iOS/macOS.

```ruby
use_frameworks!

pod "FluentIcons", "1.1.344"
```

--------------------------------

### Check asset metadata

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/README.md

Run this command to check that size and style arrays in metadata.json files are in sync with SVG filenames.

```sh
yarn nx run system-icons-processing:check:assets-metadata
```

--------------------------------

### Install using prerelease tag

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/react-icons/docs/prerelease.md

Install the latest prerelease version of @fluentui/react-icons using the 'prerelease' npm tag. Requires npm overrides or yarn resolutions to ensure only the prerelease version is used.

```bash
# Or use the prerelease tag
npm install @fluentui/react-icons@prerelease
```

--------------------------------

### Install atomic webpack loader

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/docsite/stories/Icons/IconsBuildTransforms.mdx

Install the @fluentui/react-icons-atomic-webpack-loader package as a dev dependency.

```bash
npm install --save-dev @fluentui/react-icons-atomic-webpack-loader
```

--------------------------------

### Install specific prerelease version

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/react-icons/docs/prerelease.md

Install a specific prerelease version of @fluentui/react-icons using npm. Requires npm overrides or yarn resolutions to ensure only the prerelease version is used.

```bash
# Install specific prerelease
npm install @fluentui/react-icons@2.0.0-alpha.1
```

--------------------------------

### Install @fluentui/react-icons-font-subsetting-webpack-plugin

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/docsite/stories/Icons/IconsBuildTransforms.mdx

Install the font subsetting plugin as a dev dependency to use with the font variant of the atomic loader.

```bash
npm install --save-dev @fluentui/react-icons-font-subsetting-webpack-plugin
```

--------------------------------

### Install @fluentui/eslint-plugin-react-icons with npm, yarn, or pnpm

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/eslint-plugin-react-icons/README.md

Install the plugin as a dev dependency using your preferred package manager.

```bash
# npm
npm install --save-dev @fluentui/eslint-plugin-react-icons

# yarn
yarn add --dev @fluentui/eslint-plugin-react-icons

# pnpm
pnpm add --save-dev @fluentui/eslint-plugin-react-icons
```

--------------------------------

### Install @fluentui/svg-icons package

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/svg-icons/README.md

Install the package containing optimized plain SVG assets for Fluent UI System Icons.

```bash
npm install @fluentui/svg-icons

```

--------------------------------

### Install svg-inline-loader

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/svg-icons/README.md

Install the svg-inline-loader as a dev dependency for use in Webpack configuration.

```bash
npm install svg-inline-loader --save-dev

```

--------------------------------

### Fix asset metadata size/style arrays

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/README.md

Use this command to reconcile only the size/style arrays with the SVG filenames. Review changes before committing.

```sh
yarn nx run system-icons-processing:check:assets-metadata --fix --skip-nx-cache
```

--------------------------------

### Add Maven Central repository to root build.gradle

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/README.md

Required before adding the Android dependency. Ensure the mavenCentral() repository is included in the root build.gradle file.

```groovy
repositories {
    ...
    mavenCentral()
}
```

--------------------------------

### Install the plugin with npm

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/react-icons-svg-sprite-subsetting-webpack-plugin/README.md

Install the package as a dev dependency. The package is in early development (0.x) and follows zero-based major semver, so breaking changes may occur in minor releases until 1.0.

```sh
npm i -D @fluentui/react-icons-svg-sprite-subsetting-webpack-plugin
```

--------------------------------

### Add Android dependency for fluent-system-icons

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/README.md

Include this dependency in your project's build.gradle to use the Fluent UI System Icons Android library.

```groovy
implementation 'com.microsoft.design:fluent-system-icons:1.1.344@aar'
```

--------------------------------

### Zero configuration: render a file type icon with FileTypeIcon

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/docsite/stories/FileTypeIcons/FileTypeIconsDescription.md

Renders a file type icon from the Fluent CDN by default with no provider or setup required. The `extension` prop specifies the file type and `size` sets the icon dimensions.

```tsx
import { FileTypeIcon } from '@fluentui/react-icons-file-type';

<FileTypeIcon extension="docx" size={24} />;
```

--------------------------------

### Prerelease version format

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/react-icons/docs/prerelease.md

Semantic versioning format for prerelease versions: <major>.<minor>.<patch>-<prerelease>.<number>. Examples include 2.0.0-alpha.1, 2.0.0-beta.2, and 2.0.0-rc.1.

```text
<major>.<minor>.<patch>-<prerelease>.<number>
```

--------------------------------

### Add Flutter dependency for fluentui_system_icons

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/README.md

Add this dependency to your Flutter project's pubspec.yaml to use the Fluent UI System Icons package.

```yaml
dependencies:
  ...
  fluentui_system_icons: ^1.1.344
```

--------------------------------

### Remove initializeFileTypeIcons() call

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/react-icons-file-type/README.md

v9 has no global registry, so remove the `initializeFileTypeIcons()` call and its import. Assets are resolved per render from the CDN.

```diff
- import { initializeFileTypeIcons } from '@fluentui/react-file-type-icons';
- initializeFileTypeIcons();            // at app startup
```

--------------------------------

### Configure custom CDN via FileTypeIconsProvider

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/react-icons-file-type/README.md

Replace the `initializeFileTypeIcons` init argument with the `FileTypeIconsProvider` component. The Fluent CDN is the default, so `baseUrl` is only needed to override the host. There is no per-`FileTypeIcon` `baseUrl` prop.

```diff
- initializeFileTypeIcons('https://my-cdn.example.com/item-types/');
+ import { FileTypeIconsProvider } from '@fluentui/react-icons-file-type';
+ <FileTypeIconsProvider baseUrl="https://my-cdn.example.com/item-types/">
+   {/* ...app... */}
+ </FileTypeIconsProvider>
```

--------------------------------

### Import and use DismissSquareRegular icon

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/docsite/stories/Icons/IconsCatalog.mdx

Install the @fluentui/react-icons package and import the desired icon component. The example shows importing DismissSquareRegular and rendering it in a React component.

```tsx
import { DismissSquareRegular } from '@fluentui/react-icons';

function App() {
  return <DismissSquareRegular />;
}
```

--------------------------------

### Run the 5,000-export microbenchmark

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/react-icons-atomic-webpack-loader/README.md

Runs the repeatable 5,000-export microbenchmark for the loader. Override its scale with ICON_BENCHMARK_EXPORTS and ICON_BENCHMARK_ITERATIONS. The benchmark reports fast-skip and importer rewrite timing, source-map cost, selector emissions, unique physical parses, cache hits, cache entries, and RSS change. Set ICON_BENCHMARK_JSON=1 for machine-readable output. It is not a CI gate because wall-clock and RSS measurements vary across shared runners.

```shell
yarn workspace @fluentui/react-icons-atomic-webpack-loader benchmark
```

--------------------------------

### Direct atomic import for lazy loading

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/react-icons-atomic-webpack-loader/README.md

Shows the recommended replacement for dynamic barrel imports: import the atomic path directly so only the used icon lands in the async chunk.

```javascript
// ✅ Only this icon lands in the async chunk.
const { AddFilled } = await import('@fluentui/react-icons/svg/add');
```

--------------------------------

### Import AccessTime24Filled sized icon

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/react-native-icons/README.md

Import a sized icon variant (24px) for pixel-perfect rendering at a specific size. Recommended when you know the exact size and don't need multiple sizes.

```tsx
import { AccessTime24Filled } from '@fluentui/react-native-icons';
```

--------------------------------

### Webpack loader configuration for headless API

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/react-icons-atomic-webpack-loader/README.md

Enables the headless API by setting headless: true. With this configuration, AddFilled resolves to @fluentui/react-icons/headless/fonts/add, bundleIcon to @fluentui/react-icons/headless/utils, and useIconContext to @fluentui/react-icons/providers (shared). Modules without a headless build degrade to standard implementation with a warning.

```javascript
{
  loader: '@fluentui/react-icons-atomic-webpack-loader',
  options: {
    iconVariant: 'fonts',
    headless: true,
  },
}
```

--------------------------------

### Scoped loader rules for icon granularity

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/docsite/stories/Icons/IconsBuildTransforms.mdx

Example of scoping icon granularity by loader rule: an icon picker retains family granularity while other code uses icon granularity.

```js
const path = require('path');

const iconPicker = path.resolve(__dirname, 'src/icon-picker');
const fluentAtoms = /node_modules[\\/]@fluentui[\\/]react-(?:brand-)?icons[\\/]lib[\\/]atoms[\\/]/;

module.exports = {
  module: {
    rules: [
      {
        test: /\.[mc]?[jt]sx?$/,
        include: [path.resolve(__dirname, 'src'), fluentAtoms],
        exclude: iconPicker,
        loader: '@fluentui/react-icons-atomic-webpack-loader',
        options: { moduleGranularity: 'icon' },
      },
      {
        test: /\.[mc]?[jt]sx?$/,
        include: iconPicker,
        loader: '@fluentui/react-icons-atomic-webpack-loader',
        options: { moduleGranularity: 'family' },
      },
    ],
  },
};
```

--------------------------------

### Remove unused icons script for Carthage

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/ios/README.md

Run the remove-unused-fluent-icons script and build the framework when using Carthage.

```bash
ICON_SOURCE_PATH="./Carthage/Checkouts/fluent-mobile-icons"

$ICON_SOURCE_PATH/ios/remove-unused-fluent-icons/run \
	--path-to-source-code "." \
	--path-to-fluent-icon-source $ICON_SOURCE_PATH

carthage build --platform iOS fluent-mobile-icons
```

--------------------------------

### Replace Icon + getFileTypeIconProps with FileTypeIcon component

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/react-icons-file-type/README.md

Use the dedicated `FileTypeIcon` component instead of the v8 `Icon` component with `getFileTypeIconProps`. Pass the same options as props: `extension`, `type`, `size`, and `imageFileType`.

```diff
- import { Icon } from '@fluentui/react';
- import { getFileTypeIconProps } from '@fluentui/react-file-type-icons';
- <Icon {...getFileTypeIconProps({ extension: 'docx', size: 24 })} />
+ import { FileTypeIcon } from '@fluentui/react-icons-file-type';
+ <FileTypeIcon extension="docx" size={24} />
```

--------------------------------

### Before and After Barrel Import Transformation

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/react-icons-atomic-webpack-loader/README.md

Shows the barrel import before the loader and the atomic deep paths after transformation. The loader rewrites imports from @fluentui/react-icons and @fluentui/react-brand-icons to isolated modules for better tree-shaking.

```javascript
// Before — barrel import pulls in the entire icon set
import { AddFilled, bundleIcon, useIconContext } from '@fluentui/react-icons';
import { ProjectColor } from '@fluentui/react-brand-icons';
export { ArrowLeftRegular } from '@fluentui/react-icons';

// After — each reference resolves to a small, isolated module
import { AddFilled } from '@fluentui/react-icons/svg/add';
import { bundleIcon } from '@fluentui/react-icons/utils';
import { useIconContext } from '@fluentui/react-icons/providers';
import { ProjectColor } from '@fluentui/react-brand-icons/svg/project';
export { ArrowLeftRegular } from '@fluentui/react-icons/svg/arrow-left';
```

--------------------------------

### Style headless FileTypeIcon with custom CSS

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/react-icons-file-type/README.md

Target the data-fui-filetype-icon attribute (or a className) with your own CSS to style the headless icon. This example shows a common CSS rule to make the image display inline, hide overflow, and contain the object.

```css
/* ...or target the data attribute (or a className) with your own CSS */
[data-fui-filetype-icon] {
  display: inline-block;
  overflow: hidden;
  object-fit: contain;
}
```

--------------------------------

### Uninstall v8 and install v9 package

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/docsite/stories/FileTypeIcons/FileTypeIconsMigration.mdx

The v9 package is named @fluentui/react-icons-file-type, not a drop-in re-export of v8. Run these commands to replace the old package.

```bash
npm uninstall @fluentui/react-file-type-icons
npm install @fluentui/react-icons-file-type
```

--------------------------------

### Configure asset host with FileTypeIconsProvider

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/docsite/stories/FileTypeIcons/FileTypeIconsDescription.md

Wraps a subtree with `FileTypeIconsProvider` to serve icons from a custom host (e.g., a same-origin CDN proxy). The `baseUrl` is resolved with precedence: nearest provider's `baseUrl` first, then the Fluent CDN default.

```tsx
import { FileTypeIconsProvider, FileTypeIcon } from '@fluentui/react-icons-file-type';

<FileTypeIconsProvider baseUrl="https://my-cdn.example.com/item-types/">
  <FileTypeIcon extension="pptx" size={24} />
</FileTypeIconsProvider>;
```

--------------------------------

### Import headless CSS in app entry

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/react-icons-atomic-webpack-loader/README.md

The loader only rewrites component/utility imports; you must import the headless CSS in your app entry point. For font icons, also import the fonts stylesheet.

```javascript
import '@fluentui/react-icons/headless/styles.css';
// and, for font icons:
import '@fluentui/react-icons/headless/fonts/styles.css';
```

--------------------------------

### Headless API: Option A - import opt-in stylesheet

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/docsite/stories/FileTypeIcons/FileTypeIconsDescription.md

Imports the headless component and its opt-in stylesheet to reproduce the default box behavior without bundling the Griffel runtime. The component is identical in behavior but ships no styling runtime and tags the `<img>` with `data-fui-filetype-icon`.

```tsx
// Option A: import the opt-in stylesheet once (reproduces the default box behavior)
import '@fluentui/react-icons-file-type/headless/styles.css';
import { FileTypeIcon } from '@fluentui/react-icons-file-type/headless';

<FileTypeIcon extension="docx" size={24} />;
```

--------------------------------

### Import AccessTimeFilled icon

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/react-native-icons/README.md

Import the Filled state of the AccessTime icon from the @fluentui/react-native-icons package. Each icon is its own element, so you only import what you need.

```tsx
import { AccessTimeFilled } from '@fluentui/react-native-icons';
```

--------------------------------

### Optimized atomic imports for different targets

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/docsite/stories/Icons/IconsBuildTransforms.mdx

Atomic imports for SVG, SVG sprites, fonts, and headless APIs. Replace the path with the appropriate one for your setup.

```tsx
// SVG (standard)
import { AccessTime24Filled } from '@fluentui/react-icons/svg/access-time';

// SVG sprites (⚠️ preview)
import { AccessTime24Filled } from '@fluentui/react-icons/svg-sprite/access-time';

// Font icons
import { AccessTime24Filled } from '@fluentui/react-icons/fonts/access-time';

// Headless API (SVG)
import { AccessTime24Filled } from '@fluentui/react-icons/headless/svg/access-time';

// Headless API (fonts)
import { AccessTime24Filled } from '@fluentui/react-icons/headless/fonts/access-time';
```

--------------------------------

### Barrel import before transform

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/docsite/stories/Icons/IconsBuildTransforms.mdx

Root-level barrel import that gets rewritten by build-time transforms.

```tsx
import { AccessTime24Filled } from '@fluentui/react-icons';
```

--------------------------------

### macOS usage with NSImage

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/ios/README.md

Create an NSImage from a FluentIcon enum on macOS.

```swift
import FluentIcons

NSImage.fluentIcon(.appStore24Filled)
```

--------------------------------

### Optional icon list to keep for remove-unused-fluent-icons

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/ios/README.md

Pass a list of icons to keep when using React Native or referencing icons outside your codebase.

```bash
--path-to-list-of-icons-to-keep OutlookReactNativeKit/ReactResources/FluentIcons.txt
```

--------------------------------

### allowDynamicImports: supported call-site shapes

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/react-icons-atomic-webpack-loader/README.md

With allowDynamicImports: true, the loader rewrites only these two statically-provable dynamic import shapes: await + object destructure, and .then + object-pattern callback param. The comments show the resulting atomic imports.

```javascript
// await + object destructure
const { AddFilled } = await import('@fluentui/react-icons');
// → const { AddFilled } = await import('@fluentui/react-icons/svg/add');

// .then + object-pattern callback param
import('@fluentui/react-icons').then(({ AddFilled }) => …);
// → import('@fluentui/react-icons/svg/add').then(({ AddFilled }) => …);
```

--------------------------------

### Webpack loader configuration for font icons

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/react-icons-atomic-webpack-loader/README.md

Configures the loader to resolve icons from the fonts build. This changes icon resolution from @fluentui/react-icons/svg/* to @fluentui/react-icons/fonts/*. Non-icon exports (utils, providers) are unaffected.

```javascript
{
  test: /\.[mc]?[jt]sx?$/,
  enforce: 'pre',
  use: [
    {
      loader: '@fluentui/react-icons-atomic-webpack-loader',
      options: {
        iconVariant: 'fonts',
      },
    },
  ],
}
```

--------------------------------

### iOS usage with UIImage and tint color

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/ios/README.md

Create a UIImage from a FluentIcon enum. Use the `tintColor` property or the `tintColor:` initializer to apply a tint.

```swift
import FluentIcons

UIImage(fluent: .appStore24Filled)

# To specify a tint color
let imageView = UIImage(fluent: .appStore24Regular)
imageView.tintColor = .label

# or
let imageView = UIImage(fluent: .appStore24Regular, tintColor: .label)
```

--------------------------------

### Import individual icon variants from grouped files

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/docsite/stories/Icons/IconsAtomicAPI.mdx

Icons are available via two export maps: `@fluentui/react-icons/svg/*` for SVG-based icons and `@fluentui/react-icons/fonts/*` for font-based icons. Utility modules `@fluentui/react-icons/utils` and `@fluentui/react-icons/providers` are also available. This example imports specific variants from grouped files and renders them in a component.

```tsx
// Import individual icon variants from grouped files
import { AccessTime20Filled, AccessTime24Filled, AccessTime20Regular } from '@fluentui/react-icons/svg/access-time';
import { Add16Filled, Add20Filled } from '@fluentui/react-icons/fonts/add';

function MyComponent() {
  return (
    <>
      <AccessTime20Filled />
      <Add16Filled />
    </>
  );
}
```

--------------------------------

### Headless API: Option B - target data attribute with custom CSS

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/docsite/stories/FileTypeIcons/FileTypeIconsDescription.md

Provides custom CSS to style the headless icon by targeting the `data-fui-filetype-icon` attribute. This is an alternative to the opt-in stylesheet, allowing full control over styling without the Griffel runtime.

```css
/* Option B: target the data attribute (or pass your own className) with your own CSS */
[data-fui-filetype-icon] {
  display: inline-block;
  object-fit: contain;
}
```

--------------------------------

### Remove unused icons script for CocoaPods

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/ios/README.md

Run the remove-unused-fluent-icons script to strip unused assets from your app when using CocoaPods.

```bash
ICON_SOURCE_PATH="./Pods/FluentIcons"

$ICON_SOURCE_PATH/ios/remove-unused-fluent-icons/run \
	--path-to-source-code "." \
	--path-to-fluent-icon-source $ICON_SOURCE_PATH
```

--------------------------------

### Webpack loader configuration for SVG sprite icons

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/react-icons-atomic-webpack-loader/README.md

Configures the loader to resolve icons from the svg-sprite build. This changes icon resolution from @fluentui/react-icons/svg/* to @fluentui/react-icons/svg-sprite/*. Non-icon exports (utils, providers) are unaffected.

```javascript
{
  test: /\.[mc]?[jt]sx?$/,
  enforce: 'pre',
  use: [
    {
      loader: '@fluentui/react-icons-atomic-webpack-loader',
      options: {
        iconVariant: 'svg-sprite',
      },
    },
  ],
}
```

--------------------------------

### Import and render AccessTime20Filled icon

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/react-native-icons/README.md

Import the 20px Filled icon and render it inside a React Native component. The icon is sized to 1em by default and can be scaled. Styling is not yet supported due to RNSVG limitations.

```tsx
import { AccessTime20Filled } from '@fluentui/react-native-icons';

const FluentIconsTest: React.FunctionComponent = () => {
  return (
    <React.Fragment>
      <View style={{ flexDirection: 'column', alignItems: 'flex-start' }}>
        <View style={{ flexDirection: 'row' }}>
          <AccessTime20Filled />
        </View>
      </View>
    </React.Fragment>
  );
};
```

--------------------------------

### Import headless utilities

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/react-icons/docs/headless.md

The headless entry point re-exports all core utilities including icon factories, hooks, CSS class name constants, data attribute constants, context providers, and the `cx` helper. Comments show the literal values for constants.

```tsx
import {
  // Icon factories
  createFluentIcon,
  bundleIcon,

  // Core hook
  useIconState,

  // CSS class name constants (for consumer targeting)
  iconClassName, // 'fui-Icon'
  iconFilledClassName, // 'fui-Icon-filled'
  iconRegularClassName, // 'fui-Icon-regular'
  iconLightClassName, // 'fui-Icon-light'
  iconColorClassName, // 'fui-Icon-color'
  fontIconClassName, // 'fui-Icon-font'

  // Data attribute constants
  DATA_FUI_ICON, // 'data-fui-icon'
  DATA_FUI_ICON_RTL, // 'data-fui-icon-rtl'
  DATA_FUI_ICON_HIDDEN, // 'data-fui-icon-hidden'
  DATA_FUI_ICON_FONT, // 'data-fui-icon-font'

  // Context
  IconDirectionContextProvider,
  useIconContext,

  // Class name helper
  cx,
} from '@fluentui/react-icons/headless';
```

--------------------------------

### Dynamic import of barrel not rewritten (warning)

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/react-icons-atomic-webpack-loader/README.md

Shows a dynamic import of the full barrel that the loader does not rewrite, pulling the entire icon set into the async chunk. The loader emits a warning when it detects this pattern.

```javascript
// ⚠️ Not rewritten — the ENTIRE icon set is pulled into the async chunk.
const { AddFilled } = await import('@fluentui/react-icons');
React.lazy(() => import('@fluentui/react-icons'));
```

--------------------------------

### Grouping names from different atoms into Promise.all

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/react-icons-atomic-webpack-loader/README.md

When names come from different atoms, the loader groups them into a positional Promise.all with destructured results. This changes the emitted runtime structure to parallel chunk loading and positional destructuring.

```javascript
const { AddFilled, ArrowLeftRegular } = await import('@fluentui/react-icons');
// →
const [{ AddFilled }, { ArrowLeftRegular }] = await Promise.all([
  import('@fluentui/react-icons/svg/add'),
  import('@fluentui/react-icons/svg/arrow-left'),
]);
```

--------------------------------

### Configure moduleGranularity per loader rule for icon and family granularity

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/react-icons-atomic-webpack-loader/README.md

Shows a webpack config with two loader rules: one for app source and fluent atoms using 'icon' granularity, and another for an icon picker source using 'family' granularity. The 'icon' rule excludes the icon picker source to avoid high-cardinality areas. The generated atom directory stays in the icon rule because query-selected requests need the loader's second pass; the 'moduleGranularity' option is not consulted during that pass.

```javascript
const path = require('path');

const loader = require.resolve('@fluentui/react-icons-atomic-webpack-loader');
const appSource = path.resolve(__dirname, 'src');
const iconPickerSource = path.resolve(appSource, 'icon-picker');
const fluentAtoms = /node_modules[\\/]@fluentui[\\/]react-(?:brand-)?icons[\\/]lib[\\/]atoms[\\/]/;

module.exports = {
  module: {
    rules: [
      {
        test: /\.[mc]?[jt]sx?$/,
        include: [appSource, fluentAtoms],
        exclude: iconPickerSource,
        enforce: 'pre',
        loader,
        options: { moduleGranularity: 'icon' },
      },
      {
        test: /\.[mc]?[jt]sx?$/,
        include: iconPickerSource,
        enforce: 'pre',
        loader,
        options: { moduleGranularity: 'family' },
      },
    ],
  },
};
```

--------------------------------

### Configure iconVariant and fallbackVariant for system and brand icons

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/react-icons-atomic-webpack-loader/README.md

Resolves system icons to fonts while keeping brand icons on svg (their only variant). The loader applies iconVariant per module; if unsupported, it uses fallbackVariant if set and supported, otherwise warns and falls back to svg, or fails with a descriptive error if no fallbackVariant is set. Resolution is lazy and per file, so files importing only @fluentui/react-icons never error about brand icons.

```javascript
// Resolve system icons to fonts, but keep brand icons on svg (their only variant).
{
  loader: '@fluentui/react-icons-atomic-webpack-loader',
  options: {
    iconVariant: 'fonts',
    fallbackVariant: 'svg',
  },
}
```

--------------------------------

### Webpack Config with node_modules Include Rule

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/react-icons-atomic-webpack-loader/README.md

Adds a separate rule to cover dependencies when existing rules exclude node_modules. The include pattern targets node_modules paths so the loader can transform barrel imports in third-party packages.

```javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.[mc]?[jt]sx?$/,
        include: /[\\/]node_modules[\\/]/,
        enforce: 'pre',
        use: ['@fluentui/react-icons-atomic-webpack-loader'],
      },
      // … your other rules (babel-loader, ts-loader, etc.)
    ],
  },
};
```

--------------------------------

### Import headless utilities

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/docsite/stories/Icons/Headless/IconsHeadless.md

Import core utilities from the atomic `@fluentui/react-icons/headless/utils` subpath for best tree-shaking. Includes icon factories, hooks, CSS class name constants, data attribute constants, context providers, and a class name helper.

```tsx
import {
  // Icon factories
  createFluentIcon,
  bundleIcon,

  // Core hook
  useIconState,

  // CSS class name constants (for consumer targeting)
  iconClassName, // 'fui-Icon'
  iconFilledClassName, // 'fui-Icon-filled'
  iconRegularClassName, // 'fui-Icon-regular'
  iconLightClassName, // 'fui-Icon-light'
  iconColorClassName, // 'fui-Icon-color'
  fontIconClassName, // 'fui-Icon-font'

  // Data attribute constants
  DATA_FUI_ICON, // 'data-fui-icon'
  DATA_FUI_ICON_RTL, // 'data-fui-icon-rtl'
  DATA_FUI_ICON_HIDDEN, // 'data-fui-icon-hidden'
  DATA_FUI_ICON_FONT, // 'data-fui-icon-font'

  // Context
  IconDirectionContextProvider,
  useIconContext,

  // Class name helper
  cx,
} from '@fluentui/react-icons/headless/utils';
```

--------------------------------

### Targeted webpack rule with include for moduleGranularity: 'icon'

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/react-icons-atomic-webpack-loader/README.md

Reduces rule-matching overhead by limiting the loader to the application source and known dependencies. The include list must contain every third-party importer to rewrite; otherwise use the comprehensive rule without include. The loader's source-text pre-check skips files that do not reference a supported Fluent icon package.

```JavaScript
const path = require('path');

{
  test: /\.[mc]?[jt]sx?$/,
  include: [
    path.resolve(__dirname, 'src'),
    path.dirname(require.resolve('known-dependency/package.json')),
    /node_modules[\\/]@fluentui[\\/]react-(?:brand-)?icons[\\/]lib[\\/]atoms[\\/]/,
  ],
  enforce: 'pre',
  use: [
    {
      loader: '@fluentui/react-icons-atomic-webpack-loader',
      options: { moduleGranularity: 'icon' },
    },
  ],
}
```

--------------------------------

### Optimized atomic imports for different targets

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/react-icons/docs/build-transforms.md

The transform rewrites the barrel import to an atomic deep import. The target path varies: SVG, SVG sprites (preview), font icons, headless SVG, or headless fonts. Replace 'svg' with the appropriate path for your setup.

```tsx
// SVG (standard)
import { AccessTime24Filled } from '@fluentui/react-icons/svg/access-time';
```

```tsx
// SVG sprites (⚠️ preview)
import { AccessTime24Filled } from '@fluentui/react-icons/svg-sprite/access-time';
```

```tsx
// Font icons
import { AccessTime24Filled } from '@fluentui/react-icons/fonts/access-time';
```

```tsx
// Headless API (SVG)
import { AccessTime24Filled } from '@fluentui/react-icons/headless/svg/access-time';
```

```tsx
// Headless API (fonts)
import { AccessTime24Filled } from '@fluentui/react-icons/headless/fonts/access-time';
```

--------------------------------

### Root package.json resolutions for @griffel/core and @griffel/react

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/docs/single-version-policy.md

Install-time overrides in the workspace root package.json pin @griffel/core to 1.20.1 and @griffel/react to 1.6.1. These keep the published ^1.6.1 ranges at the low end because Griffel 1.7+ uses TypeScript 4.5+ syntax that the pinned TypeScript 4.1.6 cannot parse, and because Griffel 1.7.6 / core 1.21.3 add ~1.1 kB minified to the FileTypeIcon fixture, tripping the 1 kB monosize threshold. A bare key is used because every consumer needs the same version; prefer a scoped parent/child key when only one workspace needs the override.

```jsonc
"resolutions": {
  "@griffel/core": "1.20.1",
  "@griffel/react": "1.6.1"
}
```

--------------------------------

### Build release binary and copy to repo

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/ios/remove-unused-fluent-icons/README.md

Builds the release binary with swift build and copies it to the repo root as 'run'.

```bash
cd ios/remove-unused-fluent-icons
```

```bash
swift build -c release
yes | cp .build/release/remove-unused-fluent-icons run
```

--------------------------------

### Catalog configuration for workspace-owned binaries

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/docs/single-version-policy.md

When a workspace must own a binary to avoid `yarn run -T` overhead in loops, declare the tool in a catalog in `.yarnrc.yml` and reference it with `catalog:` in the workspace's `package.json`. This keeps the version in one place and lets the loop call the binary by bare name, saving ~112ms per call. Add the package to the syncpack allowlist so the root-only devDependency rule does not fire.

```yaml
# .yarnrc.yml
catalog:
  avocado: 1.0.0
```

```jsonc
// importer/package.json
{
  "devDependencies": { "avocado": "catalog:" },
  "scripts": {
    // bare name: no yarn process, no `sh -c` wrapper, ~112ms per call instead of ~440ms
    "optimize:android": "find ./dist/ -type d -exec avocado -q {} \\;",
  },
}
```

--------------------------------

### Rule options configuration (sources array)

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/eslint-plugin-react-icons/docs/rules/prefer-resizable.md

Configures the rule with a 'warn' severity and a sources array listing module sources treated as Fluent icon packages. Sources are matched exactly or as a subpath prefix, e.g. '@fluentui/react-icons/fonts/send'.

```jsonc
{
  "@fluentui/react-icons/prefer-resizable": [
    "warn",
    {
      // Module sources treated as Fluent icon packages (matched exactly or as a
      // subpath prefix, e.g. "@fluentui/react-icons/fonts/send").
      "sources": ["@fluentui/react-icons", "@fluentui/react-brand-icons"],
    },
  ],
}
```

--------------------------------

### Running the test suite

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/react-icons-svg-sprite-subsetting-webpack-plugin/SPEC.md

Commands to run the full test suite or individual test scripts for atomic, merged, inline, reference, and validation modes.

```sh
# Full test suite (all modes)
yarn nx run react-icons-svg-sprite-subsetting-webpack-plugin:test

# Individual test scripts
yarn test:atomic      # atomic mode build + validation
yarn test:merged      # merged mode build + validation
yarn test:inline      # inline injection build + validation
yarn test:reference   # reference injection build + validation
yarn test:validation  # constructor validation
```

--------------------------------

### Generate the Xcode project with xed

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/ios/remove-unused-fluent-icons/README.md

Opens the project in Xcode using the xed command-line tool.

```bash
xed .
```

--------------------------------

### Webpack config with atomic loader

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/docsite/stories/Icons/IconsBuildTransforms.mdx

Add the loader as an enforce: 'pre' rule to run before other loaders. Do not exclude node_modules.

```js
// @filename webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.[mc]?[jt]sx?$/,
        enforce: 'pre',
        use: ['@fluentui/react-icons-atomic-webpack-loader'],
      },
      // … your other rules (babel-loader, ts-loader, etc.)
    ],
  },
};
```

--------------------------------

### Flat Config: Use recommended config in eslint.config.js

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/eslint-plugin-react-icons/README.md

For ESLint 9+ flat config, add the plugin's recommended config to your eslint.config.js.

```js
const fluentuiReactIcons = require('@fluentui/eslint-plugin-react-icons');

module.exports = [
  fluentuiReactIcons.configs.recommended,
  // Your other configs...
];
```

--------------------------------

### Test directory structure

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/react-icons-svg-sprite-subsetting-webpack-plugin/SPEC.md

Shows the layout of the test directory, including webpack config, validation tests, source entries, and mock sprite modules used by the test suite.

```text
test/
├── webpack.config.js         # Configurable via env vars
├── validation.js             # Constructor validation tests
├── src/
│   ├── atomic.js             # Entry: imports BackpackFilled, CalculatorFilled
│   └── merged.js             # Entry: same imports
└── __mock__/
    └── react-icons/lib/atoms/svg-sprite/
        ├── backpack.js       # 18 exports (various sizes/styles)
        ├── backpack.svg      # 18 <symbol> elements
        ├── calculator.js     # 6 exports
        └── calculator.svg    # 6 <symbol> elements
```

--------------------------------

### Use FileTypeIcon with FileIconType const object

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/react-icons-file-type/README.md

`FileIconType` is now a `const` object, not a TypeScript `enum`. Value usage like `FileIconType.folder` still works, but reverse lookup `FileIconType[7]` is not available.

```tsx
import { FileTypeIcon, FileIconType } from '@fluentui/react-icons-file-type';
<FileTypeIcon type={FileIconType.folder} size={24} />;
```

--------------------------------

### Import headless CSS for font icons

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/docsite/stories/Icons/Headless/IconsHeadless.md

Additional CSS import for font icons. `fonts/styles.css` contains `@font-face` declarations with relative paths to font files; your bundler resolves them automatically.

```ts
import '@fluentui/react-icons/headless/fonts/styles.css';
import '@fluentui/react-icons/headless/styles.css';
```

--------------------------------

### Configure onDuplicateInstances option

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/react-icons-font-subsetting-webpack-plugin/README.md

Set the plugin's onDuplicateInstances option to 'error' to fail the build when multiple @fluentui/react-icons package instances are detected. Default is 'warn', which leaves fonts un-subset and warns with involved paths.

```javascript
new FluentUIReactIconsFontSubsettingPlugin({ onDuplicateInstances: 'error' });
```

--------------------------------

### Correct usage with resizable icons (SendRegular, Icons.SendRegular, Battery10Regular, Fps120Regular)

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/eslint-plugin-react-icons/docs/rules/prefer-resizable.md

Shows the preferred resizable icons rendered at 1em, scaling via fontSize. Also demonstrates that product names ending in size-shaped numbers (Battery10Regular, Fps120Regular) are not flagged due to a collision denylist.

```tsx
import { SendRegular } from '@fluentui/react-icons';
import * as Icons from '@fluentui/react-icons';

const a = <SendRegular fontSize={24} />;
const b = <Icons.SendRegular />;

// Product names that merely end in a size-shaped number are fine:
import { Battery10Regular, Fps120Regular } from '@fluentui/react-icons';
```

--------------------------------

### v8: Initialize and render FileTypeIcon via Icon component

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/docsite/stories/FileTypeIcons/FileTypeIconsMigration.mdx

In v8, you must call initializeFileTypeIcons() once at startup and render through the v8 Icon component with getFileTypeIconProps.

```tsx
// v8
import { initializeFileTypeIcons, getFileTypeIconProps } from '@fluentui/react-file-type-icons';
import { Icon } from '@fluentui/react';

// once, at app startup
initializeFileTypeIcons();

<Icon {...getFileTypeIconProps({ extension: 'docx', size: 24 })} />;
```

--------------------------------

### Loader options for iconVariant and headless

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/docsite/stories/Icons/IconsBuildTransforms.mdx

Pass iconVariant to target a different implementation ('svg' default, 'svg-sprite', or 'fonts') and headless: true for the Headless API.

```js
{
  test: /\.[mc]?[jt]sx?$/,
  enforce: 'pre',
  use: [
    {
      loader: '@fluentui/react-icons-atomic-webpack-loader',
      // e.g. headless font icons
      options: { iconVariant: 'fonts', headless: true },
    },
  ],
}
```

--------------------------------

### Use yarn run -T for root-owned binaries in package scripts

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/docs/single-version-policy.md

Because yarn does not put node_modules/.bin on PATH for workspace scripts, call root binaries with the top-level flag `yarn run -T`. The flag only works on the explicit `run` command, not `yarn -T`. Note that yarn's portable shell expands globs in environment assignments, so quote values like `NAME=sprite.[contenthash].svg` to avoid `No matches found`.

```jsonc
{
  "scripts": {
    "lint": "yarn run -T eslint src package.json", // resolves the root eslint
    "build": "yarn run -T tsc -p .",
  },
}
```

--------------------------------

### Reference icon with require

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/svg-icons/README.md

Uses require to load an icon module and assign it to a variable.

```ts
var icon = require('@fluentui/svg-icons/icons/add_20_filled.svg');

```

--------------------------------

### Create a patch with yarn patch and yarn patch-commit

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/docs/patches.md

Run `yarn patch <package-name>` to open a temporary folder, edit the files there, then run `yarn patch-commit -s <printed-folder>` to write the patchfile to `.yarn/patches/` and rewire `package.json` automatically. Commit both the patchfile and the updated `package.json`.

```sh
yarn patch <package-name>
# edit the files in the printed temporary folder
yarn patch-commit -s <printed-folder>
```

--------------------------------

### Tint MenuItem icon with XML iconTint attribute

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/android/README.md

Use the iconTint attribute to apply a color tint to a MenuItem's icon. The custom attribute namespace (app:iconTint) provides backwards compatibility since framework support starts from API26+.

```XML
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/menu_done"
        android:icon="@drawable/ic_fluent_checkmark_24_regular"
        android:title="Done"
        app:iconTint="@android:color/white"
        app:showAsAction="always"/>
</menu>
```

--------------------------------

### Bundle Color Icon with Filled Variant for HCM Workaround

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/react-icons/README.md

Workaround for High Contrast Mode non-compliance: bundle a Color icon with its Filled variant and switch between them using a Griffel media query. Increases bundle size because both variants are included.

```tsx
import { makeStyles } from '@griffel/react';
import { bundleIcon, iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
import { CodeBlock48Color, CodeBlock48Filled } from '@fluentui/react-icons';

const CodeBlock48ColorFixed = bundleIcon(CodeBlock48Filled, CodeBlock48Color);

const useStyles = makeStyles({
  icon: {
    [`& .${iconFilledClassName}`]: {
      display: 'none',
    },
    [`& .${iconRegularClassName}`]: {
      display: 'inline',
    },

    '@media (forced-colors: active)': {
      [`& .${iconFilledClassName}`]: {
        display: 'inline',
      },
      [`& .${iconRegularClassName}`]: {
        display: 'none',
      },
    },
  },
});

function MyComponent() {
  const styles = useStyles();
  return <CodeBlock48ColorFixed className={styles.icon} />;
}
```

--------------------------------

### Color icon rerouting with iconVariant: 'fonts'

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/react-icons-atomic-webpack-loader/README.md

When a color icon (e.g., AddCircleColor) is imported under a color-less variant like 'fonts', the loader reroutes that import to a color-capable variant (svg or svg-sprite) and emits a warning. Rerouting is per specifier, so color and non-color icons in the same statement resolve independently.

```javascript
// iconVariant: 'fonts'
import { AddFilled, AddCircleColor } from '@fluentui/react-icons';
// →
import { AddFilled } from '@fluentui/react-icons/fonts/add';
import { AddCircleColor } from '@fluentui/react-icons/svg/add-circle';
```

--------------------------------

### v9: Render FileTypeIcon directly with props

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/docsite/stories/FileTypeIcons/FileTypeIconsMigration.mdx

In v9, there is no global registry and no initializeFileTypeIcons(). Render FileTypeIcon directly with the same options as props: extension, type, size, imageFileType.

```tsx
// v9
import { FileTypeIcon } from '@fluentui/react-icons-file-type';

<FileTypeIcon extension="docx" size={24} />;
```

--------------------------------

### Use bundleIcon with headless icons

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/docsite/stories/Icons/Headless/IconsHeadless.md

`bundleIcon` works identically to the standard API. Combines filled and regular variants into a single component that switches based on the `filled` prop.

```tsx
import '@fluentui/react-icons/headless/styles.css';
import { bundleIcon } from '@fluentui/react-icons/headless/utils';
import { AccessTimeFilled, AccessTimeRegular } from '@fluentui/react-icons/headless/svg/access-time';

const AccessTime = bundleIcon(AccessTimeFilled, AccessTimeRegular);

function MyComponent() {
  return <AccessTime filled aria-label="Access time" />;
}
```

--------------------------------

### Tint TextView compound drawable with XML drawableTint attribute

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/android/README.md

Use the drawableTint attribute to apply a color tint to a TextView's compound drawable icon. The custom attribute namespace (app:drawableTint) provides backwards compatibility since framework support starts from API24+.

```XML
<TextView
    ...
    android:text="Done"
    android:drawableStart="@drawable/ic_fluent_checkmark_24_regular"
    app:drawableTint="@android:color/white"/>
```

--------------------------------

### Import a general icon component

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/react-icons/README.md

Import icons from the @fluentui/react-icons package using the pattern `import { [Componentname][variant] } from '@fluentui/react-icons'`. This is the standard way to use the scalable icon offerings.

```tsx
import { AccessTimeFilled } from '@fluentui/react-icons';
```

--------------------------------

### Tint ImageView drawable with XML attributes

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/android/README.md

Use the tint attribute to apply a color tint to an ImageView's drawable. The custom attribute namespace (app:tint) provides backwards compatibility since framework support starts from API21+. The framework android:tint is also acceptable for API21+ apps.

```XML
<ImageView
    ...
    android:src="@drawable/ic_fluent_checkmark_24_regular"
    app:tint="@android:color/white"
    android:tint="@android:color/white"/> // OK to use just the framework one too since most MSFT apps are API21+
```

--------------------------------

### Configure webpack with atomic loader and font subsetting plugin

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/docsite/stories/Icons/IconsBuildTransforms.mdx

Webpack configuration that pairs the atomic loader with iconVariant: 'fonts' and the font subsetting plugin. Requires optimization.usedExports to be enabled (default in production mode). Without the plugin, full font files are bundled, which is not recommended.

```javascript
// @filename webpack.config.js
const {
  default: FluentUIReactIconsFontSubsettingPlugin,
} = require('@fluentui/react-icons-font-subsetting-webpack-plugin');

module.exports = {
  module: {
    rules: [
      // The atomic loader from step 1
      {
        test: /\.[mc]?[jt]sx?$/,
        enforce: 'pre',
        use: [
          {
            loader: '@fluentui/react-icons-atomic-webpack-loader',
            options: { iconVariant: 'fonts' },
          },
        ],
      },
      // Treat the font files as webpack assets so they can be subset
      {
        test: /\.(ttf|woff2?)$/,
        type: 'asset',
      },
    ],
  },
  plugins: [
    // Subsets font files to only the glyphs used by your build
    new FluentUIReactIconsFontSubsettingPlugin(),
  ],
};
```

--------------------------------

### Build sprite files with yarn build

Source: https://github.com/microsoft/fluentui-system-icons/blob/main/packages/svg-sprites/README.md

Runs the build process to generate sprite files from source icons. The build copies icons, renames files, removes fills, optimizes SVGs, and generates sprites using parallel processing.

```bash
yarn build
```
Tokens:
Raw