Material-UI Avatar

Our Material-ui avatar offers a collection of cool avatars with different shapes, sizes and with the possibility to group them.

Examples

Image placeholder Image placeholder 

import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import Avatar from "@material-ui/core/Avatar";
// @material-ui/icons components

// core components

import componentStyles from "assets/theme/components/avatar.js";

const useStyles = makeStyles(componentStyles);

const Examples = () => {
  const classes = useStyles();
  const avatarRounded = {
    root: classes.avatarRounded,
    img: classes.avatarRounded,
  }
  return (
    <>
      <Avatar alt="..." src={require("assets/img/theme/team-4.jpg").default} classes={avatarRounded} />
      <Avatar alt="..." src={require("assets/img/theme/team-4.jpg").default} />
    </>
  );
};

export default Examples;

Sizing

The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.

Image placeholder Image placeholder Image placeholder Image placeholder Image placeholder 

import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import Avatar from "@material-ui/core/Avatar";
// @material-ui/icons components

// core components

import componentStyles from "assets/theme/components/avatar.js";

const useStyles = makeStyles(componentStyles);

const Examples = () => {
  const classes = useStyles();
  const avatarXs = {
    root: classes.avatarXs,
    img: classes.avatarXs
  };
  const avatarSm = {
    root: classes.avatarSm,
    img: classes.avatarSm
  };
  const avatarLg = {
    root: classes.avatarLg,
    img: classes.avatarLg
  };
  const avatarXl = {
    root: classes.avatarXl,
    img: classes.avatarXl
  };
  return (
    <>
      <Avatar
        classes={avatarXs}
        alt="..."
        src={require("assets/img/theme/team-4.jpg").default}
      />
      <Avatar
        classes={avatarSm}
        alt="..."
        src={require("assets/img/theme/team-4.jpg").default}
      />
      <Avatar
        alt="..."
        src={require("assets/img/theme/team-4.jpg").default}
      />
      <Avatar
        classes={avatarLg}
        alt="..."
        src={require("assets/img/theme/team-4.jpg").default}
      />
      <Avatar
        classes={avatarXl}
        alt="..."
        src={require("assets/img/theme/team-4.jpg").default}
      />
    </>
  );
};

export default Examples;

Group

Image placeholder Image placeholder Image placeholder Image placeholder 
import React from "react";
// @material-ui/core components
import Avatar from "@material-ui/core/Avatar";
// @material-ui/lab components
import AvatarGroup from "@material-ui/lab/AvatarGroup";
// @material-ui/icons components

// core components

const Examples = () => {
  return (
    <>
      <AvatarGroup>
        <Avatar
          alt="..."
          src={require("assets/img/theme/team-1-800x800.jpg").default}
        />
        <Avatar
          alt="..."
          src={require("assets/img/theme/team-2-800x800.jpg").default}
        />
        <Avatar
          alt="..."
          src={require("assets/img/theme/team-3-800x800.jpg").default}
        />
        <Avatar
          alt="..."
          src={require("assets/img/theme/team-4-800x800.jpg").default}
        />
      </AvatarGroup>
    </>
  );
};

export default Examples;

If you want to see more examples and properties please check the official Material-UI Documentation.