diff --git a/Example/src/App.tsx b/Example/src/App.tsx
index 1cdd7a0..885f19b 100644
--- a/Example/src/App.tsx
+++ b/Example/src/App.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {SafeAreaView, ScrollView, Text} from 'react-native';
+import {SafeAreaView, ScrollView, Text, View} from 'react-native';
 import SVG from './assets/ruby.svg';
 import Description from './components/Description';
 import QRCode from 'react-native-qrcode-svg';
@@ -50,6 +50,21 @@ const localPngQRCode = (
   </Description>
 );
 
+const localTransparentPngQRCode = (
+  <Description text="QR code with local transparent PNG">
+    <View style={{backgroundColor: 'blue'}}>
+      <QRCode
+        value={googleUrl}
+        size={qrCodeSize}
+        logo={require('./assets/google.png')}
+        logoSize={logoSize}
+        logoBackgroundColor="transparent"
+        backgroundColor="transparent"
+      />
+    </View>
+  </Description>
+);
+
 const localPngBackgroundColorQRCode = (
   <Description text="QR code with local PNG with background color avatar">
     <QRCode
@@ -119,6 +134,7 @@ const App = () => {
         {colorfulQRCODe}
         {urlPngQRCode}
         {localPngQRCode}
+        {localTransparentPngQRCode}
         {localPngBackgroundColorQRCode}
         {urlSvgQRCode}
         {stringSvgQRCode}
diff --git a/src/index.js b/src/index.js
index 6af8f01..86f8ff8 100644
--- a/src/index.js
+++ b/src/index.js
@@ -122,6 +122,9 @@ const QRCode = ({
   const { path, cellSize } = result;
   const displayLogo = logo || logoSVG;
 
+  const logoPosition = (size - logoSize - logoMargin * 2) / 2;
+  const logoPositionEnd = logoPosition + logoSize + logoMargin * 2;
+
   return (
     <Svg
       testID={testID}
@@ -146,6 +149,12 @@ const QRCode = ({
           <Stop offset="0" stopColor={linearGradient[0]} stopOpacity="1" />
           <Stop offset="1" stopColor={linearGradient[1]} stopOpacity="1" />
         </LinearGradient>
+        <ClipPath id="invert-clip-logo">
+          <Path
+            d={`M0,0 L${size},0 L${size},${size} L0,${size} Z
+                 M${logoPosition},${logoPosition} L${logoPosition},${logoPositionEnd} L${logoPositionEnd},${logoPositionEnd} L${logoPositionEnd},${logoPosition} Z`}
+          />
+        </ClipPath>
       </Defs>
       <G>
         <Rect
@@ -162,6 +171,12 @@ const QRCode = ({
           strokeLinecap="butt"
           stroke={enableLinearGradient ? "url(#grad)" : color}
           strokeWidth={cellSize}
+          clipPath={
+            displayLogo &&
+            logoBackgroundColor === "transparent" &&
+            backgroundColor === "transparent" &&
+            "url(#invert-clip-logo)"
+          }
         />
       </G>
       {displayLogo &&