Predefined Icons Library in Syncfusion® EJ2 JavaScript Control

6 Feb 20269 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 JavaScript application

The icons can be referenced in a JavaScript application using the following approaches:

  • npm package - Install and import icons locally via npm.
  • CDN reference - Load icons from the Syncfusion CDN as a static web asset.

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 JavaScript application:

[src/styles/styles.css]

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

Example:

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

CDN reference

All Syncfusion® theme icons are available on the CDN. Using the CDN avoids hosting local assets and ensures consistent delivery across environments.

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, add a link tag to the page head that references the desired theme CSS file. Example links shown below are for illustration only—update the version segment to match the project’s installed Syncfusion packages.

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

Steps to use icons library

Let’s create a JavaScript application using the following command:

For an introduction and configuration of the common specifications, see getting started with the Syncfusion® JavaScript 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.

1.Add the class name e-icons to the HTML element that 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 paste icon class.

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

3.Add e-icons and e-paste classes to the HTML element.

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

4.Add the CDN link reference of icons library in the ~index.html file.

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

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 as 8px.
  • e-medium - Sets the icon size to 16px.

  • e-large - Sets the 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>

<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id="container">
        
        <div>
            <p><b>Smaller Icons</b></p>
            <div class="small-icon-bar">
                <span class="e-icons e-small e-cut"></span>
                <span class="e-icons e-small e-copy"></span>
                <span class="e-icons e-small e-paste"></span>
            </div>
            <p><b>Medium Icons</b></p>
            <div class="medium-icon-bar">
                <span class="e-icons e-medium e-cut"></span>
                <span class="e-icons e-medium e-copy"></span>
                <span class="e-icons e-medium e-paste"></span>
            </div>
            <p><b>Larger Icons</b></p>
            <div class="large-icon-bar">
                <span class="e-icons e-large e-cut"></span>
                <span class="e-icons e-large e-copy"></span>
                <span class="e-icons e-large e-paste"></span>
            </div>
        </div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Icon appearance customization

The Syncfusion® JavaScript 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.

<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id="container">
        
        <div class="icon-bar">
            <span class="e-icons e-cut"></span>
            <span class="e-icons e-copy"></span>
            <span class="e-icons e-paste"></span>
        </div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Available icons

The complete package of Essential® JS 2 icons is listed below. Each section contains an interactive demo of the available icon set.

Material 3

Material

Fabric

Bootstrap

Bootstrap 4

Bootstrap 5

High Contrast

Tailwind 3.4

Tailwind CSS

Fluent 2

Fluent