How to use Material UI's Avatar component

Key takeaways:

  • An Avatar is a visual representation of a user or entity, typically used for profile images or icons in web applications.

  • The Avatar component in Material UI can display images, letters, or icons. Each type is customizable with attributes like src, bgcolor, and icon.

  • The size of an Avatar can be controlled using the sx property, with attributes like height and width to define custom dimensions.

  • Avatars can have different shapes, such as square and rounded, defined using the variant property.

  • The AvatarGroup component allows displaying a group of avatars, with a maximum limit and the ability to show a count for the remaining avatars.

  • A green badge can be added to an Avatar to indicate status, using a custom StyledBadge component with positioning and overlap settings.

The Avatar component

Avatar is a React component provided by Material UI that displays user avatars. It can display images, letters, and icons for user entities within an application. In this Answer, we will look into Material UI's Avatar component, its types, and customization in a React application.

Note: Please makes sure to install Material UI version 5 in your systems as we will be using it in the Answer.

Avatar types

There are three different types of avatars, namely, letter, image, and icon. Below we can see each avatar type along with its code:

import * as React from 'react';
import Avatar from '@mui/material/Avatar';
import Stack from '@mui/material/Stack';
import AssignmentIcon from '@mui/icons-material/Assignment';

export default function App() {
  return (
    <Stack direction="row" spacing={2} sx={{justifyContent:'center' , alignItems: 'center' , height:'250px'}}>
      <Avatar alt="John Bolt" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" />
      <Avatar sx={{ bgcolor: "orange" }}>H</Avatar>
      <Avatar sx={{ bgcolor: "green" }}>
        <AssignmentIcon />
      </Avatar>
    </Stack>
  );
}
Code example for different avatars

On clicking the "Run" button, we can see the three types of avatars that we can create using the Avatar component. The explanation of the above code is given below:

  • Line 2: We import the Avatar component from the @mui/material/Avatar.

  • Line 9: We define the Avatar component with an image in it using theThis is the text that appears if the image is not displayed on the screen. src attribute. We can pass the image URL or the image path in the src attribute. The alt text is displayed when the image cannot render on the screen.

  • Line 10: We define the Avatar component with a letter H in it. To give color to the Avatar component, we can use the style attribute sx and give a background color using the bgcolor attribute.

  • Lines 11–13: We define the Avatar component with an icon. We have used the Material UI's icon AssignmentIcon.

How to change MUI avatar size

Avatar components are customizable. We can change the size of the image by defining its height and width. In the code below, we can see the Avatar component with three different sizes.

import * as React from 'react';
import Avatar from '@mui/material/Avatar';
import Stack from '@mui/material/Stack';


export default function App() {
  return (
    <Stack direction="row" spacing={2} sx={{justifyContent:'center' , alignItems: 'center' , height:'250px'}}>
      <Avatar sx={{ bgcolor: "green" , height:24 , width:24 }} src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80"/>
      <Avatar sx={{ bgcolor: "green" , height:50 , width:50 }} src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80"/>
      <Avatar sx={{ bgcolor: "green" , height:70 , width:70 }} src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80"/>
    </Stack>
  );
}
Code example to change Avatar size

Code explanation

  • Line 9: We define the Avatar component and set their size using the height and width attribute provided in the sx property.

  • Line 10: We define the Avatar component and set its height and width to 50 pixels.

  • Line 11: We define the Avatar component and set the height and width to 70 pixels.

Avatar variants

We can change the shape of the Avatar component to square and rounded. The code example is given below.

import * as React from 'react';
import Avatar from '@mui/material/Avatar';
import Stack from '@mui/material/Stack';
import AssignmentIcon from '@mui/icons-material/Assignment';

export default function App() {
  return (
    <Stack direction="row" spacing={2} sx={{justifyContent:'center' , alignItems: 'center' , height:'250px'}}>
      <Avatar sx={{ bgcolor: "red" }} variant="square">
        H
      </Avatar>
      <Avatar sx={{ bgcolor: "blue" }} variant="rounded">
        <AssignmentIcon />
      </Avatar>
    </Stack>
  );
}
Example code of different variants of Avatar component

Code explanation

  • Line 9: We define the Avatar component and set its variant property to square. This avatar is a letter avatar, as we have passed H inside the component.

  • Line 12: We define the Avatar component and set its variant property to rounded. This avatar is an icon avatar, as we have defined an Icon component inside the Avatar component.

Grouped avatars

We can group multiple avatars and set the maximum number of avatars to be displayed on the screen. The rest of the avatars are not shown. Rather, the total count of the avatars that are not displayed is shown. A code example to show grouped avatars is shown below:

import * as React from 'react';
import Avatar from '@mui/material/Avatar';
import AvatarGroup from '@mui/material/AvatarGroup';
import Stack from '@mui/material/Stack';

export default function App() {
  return (
    <Stack direction="row" spacing={2} sx={{justifyContent:'center' , alignItems: 'center' , height:'250px'}}>
      <AvatarGroup max={3}>
        <Avatar alt="Harry">H</Avatar>
        <Avatar alt="James">J</Avatar>
        <Avatar alt="Robert">R</Avatar>
        <Avatar alt="Kevin">K</Avatar>
        <Avatar alt="Bob">B</Avatar>
      </AvatarGroup>
    </Stack>
  );
}
Example code to show grouped Avatar components

