diff --git a/package.json b/package.json
index 0c3bd7edf875ff0be81ea3467d96d9804f86f535..6265ca8aae23e2b6e6015ccf6d18b36477847477 100644
--- a/package.json
+++ b/package.json
@@ -65,7 +65,7 @@
     "@dcloudio/uni-stacktracey": "3.0.0-alpha-4020220240624001",
     "@dcloudio/uni-vue-devtools": "3.0.0-alpha-4020220240624001",
     "@dcloudio/vite-plugin-uni": "3.0.0-alpha-4020220240624001",
-    "@iconify/vue": "^4.1.2",
+    "@iconify/json": "^2.2.206",
     "@types/crypto-js": "^4.2.2",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^20.14.8",
diff --git a/src/components/Iconify/index.vue b/src/components/Iconify/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..40b470feb18d8d47e9a585f012a3671fd2a19aa1
--- /dev/null
+++ b/src/components/Iconify/index.vue
@@ -0,0 +1,39 @@
+<script lang="ts" setup name="Iconify">
+interface Props {
+  icon: string
+  size?: string | number
+  color?: string
+}
+/**
+ * @name Iconify
+ * @desc 图标
+ * @docs https://iconify.design/docs/icon-components/vue/
+ * @example <Iconify icon="ant-design:home-outlined" />
+ */
+const props = withDefaults(defineProps<Props>(), {
+  size: 'inherit',
+  color: 'inherit',
+});
+
+const emits = defineEmits(['click']);
+function click() {
+  emits('click');
+}
+
+function isNumber(str: string | number): boolean {
+  return !Number.isNaN(Number(str));
+}
+</script>
+
+<template>
+  <view class="iconify-icon" :class="[props.icon]" @click="click" />
+</template>
+
+<style lang="scss" scoped>
+.iconify-icon {
+  display: inline-block;
+  line-height: 1;
+  font-size: v-bind('isNumber(props.size) ? `${props.size}px` : props.size');
+  color: v-bind('props.color');
+}
+</style>
diff --git a/src/pages/demo/index.vue b/src/pages/demo/index.vue
index c64a43d8475f701f153be63e3d51b3694f6701db..304f519ca0190387adade08a312746c0b5af3d6c 100644
--- a/src/pages/demo/index.vue
+++ b/src/pages/demo/index.vue
@@ -1,10 +1,20 @@
 <script lang="ts" setup>
+import Iconify from '@/components/Iconify/index.vue';
+
 const demo = ref('Demo');
 </script>
 
 <template>
-  <view class="pt-36 text-lg font-medium flex justify-center items-center">
+  <view class="pt-36 text-lg font-medium flex flex-col justify-center items-center">
     {{ demo }}
+    <view class="mt-30px">
+      iconify 组件
+    </view>
+    <view class="mt-30px center flex flex-row gap-10px">
+      <Iconify icon="i-ri-alipay-fill" size="32" color="blue" />
+      <Iconify icon="i-ri-settings-5-line" size="48" color="orange" />
+      <Iconify icon="i-ri-wechat-fill" size="32" color="green" />
+    </view>
   </view>
 </template>