Easily Style the MUI Avatar: Border, Color, Size, and More

The Material-UI Avatar can be styled in a variety of ways. Styling the Avatar is less challenging than many other MUI components because it is a simple component, often composed of a single div or a div wrapping an image element.

In this example I will add over half a dozen different styling properties to an Avatar component. We will create the examples seen below:

The Resources section contains full React code for this tutorial.

MUI Avatar Font Size and Color

In this example I will style a ‘Text’ Avatar. It will render as a single div with no nesting. This means the Material-UI Avatar can be styled with an sx prop at the root level of the component.

const avatarStyle = {
  color: "green",
  fontSize: "1.5rem"
};

//JSX
<Avatar sx={avatarStyle}>JM</Avatar>

Avatars have a default font size of 1.25rem. You can size them with pixels, but rems allow the text size to be relative to the root font size of your app.

The color property here styles the text color.

These two properties style the text. In the next section, we will style the rest of the component.

MUI Avatar Background Color, Outline, and Shadow

Background color, border, and shadow will provide styling that radiates out from the center of the Avatar.

Here is the object that should be passed to the sx prop in the same way as we saw in the last section.

const avatarStyle = {
  backgroundColor: "rgba(210,180,140,1)",
  border: "2px solid blue",
  boxShadow: 20
};

Background Color

The background color will style fill area of the Avatar circle. This can be styled with a color name, an rgba, or a hex value. I personally like to use rgba because the alpha value allows easy customization of the opacity.

Outline/Border

We can add an outline to the Avatar with a border value. Interestingly, if you choose to add a border the only required border value is the style. For example, this code is acceptable: border: 'solid'. The border color will be pulled from the color value, and the border width is set to 3px.

The Avatar has a default styling of borderRadius: '50%' so that it renders as a circle. This means our border will automatically be a nice circular shape.

Shadow

Avatars can be easily given a box shadow. In my code I made use of the MUI styling system and accessed a theme shadow value.

Read this article to learn the different methods for applying box shadow in MUI.

MUI Image Avatar

An image Avatar can be created in two ways:

• the src prop
• passing a backgroundImage value to the sx prop

The src prop method will overwrite any text passed to the Avatar, while the backgroundImage method will render the text on top of the image.

I used Lorem Picsum for my images. This generates a random image so if you use my example code, you will get a different image than I did.

MUI Avatar with Tooltip Enabled

The Avatar can be wrapped in an MUI Tooltip. This is especially useful if you create an image avatar using the src prop. Adding a Tooltip will allow you to still give textual information to users.

Here’s an example:

Here’s how to style the MUI Tooltip.

MUI Avatar with Link

The Avatar does not have a link prop. You can make it into a clickable link with one of these easy methods:

• Pass an anchor tag
• Pass a MUI Link component

I passed a Material-UI Link for my example because it has some handy props.

First, I removed the underline by passing underline: 'hover'.

Next, I wanted to style the Link text green and give it a smaller font size. However, the Link default styling overwrote the text color and font size values instead of inheriting them from the Avatar. I had to use the sx prop at the Link root level to add the desired stying.

Resources and Related Links

import Avatar from "@mui/material/Avatar";
import Stack from "@mui/material/Stack";
import Tooltip from "@mui/material/Tooltip";
import Link from "@mui/material/Link";

const avatarStyle = {
  color: "green",
  fontSize: "1.5rem",
  boxShadow: 20,
  backgroundColor: "rgb(210,180,140)",
  border: "2px solid blue",
};

const avatarBackgroundStyle = {
  backgroundImage: "url(https://picsum.photos/100)",
  width: 100,
  height: 100,
};

export default function CustomStyledAvatar() {
  return (
    <Stack direction="row" alignItems="center" spacing={4}>
      <Avatar sx={avatarStyle}>JM</Avatar>
      <Avatar sx={avatarBackgroundStyle}>JM</Avatar>
      <Tooltip title="JM">
        <Avatar src="https://picsum.photos/100" />
      </Tooltip>
      <Avatar><Link href='https://www.wsj.com' target='_blank' underline='hover' sx={{color: 'green', fontSize: 12}}>WSJ</Link></Avatar>
    </Stack>
  );
}

The MUI Card commonly has an Avatar in the header, learn more here.

The MUI Chip also usually includes an Avatar.

MUI Avatar Docs