Solution

To make avatar using ant design in react js, first install ant design library using npm install antd command and install ant design icon library using npm install --save @ant-design/icons command then import and use avatar component from it.

Snippet

In this snippet, see the short example of use avatar component from ant design library.

<div>
  <Avatar size={64} icon={<UserOutlined />} />
  <Avatar shape="square" size={64} icon={<UserOutlined />} />
</div>

Example

In this example, we will import the avatar component from antd library, use the avatar component, and provide attribute details to change avatar’s appearance.

Let’s start coding…

App.js

import { UserOutlined } from '@ant-design/icons';
import { Avatar } from 'antd';
const App = () => (
  <>
    <div>
      <Avatar size={64} icon={<UserOutlined />} />
      <Avatar shape="square" size={64} icon={<UserOutlined />} />
    </div>
  </>
);
export default App;

Output

target, avatar

Here, we are provided code sandbox links for the above program make avatar using ant design. Then you can use whenever you went and do the changes as per your requirements.

codesandbox

Happy Coding,

I hope the above example with help you to do your task.