diff --git a/src/components/RayIcon/index.scss b/src/components/RayIcon/index.scss
index 2a4729bb..a98fd81e 100644
--- a/src/components/RayIcon/index.scss
+++ b/src/components/RayIcon/index.scss
@@ -1,13 +1,14 @@
 .ray-icon {
+  position: relative;
   width: var(--ray-icon-width);
   height: var(--ray-icon-height);
   border: none;
   outline: none;
   text-align: center;
   display: inline-block;
-  position: relative;
   fill: currentColor;
   transform: translateZ(0);
+  opacity: var(--ray-icon-depth);
 
   & svg[rayIconAttribute="ray-icon"] {
     width: var(--ray-icon-width);
diff --git a/src/components/RayIcon/index.tsx b/src/components/RayIcon/index.tsx
index 5cf43690..fbfe31b4 100644
--- a/src/components/RayIcon/index.tsx
+++ b/src/components/RayIcon/index.tsx
@@ -39,9 +39,15 @@ const RayIcon = defineComponent({
       default: 0,
     },
     customClassName: {
+      /** 自定义 class name */
       type: String,
       default: '',
     },
+    depth: {
+      /** 图标深度 */
+      type: Number,
+      default: 1,
+    },
   },
   setup(props) {
     const modelColor = computed(() => props.color)
@@ -51,9 +57,10 @@ const RayIcon = defineComponent({
         '--ray-icon-width': props.width
           ? props.width + 'px'
           : props.size + 'px',
-        '--ray-icon-height': props.width
+        '--ray-icon-height': props.height
           ? props.height + 'px'
           : props.size + 'px',
+        '--ray-icon-depth': props.depth,
       }
 
       return cssVar