Search results

React Icons Library

08 Dec 2022 / 5 minutes to read

The Syncfusion React library provides the set of base64 formatted font icons, that can be utilized in the Syncfusion React application.

Referring icons in React application

Using the below approaches the icons can be referenced in the React application,

  • npm packages - Used to refer icons in an application.
  • CDN - Used to refer complete css via static web assest.

Refer icons through npm package

All the theme icons are shipped in ej2-icons package. Icons can be referred from the npm package @syncfusion/ej2-icons. In ej2-icons packages, we have shipped both CSS and SCSS files for all themes.

To use the icons, install the npm package using the following command

Copied to clipboard
 npm install @syncfusion/ej2-icons

Referring icons in React application

Copied to clipboard
@import "../node_modules/@syncfusion/ej2-icons/<theme_name>.css";

Example:

Copied to clipboard
@import "../node_modules/@syncfusion/ej2-icons/material.css";

Refer icons through CDN reference

Instead of using a local resource on your server, you can use a cloud CDN to refer the icons.

Syncfusion Icons are available in the CDN. Make sure that the version in the URLs matches the version of the Syncfusion React package you are using.

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

Steps to use Icons library

Quick start for creating react application.

Copied to clipboard
npx create-react-app my-app
cd my-app
npm start

You can also refer Getting Started with Syncfusion React application for the introduction and configuring the common specifications.

Using icons directly in HTML element

The built-in Syncfusion icons can be rendered directly in the HTML element by defining e-icons class that contains the font-family and common property of font icons, and defining the available icon’s class with e- prefix.

The following steps explains the direct rendering of Syncfusion icon in the HTML element.

  1. Add the class name e-icons to the HTML element which needs to render the icon.
  2. Add the icon class with corresponding icon content from the available icons. For example, the below code snippet represents the search icon class.
Copied to clipboard
.e-search:before{
    content:'\e993';
}
  1. Add e-icons and e-search class to the HTML element.
Copied to clipboard
<span class="e-icons e-search"></span>
  1. Add the CDN link reference of icons library in the ~index.html file.
Copied to clipboard
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-icons/styles/bootstrap5.css" rel="stylesheet" />

The below code snippet represents the complete example of icon usage.

Source
Preview
index.jsx
index.html
index.tsx
Copied to clipboard
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'));
Copied to clipboard
<!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="//cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-react-grids/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/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>
</head>

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

</html>
Copied to clipboard
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'));

Icon size

ej2-icons package has options to represents the icons in different size modes. You can use the different icon size in your application based on touch or mouse mode. If you are using the touch mode, add e-large class to the component to make the icon easy interactable or you can add the e-small or e-medium class in mouse mode.

To change the icon size, add e-small, e-medium and e-large class in the HTML element.

  • e-small class set the icon size as 8px.
  • e-medium class set the icon size as 16px.
  • e-large class set the icon size as 24px.

    Example:

Copied to clipboard
<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>
Source
Preview
index.jsx
index.html
index.tsx
Copied to clipboard
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'));
Copied to clipboard
<!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="//cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-react-grids/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/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>
</head>

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

</html>
Copied to clipboard
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'));

Icon appearance customization

The Syncfusion React icon library can be customized its color and size by overriding the e-icons class.

Source
Preview
index.jsx
index.html
index.tsx
Copied to clipboard
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'));
Copied to clipboard
<!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="//cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-react-grids/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/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>
</head>

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

</html>
Copied to clipboard
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'));

Available Icons

The complete package of Essential JS 2 icons is listed in the following table. The corresponding icon content can be referred in the content section.

Material

Fabric

Bootstrap

Bootstrap 4

Bootstrap 5

High Contrast

Tailwind CSS

Fluent

See Also