diff --git a/docs/.vitepress/vitepress/components/globals/icons-categories.json b/docs/.vitepress/vitepress/components/globals/icons-categories.json
new file mode 100644
index 0000000000..1485bf6311
--- /dev/null
+++ b/docs/.vitepress/vitepress/components/globals/icons-categories.json
@@ -0,0 +1,332 @@
+{
+  "categories": [
+    {
+      "name": "System",
+      "items": [
+        "Plus",
+        "Minus",
+        "CirclePlus",
+        "Search",
+        "Female",
+        "Male",
+        "Aim",
+        "House",
+        "FullScreen",
+        "Loading",
+        "Link",
+        "Service",
+        "Pointer",
+        "Star",
+        "Notification",
+        "Connection",
+        "ChatDotRound",
+        "Setting",
+        "Clock",
+        "Position",
+        "Discount",
+        "Odometer",
+        "ChatSquare",
+        "ChatRound",
+        "ChatLineRound",
+        "ChatLineSquare",
+        "ChatDotSquare",
+        "View",
+        "Hide",
+        "Unlock",
+        "Lock",
+        "RefreshRight",
+        "RefreshLeft",
+        "Refresh",
+        "Bell",
+        "MuteNotification",
+        "User",
+        "Check",
+        "CircleCheck",
+        "Warning",
+        "CircleClose",
+        "Close",
+        "PieChart",
+        "More",
+        "Compass",
+        "Filter",
+        "Switch",
+        "Select",
+        "SemiSelect",
+        "CloseBold",
+        "EditPen",
+        "Edit",
+        "Message",
+        "MessageBox",
+        "TurnOff",
+        "Finished",
+        "Delete",
+        "Crop",
+        "SwitchButton",
+        "Operation",
+        "Open",
+        "Remove",
+        "ZoomOut",
+        "ZoomIn",
+        "InfoFilled",
+        "CircleCheckFilled",
+        "SuccessFilled",
+        "WarningFilled",
+        "CircleCloseFilled",
+        "QuestionFilled",
+        "WarnTriangleFilled",
+        "UserFilled",
+        "MoreFilled",
+        "Tools",
+        "HomeFilled",
+        "Menu",
+        "UploadFilled",
+        "Avatar",
+        "HelpFilled",
+        "Share",
+        "StarFilled",
+        "Comment",
+        "Histogram",
+        "Grid",
+        "Promotion",
+        "DeleteFilled",
+        "RemoveFilled",
+        "CirclePlusFilled"
+      ]
+    },
+    {
+      "name": "Arrow",
+      "items": [
+        "ArrowLeft",
+        "ArrowUp",
+        "ArrowRight",
+        "ArrowDown",
+        "ArrowLeftBold",
+        "ArrowUpBold",
+        "ArrowRightBold",
+        "ArrowDownBold",
+        "DArrowRight",
+        "DArrowLeft",
+        "Download",
+        "Upload",
+        "Top",
+        "Bottom",
+        "Back",
+        "Right",
+        "TopRight",
+        "TopLeft",
+        "BottomRight",
+        "BottomLeft",
+        "Sort",
+        "SortUp",
+        "SortDown",
+        "Rank",
+        "CaretLeft",
+        "CaretTop",
+        "CaretRight",
+        "CaretBottom",
+        "DCaret",
+        "Expand",
+        "Fold"
+      ]
+    },
+    {
+      "name": "Document",
+      "items": [
+        "DocumentAdd",
+        "Document",
+        "Notebook",
+        "Tickets",
+        "Memo",
+        "Collection",
+        "Postcard",
+        "ScaleToOriginal",
+        "SetUp",
+        "DocumentDelete",
+        "DocumentChecked",
+        "DataBoard",
+        "DataAnalysis",
+        "CopyDocument",
+        "FolderChecked",
+        "Files",
+        "Folder",
+        "FolderDelete",
+        "FolderRemove",
+        "FolderOpened",
+        "DocumentCopy",
+        "DocumentRemove",
+        "FolderAdd",
+        "FirstAidKit",
+        "Reading",
+        "DataLine",
+        "Management",
+        "Checked",
+        "Ticket",
+        "Failed",
+        "TrendCharts",
+        "List"
+      ]
+    },
+    {
+      "name": "Media",
+      "items": [
+        "Microphone",
+        "Mute",
+        "Mic",
+        "VideoPause",
+        "VideoCamera",
+        "VideoPlay",
+        "Headset",
+        "Monitor",
+        "Film",
+        "Camera",
+        "Picture",
+        "PictureRounded",
+        "Iphone",
+        "Cellphone",
+        "VideoCameraFilled",
+        "PictureFilled",
+        "Platform",
+        "CameraFilled",
+        "BellFilled"
+      ]
+    },
+    {
+      "name": "Traffic",
+      "items": [
+        "Location",
+        "LocationInformation",
+        "DeleteLocation",
+        "Coordinate",
+        "Bicycle",
+        "OfficeBuilding",
+        "School",
+        "Guide",
+        "AddLocation",
+        "MapLocation",
+        "Place",
+        "LocationFilled",
+        "Van"
+      ]
+    },
+    {
+      "name": "Food",
+      "items": [
+        "Watermelon",
+        "Pear",
+        "NoSmoking",
+        "Smoking",
+        "Mug",
+        "GobletSquareFull",
+        "GobletFull",
+        "KnifeFork",
+        "Sugar",
+        "Bowl",
+        "MilkTea",
+        "Lollipop",
+        "Coffee",
+        "Chicken",
+        "Dish",
+        "IceTea",
+        "ColdDrink",
+        "CoffeeCup",
+        "DishDot",
+        "IceDrink",
+        "IceCream",
+        "Dessert",
+        "IceCreamSquare",
+        "ForkSpoon",
+        "IceCreamRound",
+        "Food",
+        "HotWater",
+        "Grape",
+        "Fries",
+        "Apple",
+        "Burger",
+        "Goblet",
+        "GobletSquare",
+        "Orange",
+        "Cherry"
+      ]
+    },
+    {
+      "name": "Items",
+      "items": [
+        "Printer",
+        "Calendar",
+        "CreditCard",
+        "Box",
+        "Money",
+        "Refrigerator",
+        "Cpu",
+        "Football",
+        "Brush",
+        "Suitcase",
+        "SuitcaseLine",
+        "Umbrella",
+        "AlarmClock",
+        "Medal",
+        "GoldMedal",
+        "Present",
+        "Mouse",
+        "Watch",
+        "QuartzWatch",
+        "Magnet",
+        "Help",
+        "Soccer",
+        "ToiletPaper",
+        "ReadingLamp",
+        "Paperclip",
+        "MagicStick",
+        "Basketball",
+        "Baseball",
+        "Coin",
+        "Goods",
+        "Sell",
+        "SoldOut",
+        "Key",
+        "ShoppingCart",
+        "ShoppingCartFull",
+        "ShoppingTrolley",
+        "Phone",
+        "Scissor",
+        "Handbag",
+        "ShoppingBag",
+        "Trophy",
+        "TrophyBase",
+        "Stopwatch",
+        "Timer",
+        "CollectionTag",
+        "Discount",
+        "TakeawayBox",
+        "PriceTag",
+        "Wallet",
+        "Opportunity",
+        "PhoneFilled",
+        "WalletFilled",
+        "GoodsFilled",
+        "Flag",
+        "BrushFilled",
+        "Briefcase",
+        "Stamp"
+      ]
+    },
+    {
+      "name": "Weather",
+      "items": [
+        "Sunrise",
+        "Sunny",
+        "Ship",
+        "MostlyCloudy",
+        "PartlyCloudy",
+        "Sunset",
+        "Sunrise",
+        "Drizzling",
+        "Pouring",
+        "Cloudy",
+        "Moon",
+        "MoonNight",
+        "Lightning"
+      ]
+    }
+  ]
+}
diff --git a/docs/.vitepress/vitepress/components/globals/icons.vue b/docs/.vitepress/vitepress/components/globals/icons.vue
index 9c291b7a7b..ec23ce9057 100644
--- a/docs/.vitepress/vitepress/components/globals/icons.vue
+++ b/docs/.vitepress/vitepress/components/globals/icons.vue
@@ -5,6 +5,13 @@ import { ElMessage } from 'element-plus'
 import * as Icons from '@element-plus/icons-vue'
 import { useLang } from '../../composables/lang'
 import localeData from '../../../i18n/component/icons.json'
