diff --git a/docs/src/document/zh-CN/components/iconPicker.md b/docs/src/document/zh-CN/components/iconPicker.md
index e5e80a164327d964ac93a7ab75961c348bbae6db..b7c6991353c87edfab6c700b189b421453834537 100644
--- a/docs/src/document/zh-CN/components/iconPicker.md
+++ b/docs/src/document/zh-CN/components/iconPicker.md
@@ -10,7 +10,7 @@
 ::: title 基础使用
 :::
 
-::: demo 使用 lay-icon-picker 标签, 创建图标选择器
+::: demo 使用 `lay-icon-picker` 标签, 创建图标选择器
 
 <template>
   <lay-icon-picker v-model="icon"></lay-icon-picker>
@@ -36,10 +36,10 @@ export default {
 ::: title 禁用选择
 :::
 
-::: demo 使用 lay-icon-picker 标签, 创建图标选择器
+::: demo 使用 `disabled` 属性, 禁用图标选择器
 
 <template>
-  <lay-icon-picker v-model="icon" :disabled="true"></lay-icon-picker>
+  <lay-icon-picker v-model="icon" disabled></lay-icon-picker>
 </template>
 
 <script>
@@ -62,7 +62,7 @@ export default {
 ::: title 选择清空
 :::
 
-::: demo 使用 lay-icon-picker 标签, 创建图标选择器
+::: demo 可以传入 `allow-clear` 属性来开启选择清空功能
 
 <template>
   <lay-icon-picker v-model="icon" :allow-clear="true"></lay-icon-picker>
@@ -114,10 +114,10 @@ export default {
 ::: title 开启搜索
 :::
 
-::: demo 通过 showSearch 开启图标列表的搜索功能
+::: demo 通过 `show-search` 开启图标列表的搜索功能
 
 <template>
-  <lay-icon-picker v-model="icon" page showSearch></lay-icon-picker>
+  <lay-icon-picker v-model="icon" page show-search></lay-icon-picker>
 </template>
 
 <script>
@@ -137,24 +137,204 @@ export default {
 
 :::
 
-::: title icon-picker 属性
+::: title 自定义图标集
+:::
+
+::: demo 通过 `icon-sets` 属性传入注册自定义图标集，传入 `show-icon-sets` 可以展示图标集选择器，传入 `current-icon-set` 可以设置默认图标集（只有注册的图标集才可指定默认图标集）
+
+<template>
+  <lay-space direction="vertical">
+    <lay-space>
+      <lay-checkbox v-model="showIconSets">展示图标集</lay-checkbox>
+      <lay-checkbox v-model="allowSearch">允许搜索</lay-checkbox>
+      <lay-checkbox v-model="enablePage">开启分页</lay-checkbox>
+      <lay-select v-model="currentIconSet">
+        <lay-select-option value="layui">Layui</lay-select-option>
+        <lay-select-option value="bs">Bootstrap Icons</lay-select-option>
+      </lay-select>
+    </lay-space>
+    <lay-icon-picker
+      v-model="icon10"
+      type="layui-icon-face-smile"
+      :icon-sets="iconSet"
+      :show-search="allowSearch"
+      :page="enablePage"
+      :show-icon-sets="showIconSets"
+      :current-icon-set="currentIconSet"
+    ></lay-icon-picker>
+  </lay-space>
+</template>
+
+<style>
+@import url("https://unpkg.com/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
+</style>
+
+<script>
+import { ref } from "vue";
+
+export default {
+  setup() {
+    const showIconSets = ref(true);
+    const icon10 = ref("bi-0-circle");
+    const currentIconSet = ref("bs");
+    const allowSearch = ref(true);
+    const enablePage = ref(true);
+    const iconSet = ref([
+      "layui",
+      {
+        name: "bs",
+        title: "Bootstrap Icons",
+        prefix: "bi",
+        icons: [
+          {
+            name: "圆圈 0",
+            class: "bi-0-circle",
+          },
+          {
+            name: "圆圈 1",
+            class: "bi-1-circle",
+          },
+          {
+            name: "圆圈 2",
+            class: "bi-2-circle",
+          },
+          {
+            name: "圆圈 3",
+            class: "bi-3-circle",
+          },
+          {
+            name: "圆圈 4",
+            class: "bi-4-circle",
+          },
+          {
+            name: "圆圈 5",
+            class: "bi-5-circle",
+          },
+          {
+            name: "圆圈 6",
+            class: "bi-6-circle",
+          },
+          {
+            name: "圆圈 7",
+            class: "bi-7-circle",
+          },
+          {
+            name: "圆圈 8",
+            class: "bi-8-circle",
+          },
+          {
+            name: "圆圈 9",
+            class: "bi-9-circle",
+          },
+          {
+            name: "苹果",
+            class: "bi-apple",
+          },
+          {
+            name: "安卓",
+            class: "bi-android",
+          },
+          {
+            name: "圆圈 0",
+            class: "bi-0-circle-fill",
+          },
+          {
+            name: "圆圈 1",
+            class: "bi-1-circle-fill",
+          },
+          {
+            name: "圆圈 2",
+            class: "bi-2-circle-fill",
+          },
+          {
+            name: "圆圈 3",
+            class: "bi-3-circle-fill",
+          },
+          {
+            name: "圆圈 4",
+            class: "bi-4-circle-fill",
+          },
+          {
+            name: "圆圈 5",
+            class: "bi-5-circle-fill",
+          },
+          {
+            name: "圆圈 6",
+            class: "bi-6-circle-fill",
+          },
+          {
+            name: "圆圈 7",
+            class: "bi-7-circle-fill",
+          },
+          {
+            name: "圆圈 8",
+            class: "bi-8-circle-fill",
+          },
+          {
+            name: "圆圈 9",
+            class: "bi-9-circle-fill",
+          },
+        ],
+      },
+    ]);
+
+    return {
+      icon10,
+      iconSet,
+      showIconSets,
+      currentIconSet,
+      allowSearch,
+      enablePage,
+    };
+  },
+};
+</script>
+
+:::
+
+::: quote 目前内置了 Layui 图标集
+未指定 `iconSet` 时，默认使用 Layui 图标集
+:::
+
+::: title Property 属性
 :::
 
 ::: table
 
-| 属性           |  说明        |  类型   | 默认值  | 版本  |
-| ---------- | -------- | --- |--- |--- |
-| v-model    | 默认值   | --  |--  |--  |
-| page       | 开启分页 | --  |--  |--  |
-| size      | 尺寸大小  | `string`    | `lg` `md` `sm` `xs`   |`md`     |  |
-| show-search | 启用搜索 | --  |--  |--  |
-| disabled | 禁用 | `boolean`  |--  |--  |
-| allow-clear | 允许清空 | `boolean`  |--  |--  |
-| content-style             | 内容自定义样式     | `StyleValue` | -- | -- |
-| content-class             | 内容自定义Class    | `string` `Array<string \| object>` `object` | -- | -- |
-| teleport-props        | 继承至 dropdown 组件，下拉面板 `传递` 属性         | `object`         | `{to: 'body', disabled: false}` |  `2.19.0` |
+| 属性             | 说明                                       | 类型                                        | 默认值                          | 可选值 | 版本     |
+| ---------------- | ------------------------------------------ | ------------------------------------------- | ------------------------------- | ------ | -------- |
+| v-model          | 默认值                                     | --                                          | --                              | --     |          |
+| page             | 开启分页                                   | `boolean`                                   | --                              | --     |          |
+| size             | 尺寸                                       | `"lg"` `"md"` `"sm"` `"xs"`                 | --                              | --     |          |
+| show-search      | 启用搜索                                   | `boolean`                                   | --                              | --     |          |
+| disabled         | 禁用                                       | `boolean`                                   | --                              | --     |          |
+| allow-clear      | 允许清空                                   | `boolean`                                   | --                              | --     |          |
+| content-style    | 内容自定义样式                             | `StyleValue`                                | --                              | --     |          |
+| content-class    | 内容自定义 Class                           | `string` `Array<string \| object>` `object` | --                              | --     |          |
+| teleport-props   | 继承至 dropdown 组件，下拉面板 `传递` 属性 | `object`                                    | `{to: 'body', disabled: false}` | --     | `2.19.0` |
+| icon-sets        | 图标集                                     | `Array<string \| IconSets>`                 | `["layui"]`                     | --     | `2.19.1` |
+| show-icon-sets   | 显示图标集切换器                           | `boolean`                                   | `false`                         | --     | `2.19.1` |
+| current-icon-set | 当前图标集                                 | `string`                                    | `"layui"`                       | --     | `2.19.1` |
 
 :::
 
+::: title Types
+:::
+
+```typescript
+export interface IconProp {
+  name: string;
+  class: string;
+  prefix?: string;
+}
+
+export interface IconSets {
+  name: string;
+  title?: string;
+  prefix?: string;
+  icons: IconProp[];
+}
+```
+
 ::: previousNext iconPicker
 :::
diff --git a/packages/component/component/iconPicker/index.vue b/packages/component/component/iconPicker/index.vue
index f694e53fba61d75fe6cb5a5f53a007aed52afdcc..3669c16978262ca31ba2d57f9aa3addd94a11bea 100644
--- a/packages/component/component/iconPicker/index.vue
+++ b/packages/component/component/iconPicker/index.vue
@@ -1,16 +1,32 @@
 <script setup lang="ts">
 import "./index.less";
 import type { DropdownTeleportProps } from "../dropdown/interface";
-
-import { computed, Ref, ref, StyleValue } from "vue";
+import { computed, h, ref, StyleValue } from "vue";
 import { LayIconList as icons, LayIcon } from "@layui/icons-vue";
 import LayDropdown from "../dropdown/index.vue";
-import LayScroll from "../scroll/index.vue";
-import LayInput from "../input/index.vue";
 import useProps from "./index.hooks";
+import LayRender from "../_components/render";
+import LayTab from "../tab/index";
+import LayTabItem from "../tabItem/index";
+import LayIconPickerWrapper from "./wrapper.vue";
+import { watch } from "vue";
+
+export interface IconProp {
+  name: string;
+  class: string;
+  prefix?: string;
+}
+
+export interface IconSets {
+  name: string;
+  title?: string;
+  prefix?: string;
+  icons: IconProp[];
+}
 
 export interface IconPickerProps {
   modelValue?: string;
+  prefix?: string;
   page?: boolean;
   size?: string;
   showSearch?: boolean;
@@ -18,6 +34,21 @@ export interface IconPickerProps {
   allowClear?: boolean;
   contentClass?: string | Array<string | object> | object;
   contentStyle?: StyleValue;
+  /**
+   * 图标集
+   * @version 2.19.1
+   */
+  iconSets?: Array<string | IconSets>;
+  /**
+   * 当前图标集
+   * @version 2.19.1
+   */
+  currentIconSet?: string;
+  /**
+   * 是否显示图标集
+   * @version 2.19.1
+   */
+  showIconSets?: boolean;
   teleportProps?: DropdownTeleportProps;
 }
 
@@ -29,18 +60,47 @@ const props = withDefaults(defineProps<IconPickerProps>(), {
   modelValue: "layui-icon-face-smile",
   disabled: false,
   page: false,
+  iconSets: () => ["layui"],
 });
 
-const { size } = useProps(props);
+const _iconSets = new Map<string, IconSets>();
+props.iconSets?.forEach((element) => {
+  if (typeof element === "string") {
+    // 注册内建图标
+    switch (element) {
+      case "layui":
+        _iconSets.set("layui", {
+          name: "layui",
+          title: "Layui",
+          icons,
+        });
+        break;
+
+      default:
+        break;
+    }
+  } else {
+    // 注册自定义图标
+    _iconSets.set(element.name, element);
+  }
+});
 
+const _currentIconSet = computed(() => props.currentIconSet);
+const { size } = useProps(props);
 const emit = defineEmits(["update:modelValue", "change"]);
 const selectedIcon = computed(() => props.modelValue);
 const dropdownRef = ref<any>(null);
 const openState = ref<boolean>(false);
+const _tabIndex = ref(_currentIconSet.value ?? _iconSets.keys().next().value);
 
-const selectIcon = function (icon: string): void {
-  emit("update:modelValue", icon);
-  emit("change", icon);
+watch(
+  () => _currentIconSet.value,
+  (val) => _iconSets.has(val ?? "") && (_tabIndex.value = val)
+);
+
+const selectIcon = function (icon: string, prefix: string): void {
+  emit("update:modelValue", icon, prefix);
+  emit("change", icon, prefix);
   dropdownRef.value?.hide();
 };
 
@@ -48,107 +108,48 @@ const onClear = function (): void {
   emit("update:modelValue", "");
 };
 
-const hasContent = computed(() => {
-  return props.modelValue != null && props.modelValue != "";
-});
-
-const icones: Ref = ref([]);
-const total: Ref<number> = ref(icons.length);
-const totalPage: Ref<number> = ref(Math.ceil(total.value / 12));
-const currentPage: Ref<number> = ref(1);
-
-if (props.page) {
-  icones.value = icons.slice(0, 12);
-} else {
-  icones.value = icons;
-}
-
-const next = () => {
-  if (currentPage.value === totalPage.value) {
-    return;
-  }
-  currentPage.value = currentPage.value + 1;
-  const start = (currentPage.value - 1) * 12;
-  const end = start + 12;
-  icones.value = icons.slice(start, end);
-};
-
-const prev = () => {
-  if (currentPage.value === 1) {
-    return;
-  }
-  currentPage.value = currentPage.value - 1;
-  const start = (currentPage.value - 1) * 12;
-  const end = start + 12;
-  icones.value = icons.slice(start, end);
+const hasContent = computed(
+  () => props.modelValue != null && props.modelValue != ""
+);
+
+const IconPickerFactory = (icons: IconSets) => {
+  return h(LayIconPickerWrapper, {
+    icones: icons.icons,
+    prefix: icons.prefix,
+    selectedIcon: selectedIcon.value,
+    showSearch: props.showSearch,
+    page: props.page,
+    onSelectIcon: selectIcon,
+  });
 };
 
-const clear = () => {
-  const start = (currentPage.value - 1) * 12;
-  const end = start + 12;
-  if (props.page) {
-    icones.value = icons.slice(start, end);
-    total.value = icons.length;
-    totalPage.value = Math.ceil(icons.length / 12);
+const renderWrapper = () => {
+  let wrapper;
+  if (!props.showIconSets) {
+    wrapper = IconPickerFactory(
+      _iconSets.get(props.currentIconSet ?? "layui")!
+    );
   } else {
-    icones.value = icons;
+    wrapper = h(
+      LayTab,
+      {
+        type: "brief",
+        modelValue: _tabIndex.value ?? "layui",
+        "onUpdate:modelValue": (index) => (_tabIndex.value = index),
+        tabPosition: "left",
+      },
+      () =>
+        Array.from(_iconSets.entries()).map(([k, s]) => {
+          return h(
+            LayTabItem,
+            { id: k, title: s.title ?? s.name },
+            { default: () => IconPickerFactory(s) }
+          );
+        })
+    );
   }
-};
 
-const search = (e: any) => {
-  currentPage.value = 1;
-  const start = (currentPage.value - 1) * 12;
-  const end = start + 12;
-  const text = e;
-  if (text) {
-    if (props.page) {
-      icones.value = searchList(text, icons).slice(start, end);
-      total.value = searchList(text, icons).length;
-      totalPage.value = Math.ceil(searchList(text, icons).length / 12);
-    } else {
-      icones.value = searchList(text, icons);
-    }
-  } else {
-    if (props.page) {
-      icones.value = icons.slice(start, end);
-      total.value = icons.length;
-      totalPage.value = Math.ceil(icons.length / 12);
-    } else {
-      icones.value = icons;
-    }
-  }
-};
-
-const searchList = (str: string, container: any) => {
-  var newList = [];
-  var startChar = str.charAt(0);
-  var strLen = str.length;
-  for (var i = 0; i < container.length; i++) {
-    var obj = container[i];
-    var isMatch = false;
-    for (var p in obj) {
-      if (typeof obj[p] == "function") {
-        obj[p]();
-      } else {
-        var curItem = "";
-        if (obj[p] != null) {
-          curItem = obj[p];
-        }
-        for (var j = 0; j < curItem.length; j++) {
-          if (curItem.charAt(j) == startChar) {
-            if (curItem.substring(j).substring(0, strLen) == str) {
-              isMatch = true;
-              break;
-            }
-          }
-        }
-      }
-    }
-    if (isMatch) {
-      newList.push(obj);
-    }
-  }
-  return newList;
+  return wrapper;
 };
 </script>
 
@@ -187,61 +188,7 @@ const searchList = (str: string, container: any) => {
       ></span>
     </div>
     <template #content>
-      <div class="layui-iconpicker-view layui-iconpicker-scroll">
-        <div v-if="showSearch" class="layui-iconpicker-search">
-          <lay-input
-            @input="search"
-            @clear="clear"
-            autocomplete="true"
-            :allow-clear="true"
-          >
-            <template #prefix>
-              <i class="layui-icon layui-icon-search"></i>
-            </template>
-          </lay-input>
-        </div>
-        <div class="layui-iconpicker-list">
-          <lay-scroll style="height: 200px" thumbColor="rgb(238, 238, 238)">
-            <ul>
-              <li
-                v-for="icon in icones"
-                :key="icon"
-                :class="[selectedIcon === icon.class ? 'layui-this' : '']"
-                @click="selectIcon(icon.class)"
-              >
-                <i class="layui-icon" :class="[icon.class]"></i>
-                <p class="layui-elip">
-                  {{ icon.name }}
-                </p>
-              </li>
-            </ul>
-          </lay-scroll>
-        </div>
-        <div v-if="page" class="layui-iconpicker-page">
-          <div id="layui-laypage-1" class="layui-laypage layui-laypage-default">
-            <span class="layui-laypage-count">共 {{ total }} 个</span
-            ><a
-              href="javascript:;"
-              class="layui-laypage-prev"
-              :class="[currentPage === 1 ? 'layui-disabled' : '']"
-              @click="prev()"
-              ><i class="layui-icon layui-icon-left"></i></a
-            ><span class="layui-laypage-curr"
-              ><em class="layui-laypage-em"></em
-              ><em>{{ currentPage }} / {{ totalPage }}</em></span
-            ><span class="layui-laypage-spr">…</span
-            ><a href="javascript:;" class="layui-laypage-last" title="尾页"
-              >14</a
-            ><a
-              href="javascript:;"
-              :class="[currentPage === totalPage ? 'layui-disabled' : '']"
-              class="layui-laypage-next"
-              @click="next()"
-              ><i class="layui-icon layui-icon-right"></i
-            ></a>
-          </div>
-        </div>
-      </div>
+      <lay-render v-if="openState" :render="renderWrapper"></lay-render>
     </template>
   </lay-dropdown>
 </template>
diff --git a/packages/component/component/iconPicker/wrapper.vue b/packages/component/component/iconPicker/wrapper.vue
new file mode 100644
index 0000000000000000000000000000000000000000..03d37c1a406810f05d53bfb6d6afaf0ed8bbbe47
--- /dev/null
+++ b/packages/component/component/iconPicker/wrapper.vue
@@ -0,0 +1,154 @@
+<template>
+  <div class="layui-iconpicker-view layui-iconpicker-scroll">
+    <div v-if="showSearch" class="layui-iconpicker-search">
+      <lay-input
+        @input="search"
+        @clear="clear"
+        autocomplete="true"
+        :allow-clear="true"
+      >
+        <template #prefix>
+          <i class="layui-icon layui-icon-search"></i>
+        </template>
+      </lay-input>
+    </div>
+    <div class="layui-iconpicker-list">
+      <lay-scroll style="height: 200px" thumbColor="rgb(238, 238, 238)">
+        <ul>
+          <li
+            v-for="(icon, k) in _iconList"
+            :key="k"
+            :class="[selectedIcon === icon.class ? 'layui-this' : '']"
+            @click="emit('selectIcon', icon.class, icon.prefix ?? prefix)"
+          >
+            <i
+              class="layui-icon"
+              :class="[icon.prefix ?? prefix, icon.class]"
+            ></i>
+            <p class="layui-elip">
+              {{ icon.name }}
+            </p>
+          </li>
+        </ul>
+      </lay-scroll>
+    </div>
+    <div v-if="page" class="layui-iconpicker-page">
+      <div id="layui-laypage-1" class="layui-laypage layui-laypage-default">
+        <span class="layui-laypage-count"> 共 {{ _total }} 个</span>
+        <a
+          href="javascript:;"
+          class="layui-laypage-prev"
+          :class="[_currentPage === 1 ? 'layui-disabled' : '']"
+          @click="prev()"
+        >
+          <i class="layui-icon layui-icon-left"></i>
+        </a>
+        <span class="layui-laypage-curr">
+          <em class="layui-laypage-em"></em>
+          <em>{{ _currentPage }} / {{ _totalPage }}</em>
+        </span>
+        <span class="layui-laypage-spr">…</span>
+        <a href="javascript:;" class="layui-laypage-last" title="尾页">
+          {{ _totalPage }}
+        </a>
+        <a
+          href="javascript:;"
+          :class="[_currentPage >= _totalPage ? 'layui-disabled' : '']"
+          class="layui-laypage-next"
+          @click="next()"
+        >
+          <i class="layui-icon layui-icon-right"></i>
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, Ref, ref, watch } from "vue";
+import LayScroll from "../scroll/index.vue";
+import LayInput from "../input/index.vue";
+import { IconProp } from "./index.vue";
+
+defineOptions({
+  name: "LayIconPickerWrapper",
+});
+
+const emit = defineEmits(["selectIcon"]);
+const props = withDefaults(
+  defineProps<{
+    showSearch?: boolean;
+    icones: IconProp[];
+    prefix?: string;
+    selectedIcon?: string;
+    page?: boolean;
+    total?: number;
+    currentPage?: number;
+    totalPage?: number;
+  }>(),
+  {}
+);
+
+const _iconSrc = computed(() => props.icones);
+const _iconList: Ref<Array<IconProp>> = ref(_iconSrc.value);
+const _total: Ref<number> = ref(_iconList.value.length);
+const _totalPage: Ref<number> = ref(Math.ceil(_total.value / 12));
+const _currentPage: Ref<number> = ref(1);
+
+const pager = (page: number) => {
+  if (page < 1 || page > _totalPage.value) return;
+  const start = (page - 1) * 12;
+  const end = start + 12;
+  _iconList.value = _iconSrc.value.slice(start, end);
+};
+
+watch(
+  () => _currentPage.value,
+  (newVal) => pager(newVal)
+);
+
+const next = () => {
+  if (_currentPage.value >= _totalPage.value) return;
+  _currentPage.value = _currentPage.value + 1;
+};
+
+const prev = () => {
+  if (_currentPage.value === 1) return;
+  _currentPage.value = _currentPage.value - 1;
+};
+
+const search = (text: string) => {
+  _currentPage.value = 1;
+  const result = searchList(text);
+  _total.value = result.length;
+  if (props.page) {
+    _iconList.value = result.slice(0, 12);
+    _totalPage.value = Math.ceil(result.length / 12);
+  } else {
+    _iconList.value = result;
+    _totalPage.value = result.length;
+  }
+};
+
+const searchList = (str: string) => {
+  if (!str) return _iconSrc.value;
+  const reg = new RegExp(str, "g");
+  return _iconSrc.value.filter(
+    (a) => a.class.match(reg)?.length || a.name.match(reg)?.length
+  );
+};
+
+const clear = () => search("");
+
+if (props.page) {
+  pager(1);
+
+  const _iconCurPos = _iconSrc.value.findIndex(
+    (a) => a.class === props.selectedIcon
+  );
+
+  props.selectedIcon &&
+    (_currentPage.value =
+      Math.ceil(_iconCurPos / 12) + (_iconCurPos % 12 ? 0 : 1) || 1);
+}
+</script>
diff --git a/packages/icons/src/iconfont/iconfont.ts b/packages/icons/src/iconfont/iconfont.ts
index 234432be7386ea1e04b0f58a129297d6b9e19eb5..f9e7c9235b44730c7f63378c30121b5e19cf9092 100644
--- a/packages/icons/src/iconfont/iconfont.ts
+++ b/packages/icons/src/iconfont/iconfont.ts
@@ -1,4 +1,4 @@
-export default [
+const LayuiIconList = [
   { name: "实心", class: "layui-icon-heart-fill" },
   { name: "空心", class: "layui-icon-heart" },
   { name: "亮度/晴", class: "layui-icon-light" },
@@ -187,3 +187,5 @@ export default [
   { name: "闭眼", class: "layui-icon-eye-invisible" },
   { name: "眼睛", class: "layui-icon-eye" },
 ];
+
+export default LayuiIconList;