Skip to content

Avatar

Avatars are found throughout material design with uses in everything from tables to dialog menus.

Image avatars

Image avatars can be created by passing standard img props src or srcSet into the component.

Remy Sharp
Remy Sharp
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" className={classes.bigAvatar} />

Letter avatars

Avatars containing simple characters can be created by passing your string as children.

H
N
OP
<Avatar>H</Avatar>
<Avatar className={classes.orange}>N</Avatar>
<Avatar className={classes.purple}>OP</Avatar>

Icon avatars

Icon avatars are created by passing an icon as children.

<Avatar>
  <FolderIcon />
</Avatar>
<Avatar className={classes.pink}>
  <PageviewIcon />
</Avatar>
<Avatar className={classes.green}>
  <AssignmentIcon />
</Avatar>

Variants

If you need square or rounded avatars, use the variant prop.

N
<Avatar variant="square" className={classes.square}>
  N
</Avatar>
<Avatar variant="rounded" className={classes.rounded}>
  <AssignmentIcon />
</Avatar>

Fallbacks

The component fallbacks if there is an error loading the avatar image, in this order, to:

  • the provided children
  • the first letter of tha alt text
  • a generic avatar icon
Remy Sharp
Remy Sharp
<Avatar alt="Remy Sharp" src="/broken-image.jpg" className={classes.orange}>
  B
</Avatar>
<Avatar alt="Remy Sharp" src="/broken-image.jpg" className={classes.orange} />
<Avatar src="/broken-image.jpg" />