Predefined Icons Library in Syncfusion^® React Component

20 Aug 202520 minutes to read

Syncfusion’s icon library provides an extensive collection of pre-designed icons for enhancing user interfaces in React applications. These icons are available as base64 formatted font icons, enabling the creation of visually consistent designs with minimal effort.

Referring icons in the React application

Icons can be referenced in a React application using the following methods:

npm package – Access icons via the npm package.
CDN reference – Access icons via CDN-hosted resources.

The npm package

All Syncfusion^® theme icons are distributed in the ej2-icons package, available on the npmjs.com public registry. This package includes both CSS and SCSS files supporting all themes.

To use these icons, install the ej2-icons npm package:

npm install @syncfusion/ej2-icons

Then import the desired theme’s icon stylesheet in your application:

[src/App.css]

@import "../node_modules/@syncfusion/ej2-icons/styles/<theme_name>.css";

To apply these styles in your application, ensure you import App.css in the src/App.tsx file.

Example:

@import "../node_modules/@syncfusion/ej2-icons/styles/material.css";

CDN Reference

Syncfusion^® theme icons are also available via CDN. Reference the correct version to ensure compatibility with your Syncfusion^® React package.

To use CDN-hosted icons, add a link tag in your HTML file’s head section:

<!-- Bootstrap5 -->
<head>
    <link href="https://cdn.syncfusion.com/ej2/ej2-icons/styles/bootstrap5.css" rel="stylesheet"/>
</head>
<!-- Material -->
<head>
    <link href="https://cdn.syncfusion.com/ej2/ej2-icons/styles/material.css" rel="stylesheet"/>
</head>

Steps to use the icons library

Create a React application as shown:

npx create-react-app my-app
cd my-app
npm start

For details on common setup and configuration, see getting started with the Syncfusion^® React application.

Using icons directly in HTML elements

Syncfusion^® icons can be rendered by assigning the e-icons class (which provides font icon styling) and the specific icon class prefixed with e- to an HTML element.

Steps to render a Syncfusion^® icon directly:

Add the e-icons class to the desired HTML element.
Add the desired icon class (e.g., e-paste) as listed in the available icons section. For example:
```
 .e-paste:before {
     content:'\e355';
 }
```
Use both the e-icons and specific icon class on your element:
```
 <span class="e-icons e-paste"></span>
```

Reference the icons library in your index.html file with a CDN link:

 <link href="https://cdn.syncfusion.com/ej2/ej2-icons/styles/bootstrap5.css" rel="stylesheet" />

A complete example is shown below.

index.jsx
index.tsx
index.html
import * as React from 'react';
import * as ReactDom from 'react-dom';
function App() {
    return (<div className="icon-bar">
               <span className="e-icons e-cut"></span>
               <span className="e-icons e-copy"></span>
               <span className="e-icons e-paste"></span>
            </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));
