diff --git a/package/component/src/component/avatar/index.less b/package/component/src/component/avatar/index.less
index cbeb3cd8..068cf974 100644
--- a/package/component/src/component/avatar/index.less
+++ b/package/component/src/component/avatar/index.less
@@ -1,18 +1,14 @@
 .layui-avatar {
-  margin: 0;
-  padding: 0;
   font-size: 14px;
   font-variant: tabular-nums;
-  font-feature-settings: tnum;
   border-radius: var(--global-border-radius);
   box-sizing: border-box;
-  color: #000000d9;
-  line-height: 1.5715;
+  color: #ffffff;
   list-style: none;
   position: relative;
   display: inline-block;
+  background: #eeeeee;
   overflow: hidden;
-  color: #fff;
   white-space: nowrap;
   text-align: center;
   width: 32px;
@@ -49,7 +45,6 @@
   & > img {
     width: 100%;
     height: 100%;
-    background: #ccc;
     display: block;
     object-fit: cover;
   }
diff --git a/package/component/src/component/avatar/index.vue b/package/component/src/component/avatar/index.vue
index 6431ba5b..52972d3f 100644
--- a/package/component/src/component/avatar/index.vue
+++ b/package/component/src/component/avatar/index.vue
@@ -1,5 +1,6 @@
 <script lang="ts">
 import { computed, useSlots } from "vue";
+import { LayIcon } from "@layui/icons-vue";
 export default {
   name: "LayAvatar",
 };
@@ -7,16 +8,19 @@ export default {
 
 <script setup lang="ts">
 import "./index.less";
+
 export interface LayAvatarProps {
   src?: string;
   size?: "xs" | "sm" | "md" | "lg";
   radius?: boolean;
+  icon?: string;
   alt?: string;
 }
 
 const props = withDefaults(defineProps<LayAvatarProps>(), {
   size: "md",
   radius: false,
+  icon: "layui-icon-username"
 });
 
 const classes = computed(() => {
@@ -30,10 +34,13 @@ const slot = useSlots();
 </script>
 
 <template>
-  <span v-if="!slot.default" :class="classes">
-    <img :alt="alt" :src="src" />
-  </span>
-  <span :class="classes" v-else>
+  <span :class="classes" v-if="slot.default">
     <slot></slot>
   </span>
+  <span v-else-if="src" :class="classes">
+    <img :alt="alt" :src="src" />
+  </span>
+  <span v-else :class="classes">
+    <lay-icon :type="icon"></lay-icon>
+  </span>
 </template>
diff --git a/package/document-component/src/document/zh-CN/components/avatar.md b/package/document-component/src/document/zh-CN/components/avatar.md
index eb6a9e49..91c4fc58 100644
--- a/package/document-component/src/document/zh-CN/components/avatar.md
+++ b/package/document-component/src/document/zh-CN/components/avatar.md
@@ -13,7 +13,12 @@
 ::: demo 使用 `lay-avatar` 标签, 创建头像
 
 <template>
-  <lay-avatar :src="src"></lay-avatar>
+  <lay-space>
+    <lay-avatar :src="src"></lay-avatar>
+    <lay-avatar> Bai </lay-avatar>
+    <lay-avatar></lay-avatar>
+    <lay-avatar icon="layui-icon-face-smile"></lay-avatar>
+  </lay-space>
 </template>
 
 <script>
diff --git a/package/document-component/src/layouts/Layout.vue b/package/document-component/src/layouts/Layout.vue
index 67a35db7..f4040f3a 100644
--- a/package/document-component/src/layouts/Layout.vue
+++ b/package/document-component/src/layouts/Layout.vue
@@ -310,8 +310,8 @@ export default {
   z-index: 99;
   width: 100%;
   position: fixed;
-  background: #ffffff;
   border-bottom: 1px solid #eeeeee;
+  background: #ffffff;
 }
 
 .layui-layout-document > .layui-layout > .layui-side {
diff --git a/package/document-component/src/view/index.vue b/package/document-component/src/view/index.vue
index 5cd59285..a4acae5d 100644
--- a/package/document-component/src/view/index.vue
+++ b/package/document-component/src/view/index.vue
@@ -455,9 +455,8 @@ body {
   border-radius: 4px;
   color: rgba(60, 60, 60, 0.7);
   border: 1px solid rgba(60, 60, 60, 0.7);
+  background: white;
   font-size: 14px;
-  transition: all 0.5s;
-  -webkit-transition: all 0.5s;
 }
 
 .footer {