Predefined icons library in Syncfusion^® React components

2 Feb 202620 minutes to read

Syncfusion’s icon library provides an extensive collection of pre-designed, font-based icons (embedded as base64 in themes) to enhance user interfaces in React applications. These icons ensure visual consistency across Syncfusion components and are available via npm or CDN with minimal setup.

Referencing icons in a React application

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

npm package — Install and import icon styles from npm.
CDN reference — Link to CDN-hosted icon styles.

The npm package

Syncfusion theme icons are distributed in the @syncfusion/ej2-icons package on npm. The package includes CSS/SCSS files for all supported themes.

Install the 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, ensure you import App.css in your src/App.tsx (or equivalent entry file).

Example:

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

CDN reference

Syncfusion^® theme icons are also available via CDN. To ensure compatibility with your installed Syncfusion React packages, use a version-specific CDN path that matches your EJ2 package version (for example, 32.1.19).

Include the appropriate <link> tag in the <head> section of your HTML:

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

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

Always match the version number in the CDN URL to the version of your @syncfusion/ej2-* packages to prevent icon mismatches or rendering issues.

Using the icons library

Syncfusion icons are rendered by applying the base class e-icons (which provides font styling) together with a specific icon class (prefixed with e-) to an HTML element.

Steps to render an icon:

Add the e-icons class to the desired HTML element.
Add the specific icon class (for example, e-paste) as listed in the available icons section.

Example HTML:

<span class="e-icons e-paste"></span>

The icon library defines each glyph using a CSS :before pseudo-element rule. For reference, the glyph for e-paste is defined as:

.e-paste:before {
  content: '\e355';
}

Reference the icons stylesheet in your application (via npm import or CDN link as shown above).

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/32.1.19/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-react-grids/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/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 utility classes to adjust icon size. Use the class that best fits your interface design — e-large for touch targets, or e-small/e-medium for compact layouts.

Available size classes:

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/32.1.19/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-react-grids/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/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 can be further customized by overriding styles on the e-icons class or the specific icon element. This allows alignment with your application’s design system, improved accessibility, or visual emphasis.

For example, to change the icon color:

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/32.1.19/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-react-grids/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/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 comprehensive library of icons across multiple themes. Each theme demo below shows the icon name, CSS class, and visual preview.

Search docs

Ask HelpBot

Search docs

Ask HelpBot

Predefined icons library in Syncfusion^® React components

Referencing icons in a React application

The npm package

CDN reference

Using the icons library

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 components

Referencing icons in a React application

The npm package

CDN reference

Using the icons library

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 components