HelpBot Assistant

How can I help you?

Predefined Icons Library in Syncfusion^® Vue Component

4 Feb 202617 minutes to read

The Syncfusion^® icon library provides a collection of pre-designed icons to enhance application user interfaces. These icons are base64-formatted font icons that help create a cohesive, visually appealing design across applications.

Referring icons in the Vue application

Using the below approaches, the icons can be referenced in the Vue application.

npm package - Install and import icons from the npm package
CDN reference - Link to icons via CDN for quick setup

The npm package

All Syncfusion^® theme icons are available in the ej2-icons package, published on npmjs.com. This package contains CSS and SCSS theme files for all Syncfusion^® 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 Vue application:

[src/App.vue]

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

Example:

@import "../node_modules/@syncfusion/ej2-icons/styles/material3.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^® Vue 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 Vue application using the following command:

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

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
    <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>
</template>
<script setup>
</script>
<style>
  
.icon-bar {
    width: 20%;
    background-color: lightgrey;
    overflow: auto;
    margin-top: 20px;
    margin-left: 240px;
}

.icon-bar span {
    float: left;
    width: 33%;
    text-align: center;
    padding: 12px 0;
    transition: all 0.3s ease;
}

.icon-bar span:hover {
    background-color: #e2e2e2;
}
</style>
<template>
    <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>
</template>
<script>
export default {}
</script>
<style>
  
.icon-bar {
    width: 20%;
    background-color: lightgrey;
    overflow: auto;
    margin-top: 20px;
    margin-left: 240px;
}

.icon-bar span {
    float: left;
    width: 33%;
    text-align: center;
    padding: 12px 0;
    transition: all 0.3s ease;
}

.icon-bar span:hover {
    background-color: #e2e2e2;
}
</style>

Icon size

The ej2-icons package supports different icon sizes to optimize for touch or mouse interactions. Use the pre-defined size classes to adjust icon dimensions:

e-small - Sets the icon size to 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>

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
    <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>
</template>
<script setup>
</script>
<style>
  
.small-icon-bar {
    width: 20%;
    background-color: lightgrey;
    overflow: auto;
}

.small-icon-bar span:hover {
    background-color: #e2e2e2;
}

.small-icon-bar span {
    float: left;
    width: 33%;
    text-align: center;
    padding: 12px 0;
    transition: all 0.3s ease;
    font-size: 36px;
}

.medium-icon-bar {
    width: 20%;
    background-color: lightgrey;
    overflow: auto;
}

.medium-icon-bar span:hover {
    background-color: #e2e2e2;
}

.medium-icon-bar span {
    float: left;
    width: 33%;
    text-align: center;
    padding: 12px 0;
    transition: all 0.3s ease;
    font-size: 36px;
}

.large-icon-bar {
    width: 20%;
    background-color: lightgrey;
    overflow: auto;
}

.large-icon-bar span:hover {
    background-color: #e2e2e2;
}

.large-icon-bar span {
    float: left;
    width: 33%;
    text-align: center;
    padding: 12px 0;
    transition: all 0.3s ease;
    font-size: 36px;
}
</style>
<template>
    <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>
</template>
<script>
export default {}
</script>
<style>
  
.small-icon-bar {
    width: 20%;
    background-color: lightgrey;
    overflow: auto;
}

.small-icon-bar span:hover {
    background-color: #e2e2e2;
}

.small-icon-bar span {
    float: left;
    width: 33%;
    text-align: center;
    padding: 12px 0;
    transition: all 0.3s ease;
    font-size: 36px;
}

.medium-icon-bar {
    width: 20%;
    background-color: lightgrey;
    overflow: auto;
}

.medium-icon-bar span:hover {
    background-color: #e2e2e2;
}

.medium-icon-bar span {
    float: left;
    width: 33%;
    text-align: center;
    padding: 12px 0;
    transition: all 0.3s ease;
    font-size: 36px;
}

.large-icon-bar {
    width: 20%;
    background-color: lightgrey;
    overflow: auto;
}

.large-icon-bar span:hover {
    background-color: #e2e2e2;
}

.large-icon-bar span {
    float: left;
    width: 33%;
    text-align: center;
    padding: 12px 0;
    transition: all 0.3s ease;
    font-size: 36px;
}
</style>

Icon appearance customization

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

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
    <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>
</template>
<script setup>
</script>
<style>
  
.e-icons {
    color: #ffffff;
}

.icon-bar {
    width: 20%;
    background-color: #555;
    overflow: auto;
    margin-top: 20px;
    margin-left: 240px;
}

.icon-bar span {
    float: left;
    width: 33%;
    text-align: center;
    padding: 12px 0;
    transition: all 0.3s ease;
}

.icon-bar span:hover {
    background-color: #000;
}
</style>
<template>
    <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>
</template>
<script>
export default {}
</script>
<style>
  
.e-icons {
    color: #ffffff;
}

.icon-bar {
    width: 20%;
    background-color: #555;
    overflow: auto;
    margin-top: 20px;
    margin-left: 240px;
}

.icon-bar span {
    float: left;
    width: 33%;
    text-align: center;
    padding: 12px 0;
    transition: all 0.3s ease;
}

.icon-bar span:hover {
    background-color: #000;
}
</style>

Available icons

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

Search docs

Ask HelpBot

Search docs

Ask HelpBot

How can I help you?

Predefined Icons Library in Syncfusion^® Vue Component

Referring icons in the Vue application

The npm package

CDN reference

Steps to use icons library

Using icons directly in HTML element

Icon size

Icon appearance customization

Available icons

Material 3

Material

Fabric

Bootstrap

Bootstrap 4

Bootstrap 5

High Contrast

Tailwind CSS

Tailwind 3.4

Fluent 2

Fluent

How can I help you?

Predefined Icons Library in Syncfusion® Vue Component

Referring icons in the Vue application

The npm package

CDN reference

Steps to use icons library

Using icons directly in HTML element

Icon size

Icon appearance customization

Available icons

Material 3

Material

Fabric

Bootstrap

Bootstrap 4

Bootstrap 5

High Contrast

Tailwind CSS

Tailwind 3.4

Fluent 2

Fluent

Predefined Icons Library in Syncfusion^® Vue Component