+import IconCategories from './icons-categories.json'
+import type { DefineComponent } from 'vue'
+
+type CategoriesItem = {
+  name: string
+  icons: DefineComponent[]
+}
 
 const lang = useLang()
 const locale = computed(() => localeData[lang.value])
@@ -36,6 +43,26 @@ const copySvgIcon = async (name, refs) => {
     await copyContent(content)
   }
 }
+
+const categories = ref<CategoriesItem[]>([])
+const iconMap = new Map(Object.entries(Icons))
+
+IconCategories.categories.forEach((o) => {
+  const result: CategoriesItem = {
+    name: o.name,
+    icons: [],
+  }
+  o.items.forEach((i) => {
+    const icon = iconMap.get(i)
+    if (icon) {
+      result.icons.push(icon)
+      iconMap.delete(i)
+    }
+  })
+  categories.value.push(result)
+})
+
+categories.value.push({ name: 'Other', icons: Array.from(iconMap.values()) })
 </script>
 
 <template>
@@ -46,61 +73,77 @@ const copySvgIcon = async (name, refs) => {
       inactive-text="Copy SVG content"
     />
   </div>
-  <ul class="demo-icon-list">
-    <li
-      v-for="component in Icons"
-      :key="component.name"
-      :ref="component.name"
-      class="icon-item"
-      @click="copySvgIcon(component.name, $refs)"
-    >
-      <span class="demo-svg-icon">
-        <ElIcon :size="20">
-          <component :is="component" />
-        </ElIcon>
-        <span class="icon-name">{{ component.name }}</span>
-      </span>
-    </li>
-  </ul>
+  <div v-for="item in categories" :key="item.name" class="demo-icon-item">
+    <div class="demo-icon-title">{{ item.name }}</div>
+    <ul class="demo-icon-list">
+      <li
+        v-for="component in item.icons"
+        :key="component.name"
+        :ref="component.name"
+        class="icon-item"
+        @click="copySvgIcon(component.name, $refs)"
+      >
+        <span class="demo-svg-icon">
+          <ElIcon :size="20">
+            <component :is="component" />
+          </ElIcon>
+          <span class="icon-name">{{ component.name }}</span>
+        </span>
+      </li>
+    </ul>
+  </div>
 </template>
 
 <style scoped lang="scss">
-.demo-icon-list {
-  overflow: hidden;
-  list-style: none;
-  padding: 0 !important;
-  border-top: 1px solid var(--el-border-color);
-  border-left: 1px solid var(--el-border-color);
-  border-radius: 4px;
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
+.demo-icon {
+  &-item {
+    margin-top: 24px;
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+  &-title {
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 26px;
+  }
+  &-list {
+    overflow: hidden;
+    list-style: none;
+    padding: 0 !important;
+    border-top: 1px solid var(--el-border-color);
+    border-left: 1px solid var(--el-border-color);
+    border-radius: 4px;
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
 
-  .icon-item {
-    text-align: center;
-    color: var(--el-text-color-regular);
-    height: 90px;
-    font-size: 13px;
-    border-right: 1px solid var(--el-border-color);
-    border-bottom: 1px solid var(--el-border-color);
-    transition: background-color var(--el-transition-duration);
-    &:hover {
-      background-color: var(--el-border-color-extra-light);
-      .el-icon {
+    .icon-item {
+      text-align: center;
+      color: var(--el-text-color-regular);
+      height: 90px;
+      font-size: 13px;
+      border-right: 1px solid var(--el-border-color);
+      border-bottom: 1px solid var(--el-border-color);
+      transition: background-color var(--el-transition-duration);
+      &:hover {
+        background-color: var(--el-border-color-extra-light);
+        .el-icon {
+          color: var(--brand-color-light);
+        }
         color: var(--brand-color-light);
       }
-      color: var(--brand-color-light);
-    }
 
-    .demo-svg-icon {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      height: 100%;
-      cursor: pointer;
+      .demo-svg-icon {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        cursor: pointer;
 
-      .icon-name {
-        margin-top: 8px;
+        .icon-name {
+          margin-top: 8px;
+        }
       }
     }
   }
diff --git a/docs/package.json b/docs/package.json
index 6325852bf6..e32756f0d2 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@docsearch/js": "^3.1.0",
-    "@element-plus/icons-vue": "^2.0.6",
+    "@element-plus/icons-vue": "^2.0.9",
     "@element-plus/metadata": "workspace:*",
     "@vue/shared": "^3.2.37",
     "@vueuse/core": "^8.7.5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1c38e58588..5f5a16ea0b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -161,7 +161,7 @@ importers:
       '@element-plus/build': workspace:*
       '@element-plus/build-constants': workspace:*
       '@element-plus/build-utils': workspace:*
-      '@element-plus/icons-vue': ^2.0.6
+      '@element-plus/icons-vue': ^2.0.9
       '@element-plus/metadata': workspace:*
       '@iconify-json/ri': ^1.1.3
       '@types/markdown-it': ^12.2.3
@@ -195,13 +195,13 @@ importers:
       vue: ^3.2.37
     dependencies:
       '@docsearch/js': 3.1.0
-      '@element-plus/icons-vue': 2.0.6_vue@3.2.37
+      '@element-plus/icons-vue': 2.0.9_vue@3.2.37
       '@element-plus/metadata': link:../internal/metadata
       '@vue/shared': 3.2.37
       '@vueuse/core': 8.7.5_vue@3.2.37
       axios: 0.27.2
       clipboard-copy: 4.0.1
-      element-plus: 2.2.9_vue@3.2.37
+      element-plus: 2.2.12_vue@3.2.37
       markdown-it: 13.0.1
       normalize.css: 8.0.1
       nprogress: 0.2.0
@@ -1966,6 +1966,14 @@ packages:
       vue: 3.2.37
     dev: false
 
+  /@element-plus/icons-vue/2.0.9_vue@3.2.37:
+    resolution: {integrity: sha512-okdrwiVeKBmW41Hkl0eMrXDjzJwhQMuKiBOu17rOszqM+LS/yBYpNQNV5Jvoh06Wc+89fMmb/uhzf8NZuDuUaQ==}
+    peerDependencies:
+      vue: ^3.2.0
+    dependencies:
+      vue: 3.2.37
+    dev: false
+
   /@esbuild-kit/cjs-loader/2.2.1:
     resolution: {integrity: sha512-pq2Z4DcqTBF7y1wQuIzFVqmHJVnmP6hgHEWN2ubPjeG7OzXMZ9NvozW+YA/MIeMdZWp1jcJ/EvXk2+mfEKoCDQ==}
     dependencies:
@@ -4818,8 +4826,8 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
     dependencies:
-      is-text-path: 1.0.1
       JSONStream: 1.3.5
+      is-text-path: 1.0.1
       lodash: 4.17.21
       meow: 8.1.2
       split2: 3.2.2
@@ -5241,13 +5249,13 @@ packages:
   /electron-to-chromium/1.4.147:
     resolution: {integrity: sha512-czclPqxLMPqPMkahKcske4TaS5lcznsc26ByBlEFDU8grTBVK9C5W6K9I6oEEhm4Ai4jTihGnys90xY1yjXcRg==}
 
-  /element-plus/2.2.9_vue@3.2.37:
-    resolution: {integrity: sha512-jYbL0JkCdv95rkT6trZJjCAizLPySa0qcd2cgq+57SKQnCZAcNDDq4GbTuFRnNavdoeCJnuM3HIficTIUpsMOQ==}
+  /element-plus/2.2.12_vue@3.2.37:
+    resolution: {integrity: sha512-g/hIHj3b+dND2R3YRvyvCJtJhQvR7lWvXqhJaoxaQmajjNWedoe4rttxG26fOSv9YCC2wN4iFDcJHs70YFNgrA==}
     peerDependencies:
       vue: ^3.2.0
     dependencies:
       '@ctrl/tinycolor': 3.4.1
-      '@element-plus/icons-vue': 2.0.6_vue@3.2.37
+      '@element-plus/icons-vue': 2.0.9_vue@3.2.37
       '@floating-ui/dom': 0.5.4
       '@popperjs/core': /@sxzz/popperjs-es/2.11.7
       '@types/lodash': 4.14.182
@@ -11033,6 +11041,7 @@ packages:
       - rollup
       - vite
       - webpack
+    dev: false
 
   /unplugin/0.6.3:
     resolution: {integrity: sha512-CoW88FQfCW/yabVc4bLrjikN9HC8dEvMU4O7B6K2jsYMPK0l6iAnd9dpJwqGcmXJKRCU9vwSsy653qg+RK0G6A==}