import * as React from 'react';
    import * as ReactDom from 'react-dom';
    function App() {
        return (
            <div className="icon-bar">
               <span className="e-icons e-cut"></span>
               <span className="e-icons e-copy"></span>
               <span className="e-icons e-paste"></span>
            </div>
        );
    }
    export default App;
    ReactDom.render(<App />,document.getElementById('sample'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Button</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-react-grids/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='sample'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Icon size

The ej2-icons package provides class-based options for varying icon sizes. Choose the size mode suitable for your interface—e-large for touch-friendly elements, or e-small and e-medium for pointer-based interactions.

The available size classes are:

e-small – Sets icon size to 8px.
e-medium – Sets icon size to 16px.
e-large – Sets icon size to 24px.

Example:

<span class="e-icons e-small e-search"></span>
<span class="e-icons e-medium e-search"></span>
<span class="e-icons e-large e-search"></span>

index.jsx
index.tsx
index.html
import * as React from 'react';
import * as ReactDom from 'react-dom';
function App() {
    return (<div>
                <p><b>Smaller Icons</b></p>
                <div className="small-icon-bar">
                    <span className="e-icons e-small e-cut"></span>
                    <span className="e-icons e-small e-copy"></span>
                    <span className="e-icons e-small e-paste"></span>
                </div>
                <p><b>Medium Icons</b></p>
                <div className="medium-icon-bar">
                    <span className="e-icons e-medium e-cut"></span>
                    <span className="e-icons e-medium e-copy"></span>
                    <span className="e-icons e-medium e-paste"></span>
                </div>
                <p><b>Larger Icons</b></p>
                <div className="large-icon-bar">
                    <span className="e-icons e-large e-cut"></span>
                    <span className="e-icons e-large e-copy"></span>
                    <span className="e-icons e-large e-paste"></span>
                </div>
            </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));
import * as React from 'react';
    import * as ReactDom from 'react-dom';

    function App() {
        return (
            <div>
                <p><b>Smaller Icons</b></p>
                <div className="small-icon-bar">
                    <span className="e-icons e-small e-cut"></span>
                    <span className="e-icons e-small e-copy"></span>
                    <span className="e-icons e-small e-paste"></span>
                </div>
                <p><b>Medium Icons</b></p>
                <div className="medium-icon-bar">
                    <span className="e-icons e-medium e-cut"></span>
                    <span className="e-icons e-medium e-copy"></span>
                    <span className="e-icons e-medium e-paste"></span>
                </div>
                <p><b>Larger Icons</b></p>
                <div className="large-icon-bar">
                    <span className="e-icons e-large e-cut"></span>
                    <span className="e-icons e-large e-copy"></span>
                    <span className="e-icons e-large e-paste"></span>
                </div>
            </div>
        );
    }
    export default App;
    ReactDom.render(<App />,document.getElementById('sample'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Button</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-react-grids/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='sample'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Customizing Icon Appearance

Syncfusion^® icons support further customization by modifying the e-icons class. Changing icon color or size enables alignment with your application’s visual guidelines and improves accessibility or emphasis where needed.

For example, to apply a custom color to an icon:

index.jsx
index.tsx
index.html
import * as React from 'react';
import * as ReactDom from 'react-dom';
function App() {
    return (<div>
                <div className="icon-bar">
                    <span className="e-icons e-cut"></span>
                    <span className="e-icons e-copy"></span>
                    <span className="e-icons e-paste"></span>
                </div>
            </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));
import * as React from 'react';
    import * as ReactDom from 'react-dom';

    function App() {
        return (
            <div>
                <div className="icon-bar">
                    <span className="e-icons e-cut"></span>
                    <span className="e-icons e-copy"></span>
                    <span className="e-icons e-paste"></span>
                </div>
            </div>
        );
    }
    export default App;
    ReactDom.render(<App />,document.getElementById('sample'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Button</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-react-grids/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='sample'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Available Icons

The Essential^® JS 2 icon package includes a complete library of icons. Refer to the content section for each icon’s specific CSS class and code.

Predefined Icons Library in Syncfusion^® React Component

Referring icons in the React application

The npm package

CDN Reference

Steps to use the icons library

Using icons directly in HTML elements

Icon size

Customizing Icon Appearance

Available Icons

Material 3

Material

Fabric

Bootstrap

Bootstrap 4

Bootstrap 5

High Contrast

Tailwind CSS

Tailwind 3.4

Fluent 2

Fluent

See also

Predefined Icons Library in Syncfusion® React Component

Referring icons in the React application

The npm package

CDN Reference

Steps to use the icons library

Using icons directly in HTML elements

Icon size

Customizing Icon Appearance

Available Icons

Material 3

Material

Fabric

Bootstrap

Bootstrap 4

Bootstrap 5

High Contrast

Tailwind CSS

Tailwind 3.4

Fluent 2

Fluent

See also

Predefined Icons Library in Syncfusion^® React Component