Avatar

Avatars can be used to represent people or objects. It supports images, Icons, or letters.

Examples

Three sizes and two shapes are available.

TypeScript
JavaScript
import { UserOutlined } from '@ant-design/icons';
import { Avatar, Space } from 'antd';
import React from 'react';

const App: React.FC = () => (
  <Space direction="vertical" size={16}>
    <Space wrap size={16}>
      <Avatar size={64} icon={<UserOutlined />} />
      <Avatar size="large" icon={<UserOutlined />} />
      <Avatar icon={<UserOutlined />} />
      <Avatar size="small" icon={<UserOutlined />} />
    </Space>
    <Space wrap size={16}>
      <Avatar shape="square" size={64} icon={<UserOutlined />} />
      <Avatar shape="square" size="large" icon={<UserOutlined />} />
      <Avatar shape="square" icon={<UserOutlined />} />
      <Avatar shape="square" size="small" icon={<UserOutlined />} />
    </Space>
  </Space>
);

export default App;

Autoset Font Size

For letter type Avatar, when the letters are too long to display, the font size can be automatically adjusted according to the width of the Avatar. You can also use gap to set the unit distance between left and right sides.

TypeScript
JavaScript
import React, { useState } from 'react';
import { Avatar, Button } from 'antd';

const UserList = ['U', 'Lucy', 'Tom', 'Edward'];
const ColorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae'];
const GapList = [4, 3, 2, 1];

const App: React.FC = () => {
  const [user, setUser] = useState(UserList[0]);
  const [color, setColor] = useState(ColorList[0]);
  const [gap, setGap] = useState(GapList[0]);

  const changeUser = () => {
    const index = UserList.indexOf(user);
    setUser(index < UserList.length - 1 ? UserList[index + 1] : UserList[0]);
    setColor(index < ColorList.length - 1 ? ColorList[index + 1] : ColorList[0]);
  };

  const changeGap = () => {
    const index = GapList.indexOf(gap);
    setGap(index < GapList.length - 1 ? GapList[index + 1] : GapList[0]);
  };

  return (
    <>
      <Avatar style={{ backgroundColor: color, verticalAlign: 'middle' }} size="large" gap={gap}>
        {user}
      </Avatar>
      <Button
        size="small"
        style={{ margin: '0 16px', verticalAlign: 'middle' }}
        onClick={changeUser}
      >
        ChangeUser
      </Button>
      <Button size="small" style={{ verticalAlign: 'middle' }} onClick={changeGap}>
        changeGap
      </Button>
    </>
  );
};

export default App;

Avatar.Group

Avatar group display.

TypeScript
JavaScript
import { AntDesignOutlined, UserOutlined } from '@ant-design/icons';
import { Avatar, Divider, Tooltip } from 'antd';
import React from 'react';

