diff --git a/src/packages/icon/demo.vue b/src/packages/icon/demo.vue
index 451f7ae2b396ae02a144a956f116a836d3fb768e..8e592ebb24e76460de0fd7484af3ba757e5483b9 100644
--- a/src/packages/icon/demo.vue
+++ b/src/packages/icon/demo.vue
@@ -5,6 +5,13 @@
       <nut-icon name="dongdong"></nut-icon>
       <nut-icon name="JD"></nut-icon>
     </nut-cell>
+    <h2>图片链接</h2>
+    <nut-cell>
+      <nut-icon
+        size="40px"
+        name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
+      ></nut-icon>
+    </nut-cell>
     <h2>图标颜色</h2>
     <nut-cell>
       <nut-icon name="dongdong" color="#fa2c19"></nut-icon>
diff --git a/src/packages/icon/doc.md b/src/packages/icon/doc.md
index f4b928b2f934cdbedde5ddae2343ee3b83304dd9..b10bcc3d31d6cf2d46793e77f8a3c2964f26a5c4 100644
--- a/src/packages/icon/doc.md
+++ b/src/packages/icon/doc.md
@@ -24,6 +24,7 @@ app.use(Icon);
 ```html
 <nut-icon name="dongdong"></nut-icon>
 <nut-icon name="JD"></nut-icon>
+<nut-icon size="40px"  name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"></nut-icon>
 ```
 
 ### 图标颜色
diff --git a/src/packages/icon/index.scss b/src/packages/icon/index.scss
index f872f2b4cfbada071c79a8547775ccf4eeb700d4..17f38cb3bedbdfcf6e4bb51ac140d7c2e1049965 100644
--- a/src/packages/icon/index.scss
+++ b/src/packages/icon/index.scss
@@ -4,4 +4,10 @@
   height: 20px;
   line-height: 20px;
   text-align: right;
+
+  &__img {
+    width: 20px;
+    height: 20px;
+    object-fit: contain;
+  }
 }
diff --git a/src/packages/icon/index.vue b/src/packages/icon/index.vue
index 285ae5880da9f123125cd881dd2f8b3bfa7da9a5..d25a617b73d68b308c0d5a3b0dfc9eeb2e6fdfc8 100644
--- a/src/packages/icon/index.vue
+++ b/src/packages/icon/index.vue
@@ -26,24 +26,27 @@ export default create({
       default: 'i'
     }
   },
-  components: {},
   emits: ['click'],
 
   setup(props, { emit, slots }) {
     const handleClick = (event: Event) => {
       emit('click', event);
     };
-
-    return () =>
-      h(
-        props.tag,
-        {
-          class: `${props.classPrefix} ${componentName}-${props.name}`,
-          style: { color: props.color, fontSize: props.size },
-          onClick: handleClick
-        },
-        slots.default?.()
-      );
+    const isImage = () => {
+      return props.name ? props.name.indexOf('/') !== -1 : false;
+    };
+    const styleOptions = {
+      class: `${props.classPrefix} ${componentName}-${props.name}`,
+      style: { color: props.color, fontSize: props.size },
+      onClick: handleClick
+    } as any;
+    if (isImage()) {
+      styleOptions.class = `${componentName}__img`;
+      styleOptions.src = props.name;
+      styleOptions.style['width'] = props.size;
+      styleOptions.style['height'] = props.size;
+    }
+    return () => h(isImage() ? 'img' : props.tag, styleOptions, slots.default?.());
   }
 });
 </script>