Avatar

Avatars are a great way to represent people or specific objects within your app. They can render as:

an image
text content
icon

Simple Avatar

An Avatar is usually a small image, icon, or 1-2 letters.

import { Avatar } from "@react-md/core/avatar/Avatar";
import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";
import { type ReactElement } from "react";

export default function SimpleAvatar(): ReactElement {
  return (
    <>
      <Avatar src="https://i.pravatar.cc/48?img=38" />
      <Avatar>
        <FavoriteIcon />
      </Avatar>
      <Avatar>A</Avatar>
      <Avatar>PL</Avatar>
    </>
  );
}

import { Avatar } from "@react-md/core/avatar/Avatar";
import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";
import { type ReactElement } from "react";

export default function SimpleAvatar(): ReactElement {
  return (
    <>
      <Avatar src="https://i.pravatar.cc/48?img=38" />
      <Avatar>
        <FavoriteIcon />
      </Avatar>
      <Avatar>A</Avatar>
      <Avatar>PL</Avatar>
    </>
  );
}

Avatar Theme Colors

An avatar can use the current theme colors as a background-color by using the theme prop.

import { Avatar } from "@react-md/core/avatar/Avatar";
import { type ReactElement } from "react";

export default function AvatarThemeColors(): ReactElement {
  return (
    <>
      <Avatar theme="primary">P</Avatar>
      <Avatar theme="secondary">S</Avatar>
      <Avatar theme="warning">W</Avatar>
      <Avatar theme="success">S</Avatar>
      <Avatar theme="error">E</Avatar>
    </>
  );
}

import { Avatar } from "@react-md/core/avatar/Avatar";
import { type ReactElement } from "react";

export default function AvatarThemeColors(): ReactElement {
  return (
    <>
      <Avatar theme="primary">P</Avatar>
      <Avatar theme="secondary">S</Avatar>
      <Avatar theme="warning">W</Avatar>
      <Avatar theme="success">S</Avatar>
      <Avatar theme="error">E</Avatar>
    </>
  );
}

Default Avatar Colors

The avatar also supports using the color prop to set the text color and background-color to different shades of the same color.

import { Avatar } from "@react-md/core/avatar/Avatar";
import { type ReactElement } from "react";

export default function DefaultAvatarColors(): ReactElement {
  return (
    <>
      <Avatar color="red">R</Avatar>
      <Avatar color="pink">P</Avatar>
      <Avatar color="purple">P</Avatar>
      <Avatar color="deep-purple">D</Avatar>
      <Avatar color="indigo">I</Avatar>
      <Avatar color="blue">B</Avatar>
      <Avatar color="light-blue">L</Avatar>
      <Avatar color="cyan">C</Avatar>
      <Avatar color="teal">T</Avatar>
      <Avatar color="green">G</Avatar>
      <Avatar color="light-green">L</Avatar>
      <Avatar color="lime">L</Avatar>
      <Avatar color="yellow">Y</Avatar>
      <Avatar color="amber">A</Avatar>
      <Avatar color="orange">O</Avatar>
      <Avatar color="deep-orange">D</Avatar>
      <Avatar color="brown">B</Avatar>
      <Avatar color="grey">G</Avatar>
      <Avatar color="blue-grey">B</Avatar>
    </>
  );
}

import { Avatar } from "@react-md/core/avatar/Avatar";
import { type ReactElement } from "react";

export default function DefaultAvatarColors(): ReactElement {
  return (
    <>
      <Avatar color="red">R</Avatar>
      <Avatar color="pink">P</Avatar>
      <Avatar color="purple">P</Avatar>
      <Avatar color="deep-purple">D</Avatar>
      <Avatar color="indigo">I</Avatar>
      <Avatar color="blue">B</Avatar>
      <Avatar color="light-blue">L</Avatar>
      <Avatar color="cyan">C</Avatar>
      <Avatar color="teal">T</Avatar>
      <Avatar color="green">G</Avatar>
      <Avatar color="light-green">L</Avatar>
      <Avatar color="lime">L</Avatar>
      <Avatar color="yellow">Y</Avatar>
      <Avatar color="amber">A</Avatar>
      <Avatar color="orange">O</Avatar>
      <Avatar color="deep-orange">D</Avatar>
      <Avatar color="brown">B</Avatar>
      <Avatar color="grey">G</Avatar>
      <Avatar color="blue-grey">B</Avatar>
    </>
  );
}

