Avatars

Please refer to MUI's official docs for more details on component's usage guide and API documentation.

Image Avatars

Use src and alt props with Avatar component for basic image avatar.

---

// MUI Imports
import Avatar from '@mui/material/Avatar'

const AvatarsImage = () => {
  return (
    <div className='flex gap-4'>
      <Avatar src='/images/avatars/1.png' alt='Victor Anderson' />
      <Avatar src='/images/avatars/8.png' alt='Alice Cobb' />
      <Avatar src='/images/avatars/7.png' alt='Jeffery Warner' />
    </div>
  )
}

export default AvatarsImage

Letter Avatars

Write some letters inside Avatar component to have letter avatar. Use our custom component for colored avatar and use skin='light' prop for light variant with opacity and skin='light-static' prop for light variant without opacity.

H

N

OP

AB

---

// MUI Imports
import MuiAvatar from '@mui/material/Avatar'

// Component Imports
import CustomAvatar from '@core/components/mui/Avatar'

const AvatarsLetter = () => {
  return (
    <div className='flex gap-4'>
      <MuiAvatar>H</MuiAvatar>
      <CustomAvatar color='primary'>N</CustomAvatar>
      <CustomAvatar color='error' skin='light'>
        OP
      </CustomAvatar>
      <CustomAvatar color='error' skin='light-static'>
        AB
      </CustomAvatar>
    </div>
  )
}

export default AvatarsLetter

Sizes

You can set any size of an avatar using styled hook.

---

// MUI Imports
import Avatar from '@mui/material/Avatar'

// Component Imports
import CustomAvatar from '@core/components/mui/Avatar'

const AvatarsSizes = () => {
  return (
    <div className='flex items-center gap-4'>
      <CustomAvatar size={24} alt='Victor Anderson' src='/images/avatars/3.png' />
      <Avatar alt='Victor Anderson' src='/images/avatars/3.png' />
      <CustomAvatar size={56} alt='Victor Anderson' src='/images/avatars/3.png' />
    </div>
  )
}

export default AvatarsSizes

Icon Avatars

Pass an icon as a child of Avatar component to make an icon avatar.

---

// MUI Imports
import Avatar from '@mui/material/Avatar'

// Component Imports
import CustomAvatar from '@core/components/mui/Avatar'

const AvatarsIcon = () => {
  return (
    <div className='flex gap-4'>
      <Avatar>
        <i className='ri-folder-2-line' />
      </Avatar>
      <CustomAvatar color='success'>
        <i className='ri-refresh-line' />
      </CustomAvatar>
      <CustomAvatar skin='light' color='info'>
        <i className='ri-checkbox-circle-line' />
      </CustomAvatar>
    </div>
  )
}

export default AvatarsIcon

Variants

Use variant={'square' | 'rounded'} prop with Avatar component for different variants.

---

// React Imports
import React from 'react'

// Component Imports
import CustomAvatar from '@core/components/mui/Avatar'

const AvatarsVariants = () => {
  return (
    <div className='flex gap-4'>
      <CustomAvatar color='primary' variant='square'>
        <i className='ri-notification-4-line' />
      </CustomAvatar>
      <CustomAvatar color='success' variant='rounded'>
        <i className='ri-save-2-line' />
      </CustomAvatar>
      <CustomAvatar skin='light' color='primary' variant='square'>
        <i className='ri-notification-4-line' />
      </CustomAvatar>
      <CustomAvatar skin='light' color='success' variant='rounded'>
        <i className='ri-save-2-line' />
      </CustomAvatar>
    </div>
  )
}

export default AvatarsVariants

Avatars With Badge

Use Avatar component as a child of Badge component.

---

// MUI Imports
import Badge from '@mui/material/Badge'
import Avatar from '@mui/material/Avatar'
import { styled } from '@mui/material/styles'

// Styled component for badge content area
const BadgeContentSpan = styled('span')({
  width: 8,
  height: 8,
  borderRadius: '50%',
  backgroundColor: 'var(--mui-palette-success-main)',
  boxShadow: '0 0 0 2px var(--mui-palette-background-paper)'
})

const AvatarsWithBadge = () => {
  return (
    <div className='flex gap-4'>
      <Badge
        overlap='circular'
        badgeContent={<BadgeContentSpan />}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'right'
        }}
      >
        <Avatar alt='Marie Garza' src='/images/avatars/2.png' />
      </Badge>
      <Badge
        overlap='circular'
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'right'
        }}
        badgeContent={
          <Avatar
            alt='Marie Garza'
            src='/images/avatars/2.png'
            className='bs-[1.375rem] is-[1.375rem] border-2 border-backgroundPaper'
          />
        }
      >
        <Avatar alt='Olivia Sparks' src='/images/avatars/4.png' />
      </Badge>
    </div>
  )
}

