diff --git a/src/components/ReIcon/src/hooks.ts b/src/components/ReIcon/src/hooks.ts
index e1eb17fba..1a215a761 100644
--- a/src/components/ReIcon/src/hooks.ts
+++ b/src/components/ReIcon/src/hooks.ts
@@ -1,6 +1,6 @@
 import { iconType } from "./types";
 import { h, defineComponent, Component } from "vue";
-import { IconifyIconOffline, FontIcon } from "../index";
+import { IconifyIconOnline, IconifyIconOffline, FontIcon } from "../index";
 
 /**
  * 支持fontawesome4、5+、iconfont、remixicon、element-plus的icons、自定义svg
@@ -37,7 +37,9 @@ export function useRenderIcon(icon: string, attrs?: iconType): Component {
     return defineComponent({
       name: "Icon",
       render() {
-        return h(IconifyIconOffline, {
+        const IconifyIcon =
+          attrs && attrs["online"] ? IconifyIconOnline : IconifyIconOffline;
+        return h(IconifyIcon, {
           icon: icon,
           ...attrs
         });
diff --git a/src/components/ReIcon/src/types.ts b/src/components/ReIcon/src/types.ts
index 0c06ea49d..7e3ffab35 100644
--- a/src/components/ReIcon/src/types.ts
+++ b/src/components/ReIcon/src/types.ts
@@ -11,7 +11,9 @@ export interface iconType {
   horizontalAlign?: boolean;
   verticalAlign?: boolean;
   align?: string;
+  online?: boolean;
   onLoad?: Function;
+  includes?: Function;
 
   //  all icon
   style?: object;
diff --git a/src/views/login/components/phone.vue b/src/views/login/components/phone.vue
index 61833bb11..5f5b6456d 100644
--- a/src/views/login/components/phone.vue
+++ b/src/views/login/components/phone.vue
@@ -59,6 +59,9 @@ function onBack() {
             clearable
             v-model="ruleForm.verifyCode"
             placeholder="短信验证码"
+            :prefix-icon="
+              useRenderIcon('ri:shield-keyhole-line', { online: true })
+            "
           />
           <el-button
             :disabled="isDisabled"
diff --git a/src/views/login/components/regist.vue b/src/views/login/components/regist.vue
index 3d83fc327..6acc0ce1f 100644
--- a/src/views/login/components/regist.vue
+++ b/src/views/login/components/regist.vue
@@ -101,6 +101,9 @@ function onBack() {
             clearable
             v-model="ruleForm.verifyCode"
             placeholder="短信验证码"
+            :prefix-icon="
+              useRenderIcon('ri:shield-keyhole-line', { online: true })
+            "
           />
           <el-button
             :disabled="isDisabled"
diff --git a/src/views/login/components/update.vue b/src/views/login/components/update.vue
index 97de44a9a..a8ec6f8f8 100644
--- a/src/views/login/components/update.vue
+++ b/src/views/login/components/update.vue
@@ -80,6 +80,9 @@ function onBack() {
             clearable
             v-model="ruleForm.verifyCode"
             placeholder="短信验证码"
+            :prefix-icon="
+              useRenderIcon('ri:shield-keyhole-line', { online: true })
+            "
           />
           <el-button
             :disabled="isDisabled"
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 51c141c01..27bd0729b 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -114,6 +114,9 @@ watch(imgCode, value => {
                 clearable
                 v-model="ruleForm.verifyCode"
                 placeholder="验证码"
+                :prefix-icon="
+                  useRenderIcon('ri:shield-keyhole-line', { online: true })
+                "
               >
                 <template v-slot:append>
                   <ReImageVerify v-model:code="imgCode" />