React Icons

The Syncfusion® React Icons library offers a comprehensive, scalable set of SVG-based icon components designed for modern React applications. Each icon components as an independent React component that supports standard SVG properties, enabling easy maintenance of consistent and customizable visuals across projects.

Getting Started

To start a new Vite project, refer to the Vite documentation. Once the Vite project is set up with default settings, you can add React components to the project.

Installing Syncfusion® React packages

To use the React icons, install the @syncfusion/react-icons package using the following command:

npm install @syncfusion/react-icons

npm install @syncfusion/react-icons

Adding Icon component

The built-in Syncfusion® React icons integrate directly into your applications. Each icon is an independent, customizable React component that supports standard SVG properties, such as width, height, and color, etc..

1. Import the required icon components (e.g., EditIcon, SearchIcon) from the Syncfusion^® react-icons package.

import { DownloadIcon, SaveIcon, EditIcon, SearchIcon } from '@syncfusion/react-icons';

import { DownloadIcon, SaveIcon, EditIcon, SearchIcon } from '@syncfusion/react-icons';

2. Add the icon components to your application, as shown in the following code example.

import { DownloadIcon, SaveIcon, EditIcon, SearchIcon } from '@syncfusion/react-icons';
import './icon-style.css';

export default function App() {
  return (
    <div className="syncfusion-icons">
      <div className="icon-grid">
        <div className="icon-item"><DownloadIcon className='sf-font-size-2xl'/>
          <p>Download</p>
        </div>
        <div className="icon-item"><SaveIcon className='sf-font-size-2xl'/>
          <p>Save</p>
        </div>
        <div className="icon-item"><EditIcon className='sf-font-size-2xl'/>
          <p>Edit</p>
        </div>
        <div className="icon-item"><SearchIcon className='sf-font-size-2xl'/>
          <p>Search</p>
        </div>
      </div>
    </div>
  );
}

import { DownloadIcon, SaveIcon, EditIcon, SearchIcon } from '@syncfusion/react-icons';
import './icon-style.css';

export default function App() {
  return (
    <div className="syncfusion-icons">
      <div className="icon-grid">
        <div className="icon-item"><DownloadIcon className='sf-font-size-2xl'/>
          <p>Download</p>
        </div>
        <div className="icon-item"><SaveIcon className='sf-font-size-2xl'/>
          <p>Save</p>
        </div>
        <div className="icon-item"><EditIcon className='sf-font-size-2xl'/>
          <p>Edit</p>
        </div>
        <div className="icon-item"><SearchIcon className='sf-font-size-2xl'/>
          <p>Search</p>
        </div>
      </div>
    </div>
  );
}

3. The following example demonstrates how to use the React icon components.

Download

Save

Edit

Customization

Syncfusion® React icons support customization through standard SVG properties. Each component renders with the following default attributes:

Width: 16px
Height: 16px
ViewBox: 0 0 24 24

These default values ensure a consistent icon size and alignment across your application. However, you can easily override these properties using standard SVG attributes.

Size and Color

You can customize the icon's size by adjusting the width and height properties, and change its appearance by modifying the color property.

The following example demonstrates how to apply various sizes and colors to the Syncfusion® React icons:

15 X 15px

(#4285F4)

22 X 22px

(#0F9D58)

35 X 35px

(#F4B400)

42 X 42px

(#DB4437)

Available icons

Explore the complete collection of Syncfusion^® React icons below. Utilize the search to quickly locate desired icons.