diff --git a/src/useQRCode.tsx b/src/useQRCode.tsx
index 0abdf72..60bfe7c 100644
--- a/src/useQRCode.tsx
+++ b/src/useQRCode.tsx
@@ -127,19 +127,43 @@ function useSVGComponent() {
   const SVGComponent = <T extends HTMLDivElement>({
     text,
     options,
+    logo,
   }: IQRCode) => {
     const inputRef = React.useRef<T>(null);
-
     React.useEffect(() => {
       QRCode.toString(text, options, function (error: Error, svg: string) {
         if (error) {
           throw error;
         }
+        let _svg = '';
+        let x = 0;
+        let y = 0;
+        if (logo) {
+          const logoWidth = logo?.options?.width || 30;
+          if (logo?.options?.x && logo?.options?.y) {
+            x = logo?.options?.x;
+            y = logo?.options?.y;
+          } else if (!logo?.options?.x || !logo?.options?.y) {
+            // let margin = options?.margin;
+            // margin = !margin ? (margin === 0 ? 0 : 32) : margin * 8;
+            // const width = options?.width || 116 + margin;
+            // const center = (width - logoWidth) / 2;
+          }
+          const image = `<image xlink:href=${logo?.src} width="${logoWidth}" height=${logoWidth} x=${x} y=${y} preserveAspectRatio="none" />`;
+          const position = svg.indexOf('</svg>');
+          _svg = [
+            svg.slice(0, position),
+            image,
+            svg.slice(position),
+          ].join('');
+        } else {
+          _svg = svg;
+        }
         if (inputRef.current instanceof HTMLDivElement) {
-          inputRef.current.innerHTML = svg;
+          inputRef.current.innerHTML = _svg;
         }
       });
-    }, [text, options]);
+    }, [text, options, logo]);
 
     return <div ref={inputRef} />;
   };
diff --git a/supports/create-next-app/package.json b/supports/create-next-app/package.json
index 56eda26..7a41704 100644
--- a/supports/create-next-app/package.json
+++ b/supports/create-next-app/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "next": "12.3.1",
+    "next-qrcode": "file:../..",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
diff --git a/supports/create-next-app/pages/index.tsx b/supports/create-next-app/pages/index.tsx
index 0bafc8f..224821d 100644
--- a/supports/create-next-app/pages/index.tsx
+++ b/supports/create-next-app/pages/index.tsx
@@ -47,17 +47,21 @@ const Home: NextPage = () => {
       <SVG
         text={'https://github.com/bunlong/next-qrcode'}
         options={{
-          type: 'image/jpeg',
-          quality: 0.3,
-          level: 'M',
-          margin: 3,
-          scale: 4,
+          margin: 5,
           width: 200,
           color: {
             dark: '#010599FF',
             light: '#FFBF60FF',
           },
         }}
+        logo={{
+          src: 'https://cdn-icons-png.flaticon.com/512/124/124010.png',
+          options: {
+            width: 5,
+            x: 0,
+            y: 0,
+          }
+        }}
       />
     </>
   )