diff --git a/README.md b/README.md
index bbc8da20..e5d94723 100644
--- a/README.md
+++ b/README.md
@@ -100,6 +100,7 @@ import '@wocwin/t-ui-plus/lib/style.css'
 | TCheckbox       | [多选组件](https://wocwin.github.io/t-ui-plus/components/TCheckbox/base.html?_blank)                                                                       |
 | TChart          | [图表组件](https://wocwin.github.io/t-ui-plus/components/TChart/base.html?_blank)                                                                          |
 | TTabs           | [标签页组件](https://wocwin.github.io/t-ui-plus/components/TTabs/base.html?_blank)                                                                         |
+| TSelectIcon     | [图标选择组件](https://wocwin.github.io/t-ui-plus/components/TSelectIcon/base.html?_blank)                                                                 |
 
 
 ## Use CDN in Project(暂不支持)
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 8dcd4beb..9e77bdc0 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -48,7 +48,8 @@ export default defineConfig({
             { text: "多选框组组件", link: "/components/TCheckbox/base.md" },
             { text: "日期组件", link: "/components/TDatePicker/base.md" },
             { text: "Tabs组件", link: "/components/TTabs/base.md" },
-            { text: "步骤组件", link: "/components/TStepWizard/base.md" }
+            { text: "步骤组件", link: "/components/TStepWizard/base.md" },
+            { text: "图标选择组件", link: "/components/TSelectIcon/base.md" },
           ]
         },
         {
diff --git a/docs/components/TForm/base.md b/docs/components/TForm/base.md
index 070e4385..341263d0 100644
--- a/docs/components/TForm/base.md
+++ b/docs/components/TForm/base.md
@@ -94,44 +94,44 @@ TForm/isHideItem
 
 ### 2. 配置参数
 
-| 参数                | 说明                                                                                                             | 类型              | 默认值 |
-| :------------------ | :--------------------------------------------------------------------------------------------------------------- | :---------------- | :----- |
-| className           | 自定义类名                                                                                                       | String            | -      |
-| labelPosition       | 改变表单项 label 与输入框的布局方式(`right,left,top`)                                                            | String            | ''     |
-| widthSize           | 每行显示几个输入项（默认两项） 最大值 6                                                                          | Number            | 2      |
-| isTrim              | 全局是否开启清除前后空格(comp 为 el-input 且 type 不等于'password')                                              | Boolean           | true   |
-| formOpts            | 表单配置项                                                                                                       | Object            | -      |
-| ---ref              | 当前TForm实例                                                                                                    | Object            | -      |
-| ---labelPosition    | 改变表单项 label 与输入框的布局方式(默认：right) /top （优先展示组件`labelPosition`）                            | String            | right  |
-| ---listTypeInfo     | 下拉选择数据源（type:'select'有效）                                                                              | Object            | -      |
-| ---fieldList        | form 表单每项 list                                                                                               | Array             | -      |
-| ------isHideItem    | 某一项不显示                                                                                                     | Boolean           | false  |
-| ------slotName      | 自定义表单某一项输入框                                                                                           | slot              | -      |
-| ------childSlotName | 自定义表单某一下拉选择项子组件插槽（el-option）                                                                  | slot              | -      |
-| ------comp          | 表单每一项组件名称（可使用第三方 UI 如 el-select/el-input 也可以使用自定义组件）                                 | String/components | -      |
-| ------bind          | 继承第三方 UI 的 Attributes,function 传出 formData                                                               | Object/funnction  | -      |
-| ------isSelfCom     | 是否使用自己封装的组件（即不需要嵌套 el-option 等）                                                              | Boolean           | false  |
-| ------isTrim        | 是否不清除前后空格(comp 为 el-input 且 type 不等于'password')                                                    | Boolean           | false  |
-| ------type          | 某一项类型(目前只有checkbox/radio/select-arr/select-obj)此值只有组件内嵌组件才设置（如：el-select内嵌el-option） | String            | -      |
-| ------widthSize     | form 表单某一项所占比例(如果占一整行则设置 1)                                                                    | Number            | -      |
-| ------width         | form 表单某一项所占实际宽度                                                                                      | String            | -      |
-| ------arrLabel      | type=select-arr 时，每个下拉显示的中文                                                                           | String            | label  |
-| ------arrKey        | type=select-arr 时，每个下拉显示的中文传后台的数字                                                               | String            | key    |
-| ------label         | form 表单每一项 title                                                                                            | String            | -      |
-| ------labelRender   | 自定义某一项 title                                                                                               | function          | -      |
-| ------labelSlotName | 自定义某一项 title（插槽名：就是 labelSlotName 值                                                                | slot              | -      |
-| ------value         | form 表单每一项传给后台的参数                                                                                    | String            | -      |
-| ------rules         | 每一项输入框的表单校验规则（可参考 element-plus el-form-item方式配置）                                           | Object/Array      | -      |
-| ------list          | 下拉选择数据源（仅仅对 type:'select'有效）                                                                       | String            | -      |
-| ------event         | 表单每一项事件标志（即是：handleEvent 事件第一个参数值）                                                         | String            | -      |
-| ------eventHandle   | 继承 comp 组件的事件                                                                                             | Object            | -      |
-| ------ref           | 当前使用组件的 ref 标识（可以通过 getRefs 事件返回）                                                             | String            | -      |
-| ---formData         | 表单提交数据(对应 fieldList 每一项的 value 值)                                                                   | Object            | -      |
-| ---labelWidth       | label 宽度                                                                                                       | String            | 120px  |
-| ---rules            | 校验规则（可参考 element-plus el-form 方式配置）                                                                 | Object/Array      | -      |
-| ---operatorList     | 操作按钮 list                                                                                                    | Array             | -      |
-| -------bind         | 继承 el-button 所有 Attributes(默认值{ type:'primary',size:'small',})                                            | Object            | -      |
-| -------fun          | 事件名                                                                                                           | function          | -      |
+| 参数                | 说明                                                                                                                         | 类型              | 默认值 |
+| :------------------ | :--------------------------------------------------------------------------------------------------------------------------- | :---------------- | :----- |
+| className           | 自定义类名                                                                                                                   | String            | -      |
+| labelPosition       | 改变表单项 label 与输入框的布局方式(`right,left,top`)                                                                        | String            | ''     |
+| widthSize           | 每行显示几个输入项（默认两项） 最大值 6                                                                                      | Number            | 2      |
+| isTrim              | 全局是否开启清除前后空格(comp 为 el-input 且 type 不等于'password')                                                          | Boolean           | true   |
+| formOpts            | 表单配置项                                                                                                                   | Object            | -      |
+| ---ref              | 当前TForm实例                                                                                                                | Object            | -      |
+| ---labelPosition    | 改变表单项 label 与输入框的布局方式(默认：right) /top （优先展示组件`labelPosition`）                                        | String            | right  |
+| ---listTypeInfo     | 下拉选择数据源（type:'select'有效）                                                                                          | Object            | -      |
+| ---fieldList        | form 表单每项 list                                                                                                           | Array             | -      |
+| ------isHideItem    | 某一项不显示                                                                                                                 | Boolean           | false  |
+| ------slotName      | 自定义表单某一项输入框                                                                                                       | slot              | -      |
+| ------childSlotName | 自定义表单某一下拉选择项子组件插槽（el-option）                                                                              | slot              | -      |
+| ------comp          | 表单每一项组件名称（可使用第三方 UI 如 el-select/el-input 也可以使用自定义组件）                                             | String/components | -      |
+| ------bind          | 继承第三方 UI 的 Attributes,function 传出 formData                                                                           | Object/funnction  | -      |
+| ------isSelfCom     | 是否使用自己封装的组件（即不需要嵌套 el-option 等）                                                                          | Boolean           | false  |
+| ------isTrim        | 是否不清除前后空格(comp 为 el-input 且 type 不等于'password')                                                                | Boolean           | false  |
+| ------type          | 某一项类型(目前只有checkbox/radio/select-arr/select-obj/inputNumber)此值只有组件内嵌组件才设置（如：el-select内嵌el-option） | String            | -      |
+| ------widthSize     | form 表单某一项所占比例(如果占一整行则设置 1)                                                                                | Number            | -      |
+| ------width         | form 表单某一项所占实际宽度                                                                                                  | String            | -      |
+| ------arrLabel      | type=select-arr 时，每个下拉显示的中文                                                                                       | String            | label  |
+| ------arrKey        | type=select-arr 时，每个下拉显示的中文传后台的数字                                                                           | String            | key    |
+| ------label         | form 表单每一项 title                                                                                                        | String            | -      |
+| ------labelRender   | 自定义某一项 title                                                                                                           | function          | -      |
+| ------labelSlotName | 自定义某一项 title（插槽名：就是 labelSlotName 值                                                                            | slot              | -      |
+| ------value         | form 表单每一项传给后台的参数                                                                                                | String            | -      |
+| ------rules         | 每一项输入框的表单校验规则（可参考 element-plus el-form-item方式配置）                                                       | Object/Array      | -      |
+| ------list          | 下拉选择数据源（仅仅对 type:'select'有效）                                                                                   | String            | -      |
+| ------event         | 表单每一项事件标志（即是：handleEvent 事件第一个参数值）                                                                     | String            | -      |
+| ------eventHandle   | 继承 comp 组件的事件                                                                                                         | Object            | -      |
+| ------ref           | 当前使用组件的 ref 标识（可以通过 getRefs 事件返回）                                                                         | String            | -      |
+| ---formData         | 表单提交数据(对应 fieldList 每一项的 value 值)                                                                               | Object            | -      |
+| ---labelWidth       | label 宽度                                                                                                                   | String            | 120px  |
+| ---rules            | 校验规则（可参考 element-plus el-form 方式配置）                                                                             | Object/Array      | -      |
+| ---operatorList     | 操作按钮 list                                                                                                                | Array             | -      |
+| -------bind         | 继承 el-button 所有 Attributes(默认值{ type:'primary',size:'small',})                                                        | Object            | -      |
+| -------fun          | 事件名                                                                                                                       | function          | -      |
 
 ### 3. events 继承 element-plus el-form 的 events
 
diff --git a/docs/components/TSelectIcon/base.md b/docs/components/TSelectIcon/base.md
new file mode 100644
index 00000000..c3244069
--- /dev/null
+++ b/docs/components/TSelectIcon/base.md
@@ -0,0 +1,51 @@
+# TSelectIcon elemnt-plus图标选择组件
+
+### 基本使用
+
+:::demo
+TSelectIcon/base
+:::
+
+### 是否显示弹窗搜索框
+
+:::demo
+TSelectIcon/isShowSearch
+:::
+
+### 是否显示选中后的图标
+
+:::demo
+TSelectIcon/isShowIcon
+:::
+
+### selectBind属性配置
+
+:::demo
+TSelectIcon/selectBind
+:::
+
+### TSelectIcon Attributes
+
+---
+
+### 1、代码示例
+
+```html
+<t-select-icon v-model="selectVlaue" />
+```
+
+### 2、配置参数（Attributes）继承 el-input Attributes
+
+| 参数         | 说明                 | 类型       | 默认值                                                                                                             |
+| :----------- | :------------------- | :--------- | :----------------------------------------------------------------------------------------------------------------- |
+| v-model      | 绑定值               | string     | -                                                                                                                  |
+| prefixIcon   | 输入框前缀icon       | string     | Search                                                                                                             |
+| isShowSearch | 是否显示搜索图标     | Boolean    | true                                                                                                               |
+| isShowIcon   | 是否显示选中后的图标 | Boolean    | true                                                                                                               |
+| selectBind   | Attributes           | selectBind | `"prefix-icon": props.prefixIcon, placeholder: "请选择图标",dialogTitle:'请选择图标',clearable: true,width: "50%"` |
+
+### 3、事件（events）继承 el-input 属事件
+
+| 事件名 | 说明       | 回调参数           |
+| :----- | :--------- | :----------------- |
+| select | 选择完图标 | 返回选中的图标name |
diff --git a/docs/components/index.md b/docs/components/index.md
index 11a5230a..b0d9d0f0 100644
--- a/docs/components/index.md
+++ b/docs/components/index.md
@@ -74,6 +74,7 @@ import '@wocwin/t-ui-plus/lib/style.css'
 | TCheckbox       | [多选组件](https://wocwin.github.io/t-ui-plus/components/TCheckbox/base.html?_blank)                                                                       |
 | TChart          | [图表组件](https://wocwin.github.io/t-ui-plus/components/TChart/base.html?_blank)                                                                          |
 | TTabs           | [标签页组件](https://wocwin.github.io/t-ui-plus/components/TTabs/base.html?_blank)                                                                         |
+| TSelectIcon     | [图标选择组件](https://wocwin.github.io/t-ui-plus/components/TSelectIcon/base.html?_blank)                                                                 |
 
 ### T-ui-plus 组件 Volar 类型提示
 
diff --git a/docs/examples/TSelectIcon/base.vue b/docs/examples/TSelectIcon/base.vue
new file mode 100644
index 00000000..9dcf4193
--- /dev/null
+++ b/docs/examples/TSelectIcon/base.vue
@@ -0,0 +1,14 @@
+<template>
+  <t-layout-page>
+    <t-layout-page-item>
+      <t-select-icon v-model="iconValue" @select="changeSelect" />
+    </t-layout-page-item>
+  </t-layout-page>
+</template>
+<script setup lang="ts">
+import { ref } from "vue"
+const iconValue = ref("")
+const changeSelect = (val: string) => {
+  console.log(`选择的值:${val};v-model值：${iconValue.value}`)
+}
+</script>
diff --git a/docs/examples/TSelectIcon/isShowIcon.vue b/docs/examples/TSelectIcon/isShowIcon.vue
new file mode 100644
index 00000000..1e226162
--- /dev/null
+++ b/docs/examples/TSelectIcon/isShowIcon.vue
@@ -0,0 +1,14 @@
+<template>
+  <t-layout-page>
+    <t-layout-page-item>
+      <t-select-icon v-model="iconValue" @select="changeSelect" :isShowIcon="false" />
+    </t-layout-page-item>
+  </t-layout-page>
+</template>
+<script setup lang="ts">
+import { ref } from "vue"
+const iconValue = ref("")
+const changeSelect = (val: string) => {
+  console.log(`选择的值:${val};v-model值：${iconValue.value}`)
+}
+</script>
diff --git a/docs/examples/TSelectIcon/isShowSearch.vue b/docs/examples/TSelectIcon/isShowSearch.vue
new file mode 100644
index 00000000..7fe70fa3
--- /dev/null
+++ b/docs/examples/TSelectIcon/isShowSearch.vue
@@ -0,0 +1,14 @@
+<template>
+  <t-layout-page>
+    <t-layout-page-item>
+      <t-select-icon v-model="iconValue" @select="changeSelect" :isShowSearch="false" />
+    </t-layout-page-item>
+  </t-layout-page>
+</template>
+<script setup lang="ts">
+import { ref } from "vue"
+const iconValue = ref("")
+const changeSelect = (val: string) => {
+  console.log(`选择的值:${val};v-model值：${iconValue.value}`)
+}
+</script>
diff --git a/docs/examples/TSelectIcon/selectBind.vue b/docs/examples/TSelectIcon/selectBind.vue
new file mode 100644
index 00000000..9527be3b
--- /dev/null
+++ b/docs/examples/TSelectIcon/selectBind.vue
@@ -0,0 +1,22 @@
+<template>
+  <t-layout-page>
+    <t-layout-page-item>
+      <t-select-icon v-model="iconValue" @select="changeSelect" :selectBind="selectBind" />
+    </t-layout-page-item>
+  </t-layout-page>
+</template>
+<script setup lang="ts">
+import { ref } from "vue"
+const iconValue = ref("")
+const selectBind = ref({
+  "prefix-icon": "Warning",
+  placeholder: "自定义搜索框提示语", // 搜索框提示语
+  dialogTitle: "自定义弹窗标题", // 弹窗标题
+  searchPlaceholder: "搜索框提示语", // 搜索框提示语
+  emptyDescription: "搜索为空提示语", // 搜索为空提示语
+  width: "40%" // 弹窗宽度
+})
+const changeSelect = (val: string) => {
+  console.log(`选择的值:${val};v-model值：${iconValue.value}`)
+}
+</script>
diff --git a/packages/index.ts b/packages/index.ts
index 0c29545e..380d7a74 100644
--- a/packages/index.ts
+++ b/packages/index.ts
@@ -21,6 +21,7 @@ import TRadio from "./radio"
 import TCheckbox from "./checkbox"
 import TChart from "./chart"
 import TTabs from "./tabs"
+import TSelectIcon from "./select-icon"
 
 // 存储组件列表
 const components: {
@@ -43,7 +44,8 @@ const components: {
   TRadio,
   TCheckbox,
   TChart,
-  TTabs
+  TTabs,
+  TSelectIcon
 }
 // 插件声明：声明所有插件
 // 插件注册：在 Vue 项目的入口文件中，通过 ( app.use(插件) ) 进行注册
@@ -91,7 +93,8 @@ export {
   TRadio,
   TCheckbox,
   TChart,
-  TTabs
+  TTabs,
+  TSelectIcon
 }
 /**
  * @description 公共方法
diff --git a/packages/select-icon/index.ts b/packages/select-icon/index.ts
new file mode 100644
index 00000000..a7d2b5e9
--- /dev/null
+++ b/packages/select-icon/index.ts
@@ -0,0 +1,5 @@
+import SelectIcon from "./src/index.vue"
+import { withInstall } from "../withInstall"
+
+const TSelectIcon = withInstall(SelectIcon)
+export default TSelectIcon
diff --git a/packages/select-icon/src/index.vue b/packages/select-icon/src/index.vue
new file mode 100644
index 00000000..c0cda98f
--- /dev/null
+++ b/packages/select-icon/src/index.vue
@@ -0,0 +1,176 @@
+<template>
+  <div class="t_select_icon">
+    <el-input
+      ref="inputRef"
+      v-model="valueIcon"
+      v-bind="attrs"
+      @clear="clearIcon"
+      @click="
+        () => {
+          ;(dialogVisible = true), (inputValue = '')
+        }
+      "
+    >
+      <template #append v-if="isShowIcon">
+        <el-button :icon="customIcons[modelValue]" />
+      </template>
+    </el-input>
+    <el-dialog v-model="dialogVisible" :title="attrs.dialogTitle" draggable :width="attrs.width">
+      <el-input
+        v-model="inputValue"
+        v-if="isShowSearch"
+        :placeholder="attrs.searchPlaceholder"
+        clearable
+        :prefix-icon="Icons.Search"
+      />
+      <el-scrollbar v-if="Object.keys(iconsList).length">
+        <div class="icon-list">
+          <div
+            v-for="item in iconsList"
+            :key="item"
+            class="icon-item"
+            :class="{ 'icon-active': item.name == valueIcon }"
+            @click="selectIcon(item)"
+          >
+            <component :is="item"></component>
+            <span>{{ item.name }}</span>
+          </div>
+        </div>
+      </el-scrollbar>
+      <el-empty :description="attrs.emptyDescription" v-else />
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts" name="TSelectIcon">
+import { ref, computed, useAttrs } from "vue"
+import * as Icons from "@element-plus/icons-vue"
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: ""
+  },
+  prefixIcon: {
+    type: String,
+    default: "Search"
+  },
+  selectBind: Object,
+  isShowSearch: {
+    type: Boolean,
+    default: true
+  },
+  isShowIcon: {
+    type: Boolean,
+    default: true
+  }
+})
+const emit = defineEmits(["update:modelValue", "select"])
+// v-model简写
+let valueIcon = computed({
+  get() {
+    return props.modelValue
+  },
+  set(val) {
+    // console.log("v-model简写", val);
+    emit("update:modelValue", val)
+  }
+})
+const $attrs: any = useAttrs()
+const attrs = computed(() => {
+  const selectBind = {
+    "prefix-icon": Icons[props.prefixIcon],
+    placeholder: "请选择图标",
+    dialogTitle: "请选择图标",
+    searchPlaceholder: "搜索图标",
+    emptyDescription: "未搜索到您要找的图标",
+    clearable: true,
+    width: "50%",
+    ...props.selectBind
+  }
+  return { ...$attrs, ...selectBind }
+})
+// open Dialog
+const dialogVisible = ref(false)
+
+// 选择图标
+const selectIcon = (item: any) => {
+  dialogVisible.value = false
+  valueIcon.value = item.name
+  emit("update:modelValue", item.name)
+  emit("select", item.name)
+}
+
+// 清空图标
+const inputRef = ref()
+const clearIcon = () => {
+  valueIcon.value = ""
+  emit("update:modelValue", "")
+  setTimeout(() => inputRef.value.blur(), 0)
+}
+
+// 监听搜索框值
+const inputValue = ref("")
+const customIcons: { [key: string]: any } = Icons
+const iconsList = computed((): { [key: string]: any } => {
+  if (!inputValue.value) return Icons
+  let result: { [key: string]: any } = {}
+  for (const key in customIcons) {
+    if (key.toLowerCase().indexOf(inputValue.value.toLowerCase()) > -1)
+      result[key] = customIcons[key]
+  }
+  return result
+})
+</script>
+
+<style scoped lang="scss">
+.t_select_icon {
+  width: 100%;
+  .el-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    color: var(--el-text-color-regular);
+    :deep(.el-icon) {
+      color: var(--el-color-primary);
+    }
+  }
+  :deep(.el-dialog__body) {
+    padding: 25px 20px 20px;
+    .el-input {
+      margin-bottom: 10px;
+    }
+    .icon-list {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, 115px);
+      justify-content: space-evenly;
+      max-height: 60vh;
+      .icon-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 42px;
+        padding: 20px 30px;
+        cursor: pointer;
+        transition: all 0.2s;
+        svg {
+          width: 30px;
+          height: 30px;
+        }
+        &:hover {
+          transform: scale(1.3);
+        }
+        &.icon-active {
+          color: var(--el-color-primary);
+        }
+        span {
+          margin-top: 5px;
+          line-height: 20px;
+          text-align: center;
+        }
+      }
+    }
+  }
+}
+</style>