The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.

import { Avatar } from '@nextui-org/react';


You can display an avatar with just text or image


The Avatar comes in 5 sizes and you can also set a custom size in px with size property.


You can change the color with color prop


You can change the full style towards a bodered Avatar with the bordered property.


You can apply a zoom animation to avatar with the zoomed property.


You can change the full style towards a squared Avatar with the squared property.


NextUI doesn't use any library or icon font by default, with this we give the freedom to use the one you prefer. In the following example we use Boxicons


You can group several avatar with the parent component Avatar.Group


Avatar Props

AttributeTypeAccepted valuesDescriptionDefault
colorNormalColors stringNormalColorsChange avatar colordefault
textColorSimpleColors stringSimpleColorsChange avatar text colordefault
srcstring-Image source (local or remote)-
textstring-Display text when image is missing-
altstring-Display alt text when image is missing-
sizeNormalSizes numberNormalSizesAvatar sizemedium
borderedbooleantrue/falseBodered avatarfalse
borderWeightNormalWeightsNormalWeightsBorder weight for bordered avatarnormal
pointerbooleantrue/falseDisplay pointer cursor on hoverfalse
stackedbooleantrue/falseStacked display groupfalse
zoomedbooleantrue/falseZoomed avatarfalse
squaredbooleantrue/falseSquared avatarfalse
iconReactNode-Show icon in avatar-
...ImgHTMLAttributes'alt', 'crossOrigin', 'className', ...Native props-

Avatar Group Props

AttributeTypeAccepted valuesDescriptionDefault
countnumber-Total count of avatars-
animatedboolean-Display translations animation on hoverfalse
...HTMLAttributes'id', 'name', 'className', ...Native props-

Avatar types

Normal Colors

type NormalColors =
  | 'default'
  | 'primary'
  | 'secondary'
  | 'success'
  | 'warning'
  | 'error'
  | 'gradient';

Simple Colors

type SimpleColors =
  | 'default'
  | 'primary'
  | 'secondary'
  | 'success'
  | 'warning'
  | 'error';
type NormalSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

Normal Weights

type NormalWeights = 'light' | 'normal' | 'bold' | 'extrabold' | 'black';