How to create different Avatars in Material UI?

To improve the user design in any application of material UI, avatars play an important role. Avatars are mostly found everywhere, like in the social media profile section, posts, etc., but how do you create these avatars in React using MUI? So, In this article, we are going to learn how to create different Avatars in Material UI.

But before we dive into the steps of creating the different avatars in MUI, let’s first understand what exactly an avatar is.

What is an Avatar?

An element known as an avatar is employed to visually depict a user or another entity. Material UI, a React UI framework provides a range of elements and style choices that align with Google’s Material Design principles. Avatars are commonly utilized in material design appearing in tables and dialog menus. They find application, in user interfaces, for showcasing profile pictures, icons or images.

Avatar API

The Avatar API is utilized to incorporate the different avatars into the React MUI. It comes with props −

• alt − This prop is used when we render the img component with the src prop.

• children − We can use the "children" prop to add any desired content within the avatar.

• classes − The classes prop is used to override the styles of the component

• component − This renders the component for the root in avatar.

• imgProps − These props are applied when using the img element.

• sizes − To modify the avatar to different sizes, we use the size prop

• src − This prop is used when the image is rendered as it provides the image url or source.

• srcSet − When using images, this prop provides the responsiveness.

• sx − To add custom styles to this component utilize the "sx" prop.

• variant − To add different variants of the avatars, the variant prop is used.

Steps required to create avatars

Below are the steps for creating the different avatars in Material UI −

Step 1: Create a react application

The very first step to creating avatars in MUI is to create a react application. To create a new React app, run the below commands in your terminal −

npx create react app avatarproject

Once the project is created, navigate to its directory by running −

cd avatarproject

Step 2: Add MUI to React

Once you have created the react app, it's time to install the Material UI into the react application. To install MUI, run the following command −

npm install @mui/material @emotion/react @emotion/styled

Step 3: Creating Avatars

To add or create different avatars, we use the <Avatar> component. Below is the syntax for the same −

<Avatar>
   Text
</Avatar>

Example

In this example, we have created an avatar that consists of text. The text avatar can have any string value like a letter, word, or number.

import React from "react";
import Stack from "@mui/material/Stack";
import Avatar from "@mui/material/Avatar";

function App() {
   return (
      <div style={{padding: 40,gap: 20,}}>
         <Stack direction="row" spacing={1}>
            <Avatar sx={{backgroundColor: 'green'}}>T</Avatar>
         </Stack>
      </div>
   );
};
export default App;

Output

Example

In this example, we have created an image avatar. The image avatar is a type of avatar that shows an image in it. These types of avatars are commonly used in social media icons, like profile icons, etc.

import React from "react";
import { Avatar, Stack } from "@mui/material";

const App = () => {
   return (
      <div style={{padding: 40,gap: 20,}}>
         <Stack direction="row" spacing={1}>
            <Avatar alt="img-logo" src="https://play-lh.googleusercontent.com/F10OOHNkeNbOf5x9DYpoihAIkLRlSMxCsPHyCErXgm0oM2gZtJwVymJIZoN59v4JJWBZ" sx={{ width: 36, height: 36}}/>
            <Avatar alt="img-logo" src="https://play-lh.googleusercontent.com/F10OOHNkeNbOf5x9DYpoihAIkLRlSMxCsPHyCErXgm0oM2gZtJwVymJIZoN59v4JJWBZ" sx={{ width: 56, height: 56}}/>
            <Avatar alt="img-logo" src="https://play-lh.googleusercontent.com/F10OOHNkeNbOf5x9DYpoihAIkLRlSMxCsPHyCErXgm0oM2gZtJwVymJIZoN59v4JJWBZ" sx={{ width: 76, height: 76}}/>
            <Avatar alt="img-logo" src="https://play-lh.googleusercontent.com/F10OOHNkeNbOf5x9DYpoihAIkLRlSMxCsPHyCErXgm0oM2gZtJwVymJIZoN59v4JJWBZ" sx={{ width: 96, height: 96}}/>
         </Stack>
      </div>
   );
};
export default App;

Output

Example

In this example, we have created an icon avatar. The icons avatar is a type of avatar that have icons in it. We can use any icon in the avatar component by passing the <IconName/> as children between the <Avatar> component.

import React from "react";
import { Avatar, Stack } from "@mui/material";
import Camera from "@mui/icons-material/Camera";
import Search from "@mui/icons-material/Search";
import Send from "@mui/icons-material/Send";
import Share from "@mui/icons-material/Share";

const App = () => {

   return (
      <div style={{padding: 40,gap: 20,}}>
         <Stack direction="row" spacing={1}>
            <Avatar sx={{backgroundColor: 'green'}}><Camera /></Avatar>
            <Avatar sx={{backgroundColor: 'blue'}}><Send /></Avatar>
            <Avatar sx={{backgroundColor: 'red'}}><Share /></Avatar>
            <Avatar sx={{backgroundColor: 'black'}}><Search /></Avatar>
         </Stack>
      </div>
   );
};
export default App;

Output

Example

In this example, we have grouped multiple avatars. To group the similar avatars, we can use the <AvatarGroup> component. The example shows how multiple avatars are grouped together. Here, we can also pass a prop called max which show only the maximum number of avatars at once like in the example, the prop is set to 5.

import React from "react";
import { Avatar, AvatarGroup } from "@mui/material";
import Camera from "@mui/icons-material/Camera";

const App = () => {
   return (
      <div style={{padding: 40,gap: 20}}>
         <AvatarGroup max={5}>
            <Avatar sx={{ backgroundColor: "green" }}>
               <Camera />
            </Avatar>
            <Avatar 
               alt="img-logo" src="https://play-lh.googleusercontent.com/F10OOHNkeNbOf5x9DYpoihAIkLRlSMxCsPHyCErXgm0oM2gZtJwVymJIZoN59v4JJWBZ"
               sx={{ width: 40, height: 40 }}
            />
            <Avatar sx={{ backgroundColor: "green" }}>T</Avatar>
            <Avatar sx={{ backgroundColor: "green" }}>U</Avatar>
            <Avatar sx={{ backgroundColor: "green" }}>T</Avatar>
            <Avatar sx={{ backgroundColor: "green" }}>O</Avatar>
         </AvatarGroup>
      </div>
   );
};
export default App;

Output

Example

In this example, we have created the avatars with badges. The badges, like dots, squares, and many other types can be added to the avatars to add a better UI.

import React from "react";
import { Avatar, Badge, Stack } from "@mui/material";
import Camera from "@mui/icons-material/Camera";

const App = () => {
   return (
      <div style={{padding: 40,gap: 20,}}>
         <Stack direction="row" spacing={1}>
            <Badge color="secondary" overlap="circular"
               anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
               variant="dot">
               <Avatar sx={{ backgroundColor: 'yellow' }}><Camera /></Avatar>
            </Badge>
            <Badge color="error" overlap="circular"
               anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
               variant="dot">
               <Avatar alt="img-logo" src="https://play-lh.googleusercontent.com/F10OOHNkeNbOf5x9DYpoihAIkLRlSMxCsPHyCErXgm0oM2gZtJwVymJIZoN59v4JJWBZ" sx={{ width: 40, height: 40 }} />
            </Badge>
            <Badge color="info" overlap="circular"
               anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
               variant="dot">
               <Avatar sx={{ backgroundColor: 'lightblue' }}>T</Avatar>
            </Badge>
         </Stack>
      </div>
   );
};
export default App;

Output

Conclusion

This article discusses the complete steps of creating different avatars in Material UI. We have seen the different approaches to creating avatars in MUI like text avatars, image avatars, icons, etc.