Avatars

An Avatar can take on many responsibilities and can be used in most any other component.

Letter avatars

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

<Grid container justify="center">
  <Grid item xs={2}>
    <Avatar color="primary">N</Avatar>
  </Grid>
  <Grid item xs={2}>
    <Avatar color="secondary">G</Avatar>
  </Grid>
  <Grid item xs={2}>
    <Avatar color="initial">A</Avatar>
  </Grid>
  <Grid item xs={2}>
    <Avatar>OG</Avatar>
  </Grid>
</Grid>

<Grid container justify="center">
  <Grid item xs={2}>
    <Avatar color="primary">N</Avatar>
  </Grid>
  <Grid item xs={2}>
    <Avatar color="secondary">G</Avatar>
  </Grid>
  <Grid item xs={2}>
    <Avatar color="initial">A</Avatar>
  </Grid>
  <Grid item xs={2}>
    <Avatar>OG</Avatar>
  </Grid>
</Grid>

Image Avatars

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

Follow alternative text guidelines depending on if your image avatar is decorative or functional.

<Grid container justify="center">
  <Grid item xs={2}>
    <Avatar alt="Izzy small" src="https://images.prismic.io/unifi/94385197-b532-4a1e-aa7f-1bc4d37d6f13_Izzy.jpeg" />
  </Grid>
  <Grid item xs={2}>
    <Avatar alt="Izzy large" src="https://images.prismic.io/unifi/94385197-b532-4a1e-aa7f-1bc4d37d6f13_Izzy.jpeg" size={{ width: '72px' }} />
  </Grid>
</Grid>

<Grid container justify="center">
  <Grid item xs={2}>
    <Avatar alt="Izzy small" src="https://images.prismic.io/unifi/94385197-b532-4a1e-aa7f-1bc4d37d6f13_Izzy.jpeg" />
  </Grid>
  <Grid item xs={2}>
    <Avatar alt="Izzy large" src="https://images.prismic.io/unifi/94385197-b532-4a1e-aa7f-1bc4d37d6f13_Izzy.jpeg" size={{ width: '72px' }} />
  </Grid>
</Grid>

Image fallbacks

If the image link is invalid, the component gracefully falls back to using either the first letter from the alt attribute or alternatively you can supply an icon to use.

<Grid container justify="center">
  <Grid item xs={2}>
    <Avatar alt="Broken" src="http://madeuplink.net/img.jpg" />
  </Grid>
  <Grid item xs={2}>
    <Avatar alt="Also broken" src="http://madeuplink.net/img.jpg">
      <Person />
    </Avatar>
  </Grid>
</Grid>

<Grid container justify="center">
  <Grid item xs={2}>
    <Avatar alt="Broken" src="http://madeuplink.net/img.jpg" />
  </Grid>
  <Grid item xs={2}>
    <Avatar alt="Also broken" src="http://madeuplink.net/img.jpg">
      <Person />
    </Avatar>
  </Grid>
</Grid>

Icon Avatars

Icon avatars are created by passing an icon as children.

Use icon avatars only for decorative purposes. Review Icons for functional iconography usage.

/*
import { Delete, Folder } from '@material-ui/icons';
*/
<Grid container justify="center">
  <Grid item xs={2}>
    <Avatar aria-label="Saved items" color="primary">
      <Folder />
    </Avatar>
  </Grid>
  <Grid item xs={2}>
    <Avatar aria-label="Deleted items">
      <Delete />
    </Avatar>
  </Grid>
</Grid>

/*
import { Delete, Folder } from '@material-ui/icons';
*/
<Grid container justify="center">
  <Grid item xs={2}>
    <Avatar aria-label="Saved items" color="primary">
      <Folder />
    </Avatar>
  </Grid>
  <Grid item xs={2}>
    <Avatar aria-label="Deleted items">
      <Delete />
    </Avatar>
  </Grid>
</Grid>

Avatar Sizes

There are four sizes available for Avatar as well as the ability to pass an object to the size prop defining width, height, or both.

Note: medium is the default size value if no other size is defined.