export default AvatarsWithBadge

Grouped Avatars With PullUp

Use class pull-up with AvatarGroup component for pull-up effect on hover of the avatar.

+2

---

// MUI Imports
import Avatar from '@mui/material/Avatar'
import AvatarGroup from '@mui/material/AvatarGroup'

const AvatarsGroupedPullUp = () => {
  return (
    <AvatarGroup className='pull-up' max={4}>
      <Avatar src='/images/avatars/4.png' alt='Olivia Sparks' />
      <Avatar src='/images/avatars/5.png' alt='Howard Lloyd' />
      <Avatar src='/images/avatars/6.png' alt='Hallie Richards' />
      <Avatar src='/images/avatars/8.png' alt='Alice Cobb' />
      <Avatar src='/images/avatars/7.png' alt='Jeffery Warner' />
    </AvatarGroup>
  )
}

export default AvatarsGroupedPullUp

Grouped Avatars With PullUp & Tooltip

Use class pull-up with AvatarGroup component and wrap your Avatar with Tooltip for pull-up effect & tooltip on hover of the avatar.

+2

---

// MUI Imports
import Avatar from '@mui/material/Avatar'
import Tooltip from '@mui/material/Tooltip'
import AvatarGroup from '@mui/material/AvatarGroup'

const AvatarsGroupedPullUpWithTooltip = () => {
  return (
    <AvatarGroup className='pull-up' max={4}>
      <Tooltip title='Olivia Sparks'>
        <Avatar src='/images/avatars/4.png' alt='Olivia Sparks' />
      </Tooltip>
      <Tooltip title='Howard Lloyd'>
        <Avatar src='/images/avatars/5.png' alt='Howard Lloyd' />
      </Tooltip>
      <Tooltip title='Hallie Richards'>
        <Avatar src='/images/avatars/6.png' alt='Hallie Richards' />
      </Tooltip>
      <Tooltip title='Alice Cobb'>
        <Avatar src='/images/avatars/8.png' alt='Alice Cobb' />
      </Tooltip>
      <Tooltip title='Jeffery Warner'>
        <Avatar src='/images/avatars/7.png' alt='Jeffery Warner' />
      </Tooltip>
    </AvatarGroup>
  )
}

export default AvatarsGroupedPullUpWithTooltip

Grouped Avatars Alignment

Wrap all your avatars with AvatarGroup component to have grouped avatars. Use max prop with AvatarGroup component to restrict maximum number of avatars shown.

+2

+2

+2

---

// MUI Imports
import Avatar from '@mui/material/Avatar'
import AvatarGroup from '@mui/material/AvatarGroup'

const AvatarsGrouped = () => {
  return (
    <div className='flex flex-col gap-4'>
      <AvatarGroup max={4}>
        <Avatar src='/images/avatars/4.png' alt='Olivia Sparks' />
        <Avatar src='/images/avatars/5.png' alt='Howard Lloyd' />
        <Avatar src='/images/avatars/6.png' alt='Hallie Richards' />
        <Avatar src='/images/avatars/8.png' alt='Alice Cobb' />
        <Avatar src='/images/avatars/7.png' alt='Jeffery Warner' />
      </AvatarGroup>
      <AvatarGroup max={4} className='justify-center'>
        <Avatar src='/images/avatars/4.png' alt='Olivia Sparks' />
        <Avatar src='/images/avatars/5.png' alt='Howard Lloyd' />
        <Avatar src='/images/avatars/6.png' alt='Hallie Richards' />
        <Avatar src='/images/avatars/8.png' alt='Alice Cobb' />
        <Avatar src='/images/avatars/7.png' alt='Jeffery Warner' />
      </AvatarGroup>
      <AvatarGroup max={4} className='justify-start'>
        <Avatar src='/images/avatars/4.png' alt='Olivia Sparks' />
        <Avatar src='/images/avatars/5.png' alt='Howard Lloyd' />
        <Avatar src='/images/avatars/6.png' alt='Hallie Richards' />
        <Avatar src='/images/avatars/8.png' alt='Alice Cobb' />
        <Avatar src='/images/avatars/7.png' alt='Jeffery Warner' />
      </AvatarGroup>
    </div>
  )
}

export default AvatarsGrouped