const App: React.FC = () => (
  <>
    <Avatar.Group>
      <Avatar src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=1" />
      <a href="https://ant.design">
        <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
      </a>
      <Tooltip title="Ant User" placement="top">
        <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
      </Tooltip>
      <Avatar style={{ backgroundColor: '#1677ff' }} icon={<AntDesignOutlined />} />
    </Avatar.Group>
    <Divider />
    <Avatar.Group maxCount={2} maxStyle={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>
      <Avatar src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=2" />
      <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
      <Tooltip title="Ant User" placement="top">
        <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
      </Tooltip>
      <Avatar style={{ backgroundColor: '#1677ff' }} icon={<AntDesignOutlined />} />
    </Avatar.Group>
    <Divider />
    <Avatar.Group
      maxCount={2}
      size="large"
      maxStyle={{ color: '#f56a00', backgroundColor: '#fde3cf' }}
    >
      <Avatar src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=3" />
      <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
      <Tooltip title="Ant User" placement="top">
        <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
      </Tooltip>
      <Avatar style={{ backgroundColor: '#1677ff' }} icon={<AntDesignOutlined />} />
    </Avatar.Group>
    <Divider />
    <Avatar.Group
      maxCount={2}
      maxPopoverTrigger="click"
      size="large"
      maxStyle={{ color: '#f56a00', backgroundColor: '#fde3cf', cursor: 'pointer' }}
    >
      <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
      <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
      <Tooltip title="Ant User" placement="top">
        <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
      </Tooltip>
      <Avatar style={{ backgroundColor: '#1677ff' }} icon={<AntDesignOutlined />} />
    </Avatar.Group>
  </>
);

export default App;

Type

Image, Icon and letter are supported, and the latter two kinds of avatar can have custom colors and background colors.

TypeScript
JavaScript
import { UserOutlined } from '@ant-design/icons';
import { Avatar, Space } from 'antd';
import React from 'react';

const url = 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg';

const App: React.FC = () => (
  <Space size={16} wrap>
    <Avatar icon={<UserOutlined />} />
    <Avatar>U</Avatar>
    <Avatar size={40}>USER</Avatar>
    <Avatar src={url} />
    <Avatar src={<img src={url} alt="avatar" />} />
    <Avatar style={{ backgroundColor: '#fde3cf', color: '#f56a00' }}>U</Avatar>
    <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
  </Space>
);

export default App;

With Badge

Usually used for reminders and notifications.

TypeScript
JavaScript
import { UserOutlined } from '@ant-design/icons';
import { Avatar, Badge, Space } from 'antd';
import React from 'react';

const App: React.FC = () => (
  <Space size={24}>
    <Badge count={1}>
      <Avatar shape="square" icon={<UserOutlined />} />
    </Badge>
    <Badge dot>
      <Avatar shape="square" icon={<UserOutlined />} />
    </Badge>
  </Space>
);

export default App;

Responsive Size

Avatar size can be automatically adjusted based on the screen size.

TypeScript
JavaScript
import React from 'react';
import { AntDesignOutlined } from '@ant-design/icons';
import { Avatar } from 'antd';

const App: React.FC = () => (
  <Avatar
    size={{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }}
    icon={<AntDesignOutlined />}
  />
);

export default App;

API

Avatar

Property	Description	Type	Default	Version
alt	This attribute defines the alternative text describing the image	string	-
gap	Letter type unit distance between left and right sides	number	4	4.3.0
icon	Custom icon type for an icon avatar	ReactNode	-
shape	The shape of avatar	`circle` \| `square`	`circle`
size	The size of the avatar	number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...}	`default`	4.7.0
src	The address of the image for an image avatar or image element	string \| ReactNode	-	ReactNode: 4.8.0
srcSet	A list of sources to use for different screen resolutions	string	-
draggable	Whether the picture is allowed to be dragged	boolean \| `'true'` \| `'false'`	true
crossOrigin	CORS settings attributes	`'anonymous'` \| `'use-credentials'` \| `''`	-	4.17.0
onError	Handler when img load error, return false to prevent default fallback behavior	() => boolean	-

Tip: You can set icon or children as the fallback for image load error, with the priority of icon > children

Avatar.Group (4.5.0+)

Property	Description	Type	Default	Version
maxCount	Max avatars to show	number	-
maxPopoverPlacement	The placement of excess avatar Popover	`top` \| `bottom`	`top`
maxPopoverTrigger	Set the trigger of excess avatar Popover	`hover` \| `focus` \| `click`	`hover`	4.17.0
maxStyle	The style of excess avatar style	CSSProperties	-
size	The size of the avatar	number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...}	`default`	4.8.0

Design Token

Global Token

Token Name	Description	Type	Default Value
colorBorderBg	Control the color of background border of element.	string	#ffffff
colorText	Default text color which comply with W3C standards, and this color is also the darkest neutral color.	string	rgba(0, 0, 0, 0.88)
colorTextLightSolid	Control the highlight color of text with background color, such as the text in Primary Button components.	string	#fff
colorTextPlaceholder	Control the color of placeholder text.	string	rgba(0, 0, 0, 0.25)
borderRadius	Border radius of base components	number	6
borderRadiusLG	LG size border radius, used in some large border radius components, such as Card, Modal and other components.	number	8
borderRadiusSM	SM size border radius, used in small size components, such as Button, Input, Select and other input components in small size	number	4
controlHeight	The height of the basic controls such as buttons and input boxes in Ant Design	number	32
controlHeightLG	LG component height	number	40
controlHeightSM	SM component height	number	24
fontFamily	The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics.	string	-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
fontSize	The most widely used font size in the design system, from which the text gradient will be derived.	number	14
fontSizeHeading3	Font size of h3 tag.	number	24
fontSizeLG	Large font size	number	16
fontSizeXL	Super large font size	number	20
lineHeight	Line height of text.	number	1.5714285714285714
lineType	Border style of base components	string	solid
lineWidth	Border width of base components	number	1
marginXS	Control the margin of an element, with a small size.	number	8

