Skip to main content

Avatar

The Avatar component is a visual element, such as an image, letter(s) or icon, used to represent a user, label or tool.

Properties

NameTypeDefaultDescription
sourcestringDefines the path to the image.
altTextstringDefines the alt text attribute for the image.
sourceSetstringDefines the srcSet attribute for the image.

Style Attributes

NameTypeDefaultDescription
variantcircular
rounded
square
string
circularSpecifies the shape of the avatar.

Subcomponents

The Avatar component has two subcomponents that allow the addition of either an icon or typography to the avatar component.

Icon

An icon to use on the avatar.

For further details, see the Icon component.

Properties

NameTypeDefaultDescription
colorinherit
primary
secondary
action
disabled
error
string
inheritDefines the color of the icon.
sizeinherit
small
medium
large
mediumDefines the size of the icon.
viewBox0 0 25 25
Defines the size of the view box that displays the icon.
fillhex #ffffff
rgb 5,5,5
The fill color of the icon.
strokehex #ffffff
rgb 5,5,5
The stroke color of the icon.

Typography

The typography to use on the avatar.

For further details, see the Typography component.

Properties

NameTypeDefaultDescription
textstringDefines the text to display in the text field.
varianth1
h2
h3
h4
h5
h6
subtitle1
subtitle2
body1
body2
caption
button
overline
inherit
string
inheritDefines the type of typography to display.
colorinitial
inherit
primary
secondary
textPrimary
textSecondary
error
string
inheritDefines the color of the typography.
gutterBottomboolfalseEnables a gutter at the bottom of the typography component.

For more detail on the Avatar component, see the MUI developer docs.