diff --git a/components/avatar/__tests__/Avatar.test.js b/components/avatar/__tests__/Avatar.test.js
index 2474140993..efe50ad502 100644
--- a/components/avatar/__tests__/Avatar.test.js
+++ b/components/avatar/__tests__/Avatar.test.js
@@ -214,4 +214,11 @@ describe('Avatar Render', () => {
     expect(wrapper.html().includes('crossorigin')).toEqual(false);
     expect(wrapper.find('img').prop('crossOrigin')).toEqual(undefined);
   });
+
+  it('clickable', async () => {
+    const onClick = jest.fn();
+    const { container } = render(<Avatar onClick={onClick}>TestString</Avatar>);
+    fireEvent.click(container.querySelector('.ant-avatar-string'));
+    expect(onClick).toHaveBeenCalled();
+  });
 });
diff --git a/components/avatar/avatar.tsx b/components/avatar/avatar.tsx
index 04e2080da8..b5de3cd49e 100644
--- a/components/avatar/avatar.tsx
+++ b/components/avatar/avatar.tsx
@@ -32,6 +32,7 @@ export interface AvatarProps {
   children?: React.ReactNode;
   alt?: string;
   crossOrigin?: '' | 'anonymous' | 'use-credentials';
+  onClick?: (e?: React.MouseEvent<HTMLElement>) => void;
   /* callback when img load error */
   /* return false to prevent Avatar show default fallback behavior, then you can do fallback by your self */
   onError?: () => boolean;