repository·main·Indexed 27 days ago
https://github.com/microsoft/fluentui-system-iconsA collection of modern icons from Microsoft for use across Android, iOS, macOS, Flutter, and web via SVG. The library includes support for multiple sizes (16, 20, 24, 28, 48) and styles (regular, filled, selector). It provides platform-specific implementations, including VectorDrawable resources for Android, a Flutter package, and Swift support for iOS and macOS via CocoaPods or Carthage. Additional tools include @fluentui/eslint-plugin-react-icons and @fluentui/react-icons-atomic-webpack-loader for optimizing React bundles.
The @fluentui/react-icons package provides icons as React components backed by SVG graphics. Icons are available in several styles:
WARNING
Coloricon variants are deprecated due to accessibility issues. Use other variants where possible.
The library uses a unified release cycle across its monorepo. Unlike standard semantic versioning, both minor features (new icons) and patch updates (bug fixes) are released as PATCH version bumps only.
2.0.X → 2.0.Y can include new features, icon additions, or breaking changes.2.X.X → 3.0.0) are reserved only for significant API redesigns.Recommendation: Always review the release notes when upgrading, even for patch versions, to check for icon changes.
data-* attribute selectors for styling, making it suitable for any React setup (Vite, Next.js, Remix, etc.) without a CSS-in-JS runtime. It provides smaller JavaScript bundles by moving icon styling to static CSS files.If you are using atomic imports from @fluentui/react-icons/fonts/* or @fluentui/react-icons/headless/fonts/*, you do not need to configure conditionNames. You only need to ensure font files are treated as webpack assets and include the plugin in your plugins array.
// webpack.config.js
const {
default: FluentUIReactIconsFontSubsettingPlugin,
} = require('@fluentui/react-icons-font-subsetting-webpack-plugin');
module.exports = {
module: {
rules: [
// Treat the font files as webpack assets
{
test: /\.(ttf|woff2?)$/,
type: 'asset',
},
],
},
plugins: [
// Include this plugin
new FluentUIReactIconsFontSubsettingPlugin(),
],
};In v9, there is no global registry and no need to call initializeFileTypeIcons(). Instead, render the FileTypeIcon component directly. The component accepts props such as extension, type, size, and imageFileType.
import { FileTypeIcon } from '@fluentui/react-icons-file-type';
<FileTypeIcon extension="docx" size={24} />The Headless API is a drop-in replacement for the standard icon API that removes the CSS-in-JS runtime dependency by using data-* attribute selectors and a static CSS file.
To use Headless SVG icons, you must import the headless CSS file in your application entry point to enable base icon layout and high-contrast mode support. Icons are grouped by kind and imported from @fluentui/react-icons/headless/svg/{icon-group}.
Note: SVG sprites are not currently available in the Headless API.
import '@fluentui/react-icons/headless/styles.css';
import {
AccessTime20Filled,
AccessTime24Filled,
AccessTime20Regular,
} from '@fluentui/react-icons/headless/svg/access-time';
import { Add16Filled, Add20Filled } from '@fluentui/react-icons/headless/svg/add';
function MyComponent() {
return (
<>
<AccessTime20Filled />
<Add16Filled />
</>
);
}The plugin optimizes @fluentui/react-icons/svg-sprite/* entrypoints by stripping unused <symbol> elements from SVGs. You can choose between three operating modes:
.svg imports. Each sprite is emitted as a separate, subsetted asset containing only the used symbols..svg imports to a single runtime module. A single merged sprite asset is emitted containing all used symbols from all sources. Requires MergedSpriteRuntimeModule to set a global URL..svg imports to an empty string. The merged sprite is built from symbols used by the HTML entrypoints and injected directly into the <body> tag of the HTML. Requires html-webpack-plugin.Mode Comparison Summary:
| Aspect | Atomic | Merged | Inline |
|---|---|---|---|
| SVG imports rewritten? | No | Yes (to mergedSpriteUrlModule) | Yes (to inlineSpriteUrlModule) |
| Runtime module injected? | No | Yes (MergedSpriteRuntimeModule) | No |
| Output assets | N subset sprite SVGs | 1 merged sprite SVG | None (embedded in HTML) |
| HTML injection | Optional preload links | Optional preload link | Inline <svg> in <body> |
Icons can be delivered using three different methods, depending on your requirements for bundle size, performance, and styling:
For projects not using Webpack, you can use babel-plugin-transform-imports. This requires a helper function to resolve the icon name to its atomic module path.
fluent-icons-transform.js) containing the resolveFluentIconImport logic..babelrc.js to use this helper within the transform-imports plugin.// @filename fluent-icons-transform.js
/**
* Resolves a @fluentui/react-icons import name to its atomic module path.
* @param {string} importName - The named export being imported.
* @param {string} [target='svg'] - The target subpath (e.g. 'svg', 'svg-sprite', 'fonts', 'headless/svg', 'headless/fonts').
* @returns {string} The resolved module path.
*/
function resolveFluentIconImport(importName, target = 'svg') {
if (importName === 'useIconContext' || importName === 'IconDirectionContextProvider') {
return '@fluentui/react-icons/providers';
}
const match = importName.match(/^(.+?)(\d+)?(Regular|Filled|Light|Color)$/);
if (!match) {
return '@fluentui/react-icons/utils';
}
return `@fluentui/react-icons/${target}/${kebabCase(match[1])}`;
}
function kebabCase(str) {
return str.replace(/[a-z\d](?=[A-Z])|[a-zA-Z](?=\d)|[A-Z](?=[A-Z][a-z])/g, '$&-').toLowerCase();
}
module.exports = { resolveFluentIconImport };// @filename .babelrc.js
const { resolveFluentIconImport } = require('./fluent-icons-transform');
module.exports = {
presets: [
// ... your preset configuration
],
plugins: [
[
'transform-imports',
{
'@fluentui/react-icons': {
// Change the second argument to match your target:
// 'svg' | 'svg-sprite' | 'fonts' | 'headless/svg' | 'headless/fonts'
transform: (importName) => resolveFluentIconImport(importName, 'svg'),
preventFullImport: false,
skipDefaultConversion: true,
},
},
],
],
};The following features are currently in Alpha and are only available via the alpha prerelease of the @fluentui/react-icons package. To use these preview features, install the alpha version using npm:
npm i @fluentui/react-icons@alphaTo build the remove-unused-fluent-icons tool from source, navigate to the tool's directory and use the Swift build command with the release configuration. After building, copy the resulting binary to the root of the tool directory and rename it to run.
cd ios/remove-unused-fluent-icons
swift build -c release
yes | cp .build/release/remove-unused-fluent-icons runTo use the font implementation instead of SVGs for performance reasons, specify "fluentIconFont" as a condition in your module resolution (Node.js >= 12.19.0 or Webpack >= 5.0.0).
// webpack.config.js
module.exports = {
//...
resolve: {
conditionNames: ['fluentIconFont', 'require', 'node'],
},
};