Types in React Avatar component

7 Oct 202512 minutes to read

The React Avatar component provides different sizes and visual styles to suit various design requirements. This section covers the available avatar sizes and shape types that can be customized using CSS classes.

Avatar size

The Essential^® JS 2 Avatar provides predefined sizes that can be applied using CSS classes with the base .e-avatar class to control the avatar’s dimensions.

Class Name	Description
e-avatar-xlarge	Displays extra large size avatar.
e-avatar-large	Displays large size avatar.
e-avatar	Displays default size avatar.
e-avatar-small	Displays small size avatar.
e-avatar-xsmall	Displays extra small size avatar.

index.jsx
index.tsx
index.html
index.css
import * as React from "react";
import * as ReactDom from "react-dom";
import './index.css';
function ReactApp() {
    return (<div>
      <span className="e-avatar e-avatar-xlarge"></span>
      <span className="e-avatar e-avatar-large"></span>
      <span className="e-avatar"></span>
      <span className="e-avatar e-avatar-small"></span>
      <span className="e-avatar e-avatar-xsmall"></span>
  </div>);
}
export default ReactApp;
ReactDom.render(<ReactApp />, document.getElementById("element"));
import * as React from "react";
import * as ReactDom from "react-dom";

function ReactApp() {
  return (
  <div>
      <span className="e-avatar e-avatar-xlarge"></span>
      <span className="e-avatar e-avatar-large"></span>
      <span className="e-avatar"></span>
      <span className="e-avatar e-avatar-small"></span>
      <span className="e-avatar e-avatar-xsmall"></span>
  </div>
  );
}
export default ReactApp;
ReactDom.render(<ReactApp/>, document.getElementById("element"));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion EJ2 React Avatar Sample</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="https://cdn.syncfusion.com/ej2/31.1.17/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-layouts/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <link rel="stylesheet" href="index.css">
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>
</html>
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  top: 45%;
  left: 45%;
}

#element {
    display: block;
    width: 300px;
    margin: 100px auto;
    border-radius: 3px;
}

.e-avatar {
    background-image: url(https://ej2.syncfusion.com/demos/src/grid/images/2.png);
    margin: 2px;
}

Avatar types

The Essential^® JS 2 Avatar supports two distinct shape styles to accommodate different design preferences:

Default (rectangular with rounded corners)
Circle

Default

The default Avatar style features a rectangular shape with rounded corners, providing a modern appearance suitable for most applications. This style is applied by adding the base class .e-avatar to the target element.

index.jsx
index.tsx
index.html
index.css
import * as React from "react";
import * as ReactDom from "react-dom";
import './index.css';
function ReactApp() {
    return (<div>
      <span className="e-avatar e-avatar-xlarge">RT</span>
      <span className="e-avatar e-avatar-large">RT</span>
      <span className="e-avatar">RT</span>
      <span className="e-avatar e-avatar-small">RT</span>
      <span className="e-avatar e-avatar-xsmall">RT</span>
  </div>);
}
export default ReactApp;
ReactDom.render(<ReactApp />, document.getElementById("element"));
import * as React from "react";
import * as ReactDom from "react-dom";

function ReactApp() {
  return (
  <div>
      <span className="e-avatar e-avatar-xlarge">RT</span>
      <span className="e-avatar e-avatar-large">RT</span>
      <span className="e-avatar">RT</span>
      <span className="e-avatar e-avatar-small">RT</span>
      <span className="e-avatar e-avatar-xsmall">RT</span>
  </div>
  );
}
export default ReactApp;
ReactDom.render(<ReactApp/>, document.getElementById("element"));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion EJ2 React Avatar Sample</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="https://cdn.syncfusion.com/ej2/31.1.17/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-layouts/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <link rel="stylesheet" href="index.css">
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>
</html>
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  top: 45%;
  left: 45%;
}

#element {
    display: block;
    width: 260px;
    margin: 100px auto;
    border-radius: 3px;
}

.e-avatar {
    margin: 2px;
}

Circle

The circular Avatar style creates a perfectly round appearance, ideal for profile pictures and user representations. Apply this style by adding the modifier class .e-avatar-circle along with the base .e-avatar class to the target element.

index.jsx
index.tsx
index.html
index.css
import * as React from "react";
import * as ReactDOM from "react-dom";
import "./index.css";
function ReactApp() {
    return (<div>
      <span className="e-avatar e-avatar-xlarge e-avatar-circle">SJ</span>
      <span className="e-avatar e-avatar-large e-avatar-circle">SJ</span>
      <span className="e-avatar e-avatar-circle">SJ</span>
      <span className="e-avatar e-avatar-small e-avatar-circle">SJ</span>
      <span className="e-avatar e-avatar-xsmall e-avatar-circle">SJ</span>
  </div>);
}
export default ReactApp;
ReactDOM.render(<ReactApp />, document.getElementById("element"));
import * as React from "react";
import * as ReactDOM from "react-dom";

function ReactApp() {
  return (
  <div>
      <span className="e-avatar e-avatar-xlarge e-avatar-circle">SJ</span>
      <span className="e-avatar e-avatar-large e-avatar-circle">SJ</span>
      <span className="e-avatar e-avatar-circle">SJ</span>
      <span className="e-avatar e-avatar-small e-avatar-circle">SJ</span>
      <span className="e-avatar e-avatar-xsmall e-avatar-circle">SJ</span>
  </div>
  );
}
export default ReactApp;
ReactDOM.render(<ReactApp/>, document.getElementById("element"));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion EJ2 React Avatar Sample</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="https://cdn.syncfusion.com/ej2/31.1.17/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-layouts/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <link rel="stylesheet" href="index.css">
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>
</html>
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  top: 45%;
  left: 45%;
}

#element {
    display: block;
    width: 300px;
    margin: 100px auto;
    border-radius: 3px;
}

.e-avatar {
    margin: 2px;
}

Search docs

Ask HelpBot