diff --git a/components/icon/demo/basic.vue b/components/icon/demo/basic.vue
index e04897e44..eda981182 100644
--- a/components/icon/demo/basic.vue
+++ b/components/icon/demo/basic.vue
@@ -17,14 +17,14 @@ Import icons from `@ant-design/icons-vue`, component name of icons with differen
 </docs>
 
 <template>
-  <div class="icons-list">
+  <a-space>
     <home-outlined />
     <setting-filled />
     <smile-outlined />
     <sync-outlined spin />
     <smile-outlined :rotate="180" />
     <loading-outlined />
-  </div>
+  </a-space>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue';
@@ -45,9 +45,3 @@ export default defineComponent({
   },
 });
 </script>
-<style scoped>
-.icons-list :deep(.anticon) {
-  margin-right: 6px;
-  font-size: 24px;
-}
-</style>
diff --git a/components/icon/demo/custom.vue b/components/icon/demo/custom.vue
index 4cda00b20..6f2c9d320 100644
--- a/components/icon/demo/custom.vue
+++ b/components/icon/demo/custom.vue
@@ -17,7 +17,7 @@ Create a reusable Vue component by using `Icon`. The property / slot `component`
 </docs>
 
 <template>
-  <div class="custom-icons-list">
+  <a-space>
     <icon :style="{ color: 'hotpink' }">
       <template #component>
         <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024">
@@ -74,14 +74,19 @@ Create a reusable Vue component by using `Icon`. The property / slot `component`
         </svg>
       </template>
     </icon>
-  </div>
+    <icon>
+      <template #component><HomeOutlined /></template>
+    </icon>
+    <HomeOutlined />
+  </a-space>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue';
-import Icon from '@ant-design/icons-vue';
+import Icon, { HomeOutlined } from '@ant-design/icons-vue';
 export default defineComponent({
   components: {
     Icon,
+    HomeOutlined,
   },
 });
 </script>
diff --git a/components/icon/demo/iconfont.vue b/components/icon/demo/iconfont.vue
index 0c1992571..c0a792812 100644
--- a/components/icon/demo/iconfont.vue
+++ b/components/icon/demo/iconfont.vue
@@ -17,11 +17,11 @@ If you are using [iconfont.cn](http://iconfont.cn/), you can use the icons in yo
 </docs>
 
 <template>
-  <div class="icons-list">
+  <a-space>
     <icon-font type="icon-tuichu" />
     <icon-font type="icon-facebook" />
     <icon-font type="icon-twitter" />
-  </div>
+  </a-space>
 </template>
 <script>
 import { createFromIconfontCN } from '@ant-design/icons-vue';
diff --git a/components/icon/demo/two-tone.vue b/components/icon/demo/two-tone.vue
index 189084c2f..541058b28 100644
--- a/components/icon/demo/two-tone.vue
+++ b/components/icon/demo/two-tone.vue
@@ -17,11 +17,11 @@ You can set `two-tone-color` prop to specific primary color for two-tone icons.
 </docs>
 
 <template>
-  <div class="icons-list">
+  <a-space>
     <smile-two-tone />
     <heart-two-tone two-tone-color="#eb2f96" />
     <check-circle-two-tone two-tone-color="#52c41a" />
-  </div>
+  </a-space>
 </template>
 <script>
 import { SmileTwoTone, HeartTwoTone, CheckCircleTwoTone } from '@ant-design/icons-vue';