import { UserOutlined } from '@ant-design/icons'; import { Avatar, Space } from 'antd'; import React from 'react'; const App: React.FC = () => ( <Space direction="vertical" size={16}> <Space wrap size={16}> <Avatar size={64} icon={<UserOutlined />} /> <Avatar size="large" icon={<UserOutlined />} /> <Avatar icon={<UserOutlined />} /> <Avatar size="small" icon={<UserOutlined />} /> </Space> <Space wrap size={16}> <Avatar shape="square" size={64} icon={<UserOutlined />} /> <Avatar shape="square" size="large" icon={<UserOutlined />} /> <Avatar shape="square" icon={<UserOutlined />} /> <Avatar shape="square" size="small" icon={<UserOutlined />} /> </Space> </Space> ); export default App;

import React, { useState } from 'react'; import { Avatar, Button } from 'antd'; const UserList = ['U', 'Lucy', 'Tom', 'Edward']; const ColorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae']; const GapList = [4, 3, 2, 1]; const App: React.FC = () => { const [user, setUser] = useState(UserList[0]); const [color, setColor] = useState(ColorList[0]); const [gap, setGap] = useState(GapList[0]); const changeUser = () => { const index = UserList.indexOf(user); setUser(index < UserList.length - 1 ? UserList[index + 1] : UserList[0]); setColor(index < ColorList.length - 1 ? ColorList[index + 1] : ColorList[0]); }; const changeGap = () => { const index = GapList.indexOf(gap); setGap(index < GapList.length - 1 ? GapList[index + 1] : GapList[0]); }; return ( <> <Avatar style={{ backgroundColor: color, verticalAlign: 'middle' }} size="large" gap={gap}> {user} </Avatar> <Button size="small" style={{ margin: '0 16px', verticalAlign: 'middle' }} onClick={changeUser} > ChangeUser </Button> <Button size="small" style={{ verticalAlign: 'middle' }} onClick={changeGap}> changeGap </Button> </> ); }; export default App;

