@fluentui/react-icons

What is @fluentui/react-icons?

@fluentui/react-icons is a package that provides a comprehensive set of icons for use in React applications. These icons are part of the Fluent UI design system, which is developed by Microsoft. The package allows developers to easily integrate high-quality, scalable icons into their projects, ensuring a consistent and visually appealing user interface.

What are @fluentui/react-icons's main functionalities?

Basic Icon Usage

This feature allows you to import and use individual icons from the @fluentui/react-icons package. The example demonstrates how to import the AddIcon and use it within a React component.

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

function App() {
  return (
    <div>
      <AddIcon />
    </div>
  );
}

export default App;

Customizing Icon Size

This feature allows you to customize the size of the icons. The example shows how to set the font size of the AddIcon to 24 pixels using inline styles.

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

function App() {
  return (
    <div>
      <AddIcon style={{ fontSize: '24px' }} />
    </div>
  );
}

export default App;

Customizing Icon Color

This feature allows you to customize the color of the icons. The example demonstrates how to change the color of the AddIcon to red using inline styles.

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

function App() {
  return (
    <div>
      <AddIcon style={{ color: 'red' }} />
    </div>
  );
}

export default App;

Other packages similar to @fluentui/react-icons

react-icons

react-icons is a popular package that provides a wide range of icons from various icon libraries, including Font Awesome, Material Design, and more. It offers a similar functionality to @fluentui/react-icons but with a broader selection of icon sets.

@material-ui/icons

@material-ui/icons is a package that provides Material Design icons for use in React applications. It is part of the Material-UI library and offers a similar functionality to @fluentui/react-icons but follows the Material Design guidelines.

fontawesome

fontawesome is a widely-used icon library that offers a vast collection of icons. The React component library for Font Awesome allows for easy integration of these icons into React applications. It provides similar functionality to @fluentui/react-icons but with a focus on the Font Awesome icon set.

README

@fluentui/react-icons

IMPORTANT PLEASE READ @fluentui/react-icons has been major bumped to 2.x. There are some key changes in the api and usages. The main ones are:

• The general icons are now resizeable using styling(i.e. scaling using the height and width props or using fontSize prop, etc). Ex: <AccessTimeFilled fontSize={40}>
• There is now a more general icon offering included with the sized icons. Instead of importing <AccessTime24Filled>, you just import <AccessTimeFilled>.
• The sized icons are still available, and are recommended if you know the specific size you want your icons to be. For the general case, the more general icons are available to you.

(Note: For those who were consuming @fluentui/react-icons v 0.x, we are releasing a new set of icons under @fluentui/react-icons v 1.x. You can still use 0.x version for the old icons, but if you major bump to 1.x, you will be using the new icons. The Fabric MDL2 SVG Icon set that is released with v 0.x has been rereleased in @fluentui/react-icons-mdl2.)

Fluent System Icons are a collection of familiar, friendly, and modern icons from Microsoft.

User story

@fluentui/react-icons are SVG based icons wrapped in a React element. Because each icon is its own element, you only need to import what you need for your application.

There are two different states of each icon, Filled and Regular, so you can choose what works best for your application. These are by default sized to 1em, and can be scaled up or down to suit your developer needs.

There are also helpful interfaces that will allow you to add styling to fit the icons to your specific application.

User flows

In order to use these icons, simply import them as import { [Componentname][state] } from @fluentui/react-icons as follows:

import { AccessTimeFilled } from "@fluentui/react-icons";

The previous icon offerings are scalable, but if you know what size you want to use for your icons, and you are not planning on using multiple sizes, it is recommended to use the sized icons. These are the same icons as the general case, but in multiple different sizes, built to look pixel perfect at those specific sizes. You can import the sized icons in a similar way:

import { AccessTime24Filled } from "@fluentui/react-icons";

You can also style the icons using the FluentIconsProps interface, with the className prop or the primaryFill prop.

Finally, you can bundle the Filled and Regular versions of each icon into a compound icon component using the bundleIcon method. The bundleIcon() function returns a component with both states of the icon, and you can then use the classnames iconFilledClassName and iconRegularClassName to style this compound component.

If you would like to get the bundled icon without any of the default styling, then add the filled prop to the new component and the icon will not have any default styling. To style this new icon, add a user defined stylesheet to the icon component.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { 
    AccessTimeFilled, 
    AccessTimeRegular,
    bundleIcon,
    iconFilledClassName,
    iconRegularClassName
} from "@fluentui/react-icons";
import { makeStyles } from "@fluentui/react-make-styles";


const iconStyleProps: FluentIconsProps = {
    primaryFill: "purple",
    className: "iconClass"
};

const useIconStyles = makeStyles({
    icon: {
        ":hover": {
            [`& .${iconFilledClassName}`]: {
                display: "none"
            },
            [`& .${iconRegularClassName}`]: {
                display: "inline"
            }
        }
    }
})

const AccessTime = bundleIcon(AccessTimeFilled, AccessTimeRegular)
const rootElement = document.getElementById("root");
const styles = useIconStyles();
ReactDOM.render(
    <div className={styles.icon}>
        <AccessTime aria-label="AccessTime" {...iconStyleProps} />
    </div>, 
    rootElement
    )

Using the icon font

If, for performance or other reasons, you wish to use the font implementation of these icons rather than the SVG implementation, you can specify "fluentIconFont" as a condition for the import, either via Node >= 12.19.0 or webpack >= 5.0.0.

// webpack.config.js
module.exports = {
  //...
  resolve: {
    conditionNames: ['fluentIconFont', 'require', 'node'],
  },
};

If you do choose this route, you may wish to use @fluentui/react-icons-font-subsetting-webpack-plugin to optimize the font assets.

Viewing the icons in a webpage

You can view the full list of available icons by type: regular or filled

Appendix and FAQ

:::info Find this document incomplete? Leave a comment! :::

tags: Templates Documentation