diff --git a/packages/components/anchor/docs/Index.zh.md b/packages/components/anchor/docs/Index.zh.md
index b0065de4f..85b8cac0e 100644
--- a/packages/components/anchor/docs/Index.zh.md
+++ b/packages/components/anchor/docs/Index.zh.md
@@ -1,6 +1,6 @@
 ---
 category: components
-type: 其他
+type: 导航
 title: Anchor
 subtitle: 锚点
 theme: true
diff --git a/packages/components/avatar/docs/Index.zh.md b/packages/components/avatar/docs/Index.zh.md
index 3af08cab8..e25456598 100644
--- a/packages/components/avatar/docs/Index.zh.md
+++ b/packages/components/avatar/docs/Index.zh.md
@@ -3,6 +3,6 @@ category: components
 type: 数据展示
 title: Avatar
 subtitle: 头像
-order: 0
+theme: true
 ---
 
diff --git a/packages/components/avatar/docs/Theme.zh.md b/packages/components/avatar/docs/Theme.zh.md
index 8c778153d..a86b1fff6 100644
--- a/packages/components/avatar/docs/Theme.zh.md
+++ b/packages/components/avatar/docs/Theme.zh.md
@@ -1,12 +1,9 @@
 | 名称 | default | seer | 备注 |
 | --- | --- | --- | --- |
-| `@avatar-size-sm` | `@height-sm` | - | - |
-| `@avatar-size-md` | `@height-md` | - | - |
-| `@avatar-size-lg` | `@height-lg` | - | - |
-| `@avatar-font-size-sm` | `@font-size-lg` | - | - |
-| `@avatar-font-size-md` | `@font-size-xl` | - | - |
-| `@avatar-font-size-lg` | `@font-size-2xl` | - | - |
-| `@avatar-color` | `@color-white` | - | - |
-| `@avatar-background-color` | `@color-grey` | `@color-graphite-l20` | - |
-| `@avatar-border-radius-circle` | `@border-radius-full` | - | - |
-| `@avatar-border-radius-square` | `@border-radius-sm` | - | - |
+| `@avatar-size-sm` | `var(--ix-height-sm)` | - | - |
+| `@avatar-size-md` | `var(--ix-height-md)` | - | - |
+| `@avatar-size-lg` | `var(--ix-height-lg)` | - | - |
+| `@avatar-color` | `var(--ix-text-color-inverse)` | - | - |
+| `@avatar-background-color` | `var(--ix-background-color-deep)` | - | - |
+| `@avatar-border-radius-circle` | `50%` | - | - |
+| `@avatar-border-radius-square` | `var(--ix-border-radius-md)` | `var(--ix-border-radius-sm)` | - |
diff --git a/packages/components/avatar/style/index.less b/packages/components/avatar/style/index.less
index ba4d74bbd..d9d8c7aff 100644
--- a/packages/components/avatar/style/index.less
+++ b/packages/components/avatar/style/index.less
@@ -1,7 +1,8 @@
 @import '../../style/mixins/reset.less';
 
 .@{avatar-prefix} {
-  .reset-component();
+  .reset-component-new();
+  .reset-color(@avatar-color, @avatar-background-color);
 
   position: relative;
   display: inline-block;
@@ -9,8 +10,6 @@
   vertical-align: middle;
   white-space: nowrap;
   overflow: hidden;
-  color: @avatar-color;
-  background-color: @avatar-background-color;
 
   &-circle {
     border-radius: @avatar-border-radius-circle;
@@ -25,15 +24,15 @@
   }
 
   &-lg {
-    .avatar-size(@avatar-size-lg, @avatar-font-size-lg);
+    .avatar-size(@avatar-size-lg);
   }
 
   &-md {
-    .avatar-size(@avatar-size-md, @avatar-font-size-md);
+    .avatar-size(@avatar-size-md);
   }
 
   &-sm {
-    .avatar-size(@avatar-size-sm, @avatar-font-size-sm);
+    .avatar-size(@avatar-size-sm);
   }
 
   &-text {
@@ -50,12 +49,12 @@
   }
 }
 
-.avatar-size(@size, @font-size) {
+.avatar-size(@size) {
   width: @size;
   height: @size;
   line-height: @size;
 
-  &.@{avatar-prefix}-icon {
-    font-size: @font-size;
+  .@{icon-prefix} {
+    font-size: calc(@size / 2);
   }
 }
diff --git a/packages/components/avatar/style/themes/default.variable.less b/packages/components/avatar/style/themes/default.variable.less
index 6b0e6f9ac..bb71cf217 100644
--- a/packages/components/avatar/style/themes/default.variable.less
+++ b/packages/components/avatar/style/themes/default.variable.less
@@ -1,10 +1,7 @@
-@avatar-size-sm: @height-sm;
-@avatar-size-md: @height-md;
-@avatar-size-lg: @height-lg;
-@avatar-font-size-sm: @font-size-lg;
-@avatar-font-size-md: @font-size-xl;
-@avatar-font-size-lg: @font-size-2xl;
-@avatar-color: @color-white;
-@avatar-background-color: @color-grey;
-@avatar-border-radius-circle: @border-radius-full;
-@avatar-border-radius-square: @border-radius-sm;
+@avatar-size-sm: var(--ix-height-sm);
+@avatar-size-md: var(--ix-height-md);
+@avatar-size-lg: var(--ix-height-lg);
+@avatar-color: var(--ix-text-color-inverse);
+@avatar-background-color: var(--ix-background-color-deep);
+@avatar-border-radius-circle: 50%;
+@avatar-border-radius-square: var(--ix-border-radius-md);
diff --git a/packages/components/avatar/style/themes/seer.variable.less b/packages/components/avatar/style/themes/seer.variable.less
index dc1cdde7e..95d06b12a 100644
--- a/packages/components/avatar/style/themes/seer.variable.less
+++ b/packages/components/avatar/style/themes/seer.variable.less
@@ -1,3 +1,3 @@
 @import './default.variable.less';
 
-@avatar-background-color: @color-graphite-l20;
\ No newline at end of file
+@avatar-border-radius-square: var(--ix-border-radius-sm);