Custom Avatar Colors

The avatar colors can be configured by modifying the $avatar-colors map, using the avatar-custom-color mixin, or using a custom class.

These colors will not automatically enforce the correct contrast ratio and must be manually checked.

import { Avatar } from "@react-md/core/avatar/Avatar";
import { type ReactElement } from "react";

import styles from "./CustomAvatarColors.module.scss";

export default function CustomAvatarColors(): ReactElement {
  return (
    <>
      <Avatar className={styles.avatar1}>C</Avatar>
      <Avatar className={styles.avatar2}>C</Avatar>
    </>
  );
}

import { Avatar } from "@react-md/core/avatar/Avatar";
import { type ReactElement } from "react";

import styles from "./CustomAvatarColors.module.scss";

export default function CustomAvatarColors(): ReactElement {
  return (
    <>
      <Avatar className={styles.avatar1}>C</Avatar>
      <Avatar className={styles.avatar2}>C</Avatar>
    </>
  );
}

@use "everything";

.avatar1 {
  @include everything.avatar-set-var(background-color, everything.$black);
  @include everything.avatar-set-var(color, everything.$red-500);
}

.avatar2 {
  background-color: everything.$orange-100;
  color: everything.$black;
}

@use "everything";

.avatar1 {
  @include everything.avatar-set-var(background-color, everything.$black);
  @include everything.avatar-set-var(color, everything.$red-500);
}

.avatar2 {
  background-color: everything.$orange-100;
  color: everything.$black;
}

Avatar Borders

Avatars do not have a border-color by default but can easily be added by:

setting the --rmd-avatar-border-color variable (Recommended using avatar-set-var mixin)
adding a custom class

import { Avatar } from "@react-md/core/avatar/Avatar";
import { Box } from "@react-md/core/box/Box";
import { type ReactElement } from "react";

import styles from "./AvatarBorders.module.scss";

export default function AvatarBorders(): ReactElement {
  return (
    <Box className={styles.box}>
      <Avatar src="https://i.pravatar.cc/48?img=44" color="orange" />
      <Avatar color="blue">H</Avatar>
      <Avatar color="deep-orange">D</Avatar>
      <Avatar color="purple">A</Avatar>
      <Avatar theme="error" className={styles.red}>
        A
      </Avatar>
    </Box>
  );
}

import { Avatar } from "@react-md/core/avatar/Avatar";
import { Box } from "@react-md/core/box/Box";
import { type ReactElement } from "react";

import styles from "./AvatarBorders.module.scss";

export default function AvatarBorders(): ReactElement {
  return (
    <Box className={styles.box}>
      <Avatar src="https://i.pravatar.cc/48?img=44" color="orange" />
      <Avatar color="blue">H</Avatar>
      <Avatar color="deep-orange">D</Avatar>
      <Avatar color="purple">A</Avatar>
      <Avatar theme="error" className={styles.red}>
        A
      </Avatar>
    </Box>
  );
}

@use "everything";

.box {
  @include everything.avatar-set-var(border-color, currentcolor);
}

.red {
  @include everything.avatar-set-var(border-color, everything.$red-900);
}

@use "everything";

.box {
  @include everything.avatar-set-var(border-color, currentcolor);
}

.red {
  @include everything.avatar-set-var(border-color, everything.$red-900);
}

Avatar Size

The avatar can be updated to render as the same size as an icon by setting size="icon".

import { Avatar } from "@react-md/core/avatar/Avatar";
import { type ReactElement } from "react";

export default function AvatarSize(): ReactElement {
  return (
    <>
      <Avatar src="https://i.pravatar.cc/24?img=25" size="icon" />
      <Avatar src="https://i.pravatar.cc/48?img=24" size="avatar" />
    </>
  );
}

import { Avatar } from "@react-md/core/avatar/Avatar";
import { type ReactElement } from "react";

export default function AvatarSize(): ReactElement {
  return (
    <>
      <Avatar src="https://i.pravatar.cc/24?img=25" size="icon" />
      <Avatar src="https://i.pravatar.cc/48?img=24" size="avatar" />
    </>
  );
}