Search results

Getting started with JavaScript Avatar control

19 Oct 2022 / 2 minutes to read

The following section explains the steps required to create a simple avatar component using styles and its basic usage.


Install the following required dependent packages to render the avatar component.

Copied to clipboard
|-- @syncfusion/ej2-layouts

Set up your development environment

To get started with the Avatar component, you can clone the Essential JS 2 quickstart project, and install the packages by using the following commands.

Copied to clipboard
git clone quickstart
cd quickstart
npm install

By default, the project is configured with all the Essential JS 2 dependencies. As avatar is a pure CSS component, do not configure the src/system.config.js file. You can remove the file.

Include avatar theme file

The avatar CSS files are available in the ej2-layouts package folder. This can be referenced in your application using the following code.


Copied to clipboard
@import '../../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-layouts/styles/material.css';

Add avatar into the application

Add an HTML span element with e-avatar class into your index.html.


Copied to clipboard
<span class="e-avatar">GR</span>

Run the application

Run the application in the browser using the following command.

Copied to clipboard
npm start

The following example shows a basic avatar component.

Copied to clipboard
<!DOCTYPE html>
<html lang="en">

    <title>Essential JS 2 for Avatar </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for Avatar UI Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//" rel="stylesheet" />
    <link href="//" rel="stylesheet" />
    <script src=""></script>
    <script src="systemjs.config.js"></script>

    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'>
            <span class="e-avatar e-avatar-xlarge"></span>
            <span class="e-avatar e-avatar-large"></span>
            <span class="e-avatar"></span>
            <span class="e-avatar e-avatar-small"></span>
            <span class="e-avatar e-avatar-xsmall"></span>


See Also

Types of Avatar