import { AntDesignOutlined, UserOutlined } from '@ant-design/icons'; import { Avatar, Divider, Tooltip } from 'antd'; import React from 'react'; const App: React.FC = () => ( <> <Avatar.Group> <Avatar src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=1" /> <a href="https://ant.design"> <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar> </a> <Tooltip title="Ant User" placement="top"> <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} /> </Tooltip> <Avatar style={{ backgroundColor: '#1677ff' }} icon={<AntDesignOutlined />} /> </Avatar.Group> <Divider /> <Avatar.Group maxCount={2} maxStyle={{ color: '#f56a00', backgroundColor: '#fde3cf' }}> <Avatar src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=2" /> <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar> <Tooltip title="Ant User" placement="top"> <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} /> </Tooltip> <Avatar style={{ backgroundColor: '#1677ff' }} icon={<AntDesignOutlined />} /> </Avatar.Group> <Divider /> <Avatar.Group maxCount={2} size="large" maxStyle={{ color: '#f56a00', backgroundColor: '#fde3cf' }} > <Avatar src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=3" /> <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar> <Tooltip title="Ant User" placement="top"> <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} /> </Tooltip> <Avatar style={{ backgroundColor: '#1677ff' }} icon={<AntDesignOutlined />} /> </Avatar.Group> <Divider /> <Avatar.Group maxCount={2} maxPopoverTrigger="click" size="large" maxStyle={{ color: '#f56a00', backgroundColor: '#fde3cf', cursor: 'pointer' }} > <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /> <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar> <Tooltip title="Ant User" placement="top"> <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} /> </Tooltip> <Avatar style={{ backgroundColor: '#1677ff' }} icon={<AntDesignOutlined />} /> </Avatar.Group> </> ); export default App;

import { UserOutlined } from '@ant-design/icons'; import { Avatar, Space } from 'antd'; import React from 'react'; const url = 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg'; const App: React.FC = () => ( <Space size={16} wrap> <Avatar icon={<UserOutlined />} /> <Avatar>U</Avatar> <Avatar size={40}>USER</Avatar> <Avatar src={url} /> <Avatar src={<img src={url} alt="avatar" />} /> <Avatar style={{ backgroundColor: '#fde3cf', color: '#f56a00' }}>U</Avatar> <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} /> </Space> ); export default App;

import { UserOutlined } from '@ant-design/icons'; import { Avatar, Badge, Space } from 'antd'; import React from 'react'; const App: React.FC = () => ( <Space size={24}> <Badge count={1}> <Avatar shape="square" icon={<UserOutlined />} /> </Badge> <Badge dot> <Avatar shape="square" icon={<UserOutlined />} /> </Badge> </Space> ); export default App;

import React from 'react'; import { AntDesignOutlined } from '@ant-design/icons'; import { Avatar } from 'antd'; const App: React.FC = () => ( <Avatar size={{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }} icon={<AntDesignOutlined />} /> ); export default App;

API

Avatar

Property	Description	Type	Default	Version
alt	This attribute defines the alternative text describing the image	string	-
gap	Letter type unit distance between left and right sides	number	4	4.3.0
icon	Custom icon type for an icon avatar	ReactNode	-
shape	The shape of avatar	`circle` \| `square`	`circle`
size	The size of the avatar	number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...}	`default`	4.7.0
src	The address of the image for an image avatar or image element	string \| ReactNode	-	ReactNode: 4.8.0
srcSet	A list of sources to use for different screen resolutions	string	-
draggable	Whether the picture is allowed to be dragged	boolean \| `'true'` \| `'false'`	true
crossOrigin	CORS settings attributes	`'anonymous'` \| `'use-credentials'` \| `''`	-	4.17.0
onError	Handler when img load error, return false to prevent default fallback behavior	() => boolean	-

Tip: You can set icon or children as the fallback for image load error, with the priority of icon > children

Avatar.Group (4.5.0+)

Property	Description	Type	Default	Version
maxCount	Max avatars to show	number	-
maxPopoverPlacement	The placement of excess avatar Popover	`top` \| `bottom`	`top`
maxPopoverTrigger	Set the trigger of excess avatar Popover	`hover` \| `focus` \| `click`	`hover`	4.17.0
maxStyle	The style of excess avatar style	CSSProperties	-
size	The size of the avatar	number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...}	`default`	4.8.0

Token Name

Description

Type

Default Value

colorBorderBg

Control the color of background border of element.

string

#ffffff

colorText

Default text color which comply with W3C standards, and this color is also the darkest neutral color.

string

rgba(0, 0, 0, 0.88)

colorTextLightSolid

Control the highlight color of text with background color, such as the text in Primary Button components.

string

#fff

colorTextPlaceholder

Control the color of placeholder text.

string

rgba(0, 0, 0, 0.25)

borderRadius

Border radius of base components

number

borderRadiusLG

LG size border radius, used in some large border radius components, such as Card, Modal and other components.

number

borderRadiusSM

SM size border radius, used in small size components, such as Button, Input, Select and other input components in small size

number

controlHeight

The height of the basic controls such as buttons and input boxes in Ant Design

number

controlHeightLG

LG component height

number

controlHeightSM

SM component height

number

fontFamily

The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics.

string

-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'

fontSize

The most widely used font size in the design system, from which the text gradient will be derived.

number

fontSizeHeading3

Font size of h3 tag.

number

fontSizeLG

Large font size

number

fontSizeXL

Super large font size

number

lineHeight

Line height of text.

number

1.5714285714285714

lineType

Border style of base components

string

solid

lineWidth

Border width of base components

number

marginXS

Control the margin of an element, with a small size.

number