Predefined Icons Library in Syncfusion React Component
19 Sep 202421 minutes to read
Syncfusion’s icon library is a collection of pre-designed icons that can be used to enhance the user interface of an application. This pre-designed icons are set of base64
formatted font icons. Utilizing this icon library can make it simpler to create a cohesive, visually pleasing design for an application.
Referring icons in the React application
Using the below approaches, the icons can be referenced in the React application.
-
npm package - Use the npm package to access icons.
-
CDN reference - Use the static web asset to access icons.
The npm package
All Syncfusion theme icons are shipped in the ej2-icons package, which is published on the npmjs.com public registry. This package contains both CSS and SCSS theme files for all themes.
Icons can be used from the npm package ej2-icons
. To use the icons, install the npm package using the following command:
npm install @syncfusion/ej2-icons
Refer to the following syntax to use icons in a React application:
[src/App.css]
@import "../node_modules/@syncfusion/ej2-icons/styles/<theme_name>.css";
To refer
App.css
in the application then import it in thesrc/App.tsx
file.
Example:
@import "../node_modules/@syncfusion/ej2-icons/styles/material.css";
CDN reference
All Syncfusion theme icons are available on the CDN. Instead of using a local resource on the server, use a cloud CDN to refer to the icons.
Make sure that the version of the icons in the URL matches the version of the Syncfusion React package. This will prevent compatibility issues and ensure that the correct version of the icons is loaded.
To use the icons from the CDN, refer to the icons by URLs in the application. This can be done by linking the icons in the HTML file by adding a link tag to the 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 icons library
Let’s create a React application using the following command:
npx create-react-app my-app
cd my-app
npm start
For an introduction and configuration of the common specifications, see getting started with the Syncfusion React application.
Using icons directly in HTML element
The built-in Syncfusion icons can be rendered directly in the HTML element by defining the e-icons
class, which contains the font-family and common properties of font icons, and defining the available icon’s class with the e-
prefix.
The following steps explain the direct rendering of the Syncfusion icon in the HTML element.
-
Add the class name
e-icons
to the HTML element that needs to render the icon. -
Add the icon class with corresponding icon content from the available icons. For example, the below code snippet represents the paste icon class.
.e-paste:before { content:'\e355'; }
-
Add
e-icons
ande-paste
classes to the HTML element.<span class="e-icons e-paste"></span>
-
Add the CDN link reference of icons library in the
~index.html
file.<link href="https://cdn.syncfusion.com/ej2/ej2-icons/styles/bootstrap5.css" rel="stylesheet" />
The below code snippet represents a complete example of icon usage.
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/27.1.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-react-grids/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/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 offers options to display icons in different size modes. A user can use different icon sizes in their application based on touch or mouse mode. If the user is using touch mode, add e-large
class to the element to make the icon easily interact, or add the e-small
or e-medium
class in mouse mode.
The pre-defined icon size is present in the available classes listed below.
-
e-small
- Sets the icon size as8px
. -
e-medium
- Sets the icon size to16px
. -
e-large
- Sets the icon size to24px
.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>
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/27.1.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-react-grids/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/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 appearance customization
The Syncfusion React icons can be customized with custom color and size by overriding the e-icons
class. Customizing the icons in the library can be useful for making the icons more visually appealing and fitting to the design of the application. For example, a user can change the color of an icon to match the color scheme of their application, or increase the size of an icon to make it more visible on smaller screens. It may also be useful for creating a consistent look and feel across different parts of the application. Overall, customizing the icons in the library can improve the overall user experience of the application.
In the example below, the icon color is customized with custom color.
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/27.1.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-react-grids/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/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 complete package of Essential JS 2 icons is listed below. The corresponding icon content can be referred in the content section.