@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

Icon components for Fluent UI React

This package provides utilities for creating svg icons, as well as set of customizable Icons.

To import ReactIcons components:

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