Code explanation

  • Line 3: We import AvatarGroup from @mui/material/AvatarGroup.

  • Line 9: We define the AvatarGroup component and set its max property to 3. The max property will show 3 avatars, but one will contain the count of the avatars that are not displayed.

  • Lines 9–15: We wrap the Avatar components in the AvatarGroup component that applies the AvatarGroup properties to the Avatar components.

Total avatars

Material UI allows us to define the total number of avatars using the AvatarGroup. Below, we can see an example that shows how we can use the AvatarGroup component's total property:

import * as React from 'react';
import Avatar from '@mui/material/Avatar';
import AvatarGroup from '@mui/material/AvatarGroup';
import Stack from '@mui/material/Stack';

export default function App() {
  return (
    <Stack direction="row" spacing={2} sx={{justifyContent:'center' , alignItems: 'center' , height:'250px'}}>
      <AvatarGroup total={24}>
        <Avatar alt="Harry">H</Avatar>
        <Avatar alt="James">J</Avatar>
        <Avatar alt="Robert">R</Avatar>
        <Avatar alt="Kevin">K</Avatar>
      </AvatarGroup>
    </Stack>
  );
}
Example code to set total number of avatars

Code explanation

  • Line 9: We define the AvatarGroup component and set the total property to 24. Five avatars in total will be shown, out of which one will contain the remaining count of the avatars that are not displayed. In our case, the remaining count will be 20.

  • Lines 9–14: We wrap the Avatar components in the AvatarGroup component to apply its effect.

Note: At maximum, we can display five avatars at a time, out of which one is used to show the total number of avatars.

Green badge

The green badge is a small and filled green circle that we can show on the avatar. Let's see how we can add it to the Avatar component.

import * as React from 'react';
import { styled } from '@mui/material/styles';
import Badge from '@mui/material/Badge';
import Avatar from '@mui/material/Avatar';
import Stack from '@mui/material/Stack';

const StyledBadge = styled(Badge)(({ theme }) => ({
  '& .MuiBadge-badge': {
    backgroundColor: '#44b700',
    color: '#44b700',
    boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,
    '&::after': {
      position: 'absolute',
      top: 0,
      left: 0,
      width: '100%',
      height: '100%',
      borderRadius: '50%',
      animation: 'ripple 1.2s infinite ease-in-out',
      border: '1px solid currentColor',
      content: '""',
    },
  },
  '@keyframes ripple': {
    '0%': {
      transform: 'scale(.8)',
      opacity: 1,
    },
    '100%': {
      transform: 'scale(2.4)',
      opacity: 0,
    },
  },
}));

export default function App() {
  return (
    <Stack direction="row" spacing={2} sx={{justifyContent:'center' , alignItems: 'center' , height:'250px'}}>
      <StyledBadge
        overlap="circular"
        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
        variant="dot"
      >
        <Avatar alt="James"/>
      </StyledBadge>
      </Stack>
  );
}
Example code to show a green badge on the Avatar component

On clicking the "Run" button, we can see the green badge on the Avatar component. The code explanation is given below:

Code explanation

  • Lines 7–34: We create the StyledBadge styling component that contains the styling to create a green badge on the Avatar component.

  • Lines 39–45: We define the StyledBadge component and pass in the Avatar component on which the green badge will be displayed. We can use the anchorOrigin to set the placement of the vertical and horizontal attributes to "top"/"bottom" and "left"/"right" respectively. We have to pass the overlap attribute with a circular value to align the badge on top of the avatar.

Explore the following projects for hands-on practice in creating real-world applications with React. You can enhance these projects by incorporating Material-UI for a polished and visually appealing design.

Conclusion

The Avatar component is versatile and user-friendly for creating visually appealing and personalized avatars. With the ability to display images, icons, or letters, it allows user identification and adds a touch of modernization to various applications.

Frequently asked questions

Haven’t found what you were looking for? Contact Us

Are Material UI components free?

Yes, Material UI offers free components under an open-source license, though there is also a paid version with additional features.

Is Material UI better than CSS?

Material UI provides pre-designed components and styles based on Material Design, making it easier and faster to build visually consistent UIs. CSS, on the other hand, offers more flexibility and control. The choice depends on the project’s requirements.

How do I import the Avatar component in my React project?

import Avatar from '@mui/material/Avatar';

How can I make an Avatar rounded or square?

By default, Avatars are circular, but we can change their shape using the variant property:

  • variant="rounded" for rounded corners.
  • variant="square" for square avatars.

Can I add a badge (e.g., a green dot) on an Avatar?

Yes, we can use Badge to add a status indicator (e.g., online/offline):

import Badge from '@mui/material/Badge';
<Badge color="secondary" variant="dot">
  <MailIcon />
</Badge>
New on Educative
Learn to Code
Learn any Language as a beginner
Develop a human edge in an AI powered world and learn to code with AI from our beginner friendly catalog
🏆 Leaderboard
Daily Coding Challenge
Solve a new coding challenge every day and climb the leaderboard

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved