diff --git a/packages/arco-lib/src/components/Avatar.tsx b/packages/arco-lib/src/components/Avatar.tsx
new file mode 100644
index 00000000..9200063a
--- /dev/null
+++ b/packages/arco-lib/src/components/Avatar.tsx
@@ -0,0 +1,49 @@
+import { Avatar as BaseAvatar } from "@arco-design/web-react";
+import { ComponentImplementation, Slot } from "@sunmao-ui/runtime";
+import { createComponent } from "@sunmao-ui/core";
+import { css, cx } from "@emotion/css";
+import { Type, Static } from "@sinclair/typebox";
+import { FALLBACK_METADATA, getComponentProps } from "../sunmao-helper";
+import { AvatarPropsSchema as BaseAvatarPropsSchema } from "../generated/types/Avatar";
+
+const AvatarPropsSchema = Type.Object({
+  ...BaseAvatarPropsSchema,
+  className: Type.Optional(Type.String()),
+});
+const AvatarStateSchema = Type.Object({});
+
+const AvatarImpl: ComponentImplementation<Static<typeof AvatarPropsSchema>> = (
+  props
+) => {
+  const { slotsMap, customStyle } = props;
+  const { className, ...cProps } = getComponentProps(props);
+
+  return (
+    <BaseAvatar
+      className={cx(className, css(customStyle?.content))}
+      {...cProps}
+    >
+      <Slot slotsMap={slotsMap} slot="content" />
+    </BaseAvatar>
+  );
+};
+
+export const Avatar = {
+  ...createComponent({
+    version: "arco/v1",
+    metadata: {
+      ...FALLBACK_METADATA,
+      name: "avatar",
+      displayName: "Avatar",
+    },
+    spec: {
+      properties: AvatarPropsSchema,
+      state: AvatarStateSchema,
+      methods: [],
+      slots: ["content"],
+      styleSlots: ["content"],
+      events: [],
+    },
+  }),
+  impl: AvatarImpl,
+};
diff --git a/packages/arco-lib/src/generated/types/Avatar.ts b/packages/arco-lib/src/generated/types/Avatar.ts
new file mode 100644
index 00000000..ac4e9a1a
--- /dev/null
+++ b/packages/arco-lib/src/generated/types/Avatar.ts
@@ -0,0 +1,9 @@
+
+import { Type } from "@sinclair/typebox";
+import { IntoStringUnion, StringUnion } from '../../sunmao-helper';
+
+export const AvatarPropsSchema = {
+  'shape': Type.Optional(StringUnion(['circle', 'square'])),
+  'autoFixFontSize': Type.Optional(Type.Boolean()),
+  'triggerType': Type.Optional(StringUnion(['button', 'mask']))
+};
diff --git a/packages/arco-lib/src/lib.ts b/packages/arco-lib/src/lib.ts
index e2c26ce5..330f11ca 100644
--- a/packages/arco-lib/src/lib.ts
+++ b/packages/arco-lib/src/lib.ts
@@ -9,6 +9,7 @@ import { Dropdown } from "./components/Dropdown";
 import { Space } from "./components/Space";
 import { Input } from "./components/Input";
 import { Divider } from "./components/Divider";
+import { Avatar } from "./components/Avatar";
 
 type Component = Parameters<Registry["registerComponent"]>[0];
 type Trait = Parameters<Registry["registerTrait"]>[0];
@@ -28,6 +29,7 @@ export const components: Component[] = [
   Space,
   Input,
   Divider,
+  Avatar,
 ];
 export const traits: Trait[] = [];
 export const modules: Module[] = [];
diff --git a/packages/arco-lib/tools/typegen.js b/packages/arco-lib/tools/typegen.js
index f0144140..f93bd169 100644
--- a/packages/arco-lib/tools/typegen.js
+++ b/packages/arco-lib/tools/typegen.js
@@ -155,4 +155,7 @@ ${Object.keys(props)
   {
     component: "Divider",
   },
+  {
+    component: "Avatar",
+  },
 ].forEach(generate);