<>
  <Grid container justify="center" alignItems="center">
    <Grid item xs={2}>
      <Avatar size="x-small">X</Avatar>
    </Grid>
    <Grid item xs={2}>
      <Avatar size="small">S</Avatar>
    </Grid>
    <Grid item xs={2}>
      <Avatar size="medium">M</Avatar>
    </Grid>
    <Grid item xs={2}>
      <Avatar size="large">L</Avatar>
    </Grid>
    <Grid item xs={2}>
      <Avatar size={{ width: '84px' }}>W</Avatar>
    </Grid>
  </Grid>
  <Grid container justify="center" alignItems="center" margin={{ top: 3 }}>
    <Grid item xs={2}>
      <Avatar size="x-small">
        <Face />
      </Avatar>
    </Grid>
    <Grid item xs={2}>
      <Avatar size="small">
        <Face />
      </Avatar>
    </Grid>
    <Grid item xs={2}>
      <Avatar size="medium">
        <Face />
      </Avatar>
    </Grid>
    <Grid item xs={2}>
      <Avatar size="large">
        <Face />
      </Avatar>
    </Grid>
    <Grid item xs={2}>
      <Avatar size={{ width: '84px' }}>
        <Face />
      </Avatar>
    </Grid>
  </Grid>
  <Grid container justify="center" alignItems="center" margin={{ top: 3 }}>
    <Grid item xs={2}>
      <Avatar alt="Rapunzel x-small" size="x-small" src="https://images.prismic.io/unifi/1ba98897-3b02-4ee6-a9b5-a8b4414e93ba_Rapunzel.jpg" />
    </Grid>
    <Grid item xs={2}>
      <Avatar alt="Rapunzel small" size="small" src="https://images.prismic.io/unifi/1ba98897-3b02-4ee6-a9b5-a8b4414e93ba_Rapunzel.jpg" />
    </Grid>
    <Grid item xs={2}>
      <Avatar alt="Rapunzel medium" size="medium" src="https://images.prismic.io/unifi/1ba98897-3b02-4ee6-a9b5-a8b4414e93ba_Rapunzel.jpg" />
    </Grid>
    <Grid item xs={2}>
      <Avatar alt="Rapunzel large" size="large" src="https://images.prismic.io/unifi/1ba98897-3b02-4ee6-a9b5-a8b4414e93ba_Rapunzel.jpg" />
    </Grid>
    <Grid item xs={2}>
      <Avatar
        alt="Rapunzel custom"
        size={{ width: '84px', height: '84px' }}
        src="https://images.prismic.io/unifi/1ba98897-3b02-4ee6-a9b5-a8b4414e93ba_Rapunzel.jpg"
      />
    </Grid>
  </Grid>
</>

<>
  <Grid container justify="center" alignItems="center">
    <Grid item xs={2}>
      <Avatar size="x-small">X</Avatar>
    </Grid>
    <Grid item xs={2}>
      <Avatar size="small">S</Avatar>
    </Grid>
    <Grid item xs={2}>
      <Avatar size="medium">M</Avatar>
    </Grid>
    <Grid item xs={2}>
      <Avatar size="large">L</Avatar>
    </Grid>
    <Grid item xs={2}>
      <Avatar size={{ width: '84px' }}>W</Avatar>
    </Grid>
  </Grid>
  <Grid container justify="center" alignItems="center" margin={{ top: 3 }}>
    <Grid item xs={2}>
      <Avatar size="x-small">
        <Face />
      </Avatar>
    </Grid>
    <Grid item xs={2}>
      <Avatar size="small">
        <Face />
      </Avatar>
    </Grid>
    <Grid item xs={2}>
      <Avatar size="medium">
        <Face />
      </Avatar>
    </Grid>
    <Grid item xs={2}>
      <Avatar size="large">
        <Face />
      </Avatar>
    </Grid>
    <Grid item xs={2}>
      <Avatar size={{ width: '84px' }}>
        <Face />
      </Avatar>
    </Grid>
  </Grid>
  <Grid container justify="center" alignItems="center" margin={{ top: 3 }}>
    <Grid item xs={2}>
      <Avatar alt="Rapunzel x-small" size="x-small" src="https://images.prismic.io/unifi/1ba98897-3b02-4ee6-a9b5-a8b4414e93ba_Rapunzel.jpg" />
    </Grid>
    <Grid item xs={2}>
      <Avatar alt="Rapunzel small" size="small" src="https://images.prismic.io/unifi/1ba98897-3b02-4ee6-a9b5-a8b4414e93ba_Rapunzel.jpg" />
    </Grid>
    <Grid item xs={2}>
      <Avatar alt="Rapunzel medium" size="medium" src="https://images.prismic.io/unifi/1ba98897-3b02-4ee6-a9b5-a8b4414e93ba_Rapunzel.jpg" />
    </Grid>
    <Grid item xs={2}>
      <Avatar alt="Rapunzel large" size="large" src="https://images.prismic.io/unifi/1ba98897-3b02-4ee6-a9b5-a8b4414e93ba_Rapunzel.jpg" />
    </Grid>
    <Grid item xs={2}>
      <Avatar
        alt="Rapunzel custom"
        size={{ width: '84px', height: '84px' }}
        src="https://images.prismic.io/unifi/1ba98897-3b02-4ee6-a9b5-a8b4414e93ba_Rapunzel.jpg"
      />
    </Grid>
  </Grid>
</>

Shape variants

The default shape is variant='circle' but alternatives exist for square and rounded.

<Grid container justify="center">
  <Grid item xs={2}>
    <Avatar color="primary" variant="square">
      N
    </Avatar>
  </Grid>
  <Grid item xs={2}>
    <Avatar color="secondary" variant="rounded">
      G
    </Avatar>
  </Grid>
  <Grid item xs={2}>
    <Avatar>OG</Avatar>
  </Grid>
</Grid>

<Grid container justify="center">
  <Grid item xs={2}>
    <Avatar color="primary" variant="square">
      N
    </Avatar>
  </Grid>
  <Grid item xs={2}>
    <Avatar color="secondary" variant="rounded">
      G
    </Avatar>
  </Grid>
  <Grid item xs={2}>
    <Avatar>OG</Avatar>
  </Grid>
</Grid>