diff --git a/README.md b/README.md
index 343db95..e870b15 100644
--- a/README.md
+++ b/README.md
@@ -16,6 +16,11 @@ Discussion: https://discord.gg/RvFM97v
 | - | - |
 | <img src="https://raw.githubusercontent.com/awesomejerry/react-native-qrcode-svg/master/screenshot/android.png" width="240"> | <img src="https://raw.githubusercontent.com/awesomejerry/react-native-qrcode-svg/master/screenshot/ios.png" width="240"> |
 
+
+| QRCode rectangle logo |
+| - |
+| <img src="./screenshot/qrcode_rectanglelogo.png" width="140"> |
+
 ## Installation
 
 Install dependency packages
@@ -115,10 +120,13 @@ enableLinearGradient | false     | enables or disables linear gradient
 linearGradient  |  ['rgb(255,0,0)','rgb(0,255,255)']  | array of 2 rgb colors used to create the linear gradient
 gradientDirection| [170,0,0,0]  | the direction of the linear gradient
 logo | null        | Image source object. Ex. {uri: 'base64string'} or {require('pathToImage')}
-logoSize | 20% of size | Size of the imprinted logo. Bigger logo = less error correction in QR code
+logoWidth | 20% of size | Width of the imprinted logo. Bigger logo = less error correction in QR code
+logoHeight | 20% of size | Height of the imprinted logo. Bigger logo = less error correction in QR code
 logoBackgroundColor | backgroundColor        | The logo gets a filled quadratic background with this color. Use 'transparent' if your logo already has its own backdrop.
-logoMargin | 2 | logo's distance to its wrapper
+logoMarginX | 2 | logo's horizontal distance to its wrapper
+logoMarginY | 2 | logo's vertical distance to its wrapper
 logoBorderRadius | 0 | the border-radius of logo image (Android is not supported)
+logoPreserveAspectRatio | 'xMidYMid slice' | the preserveAspectRatio of logo image. If you want to change the zoom property of the image, please see the [preserveAspectRatio](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio) property for image in SVG.
 quietZone | 0 | quiet zone around the qr in pixels (useful when saving image to gallery)
 getRef          | null       | Get SVG ref for further usage
 ecl             | 'M'        | Error correction level
diff --git a/screenshot/qrcode_rectanglelogo.png b/screenshot/qrcode_rectanglelogo.png
new file mode 100644
index 0000000..81e995d
Binary files /dev/null and b/screenshot/qrcode_rectanglelogo.png differ
diff --git a/src/index.js b/src/index.js
index 99c2e68..8373c72 100644
--- a/src/index.js
+++ b/src/index.js
@@ -15,31 +15,36 @@ import transformMatrixIntoPath from './transformMatrixIntoPath'
 const renderLogo = ({
   size,
   logo,
-  logoSize,
+  logoWidth,
+  logoHeight,
   logoBackgroundColor,
-  logoMargin,
-  logoBorderRadius
+  logoMarginX,
+  logoMarginY,
+  logoBorderRadius,
+  logoPreserveAspectRatio
 }) => {
-  const logoPosition = (size - logoSize - logoMargin * 2) / 2
-  const logoBackgroundSize = logoSize + logoMargin * 2
-  const logoBackgroundBorderRadius =
-    logoBorderRadius + (logoMargin / logoSize) * logoBorderRadius
+  const logoPositionX = (size - logoWidth - logoMarginX * 2) / 2
+  const logoPositionY = (size - logoHeight - logoMarginY * 2) / 2
+  const logoBackgroundSizeWidth = logoWidth + logoMarginX * 2
+  const logoBackgroundSizeHeight = logoHeight + logoMarginY * 2
+  const logoBackgroundBorderRadiusX = logoBorderRadius + (logoMarginX / logoWidth) * logoBorderRadius
+  const logoBackgroundBorderRadiusY = logoBorderRadius + (logoMarginY / logoHeight) * logoBorderRadius
 
   return (
-    <G x={logoPosition} y={logoPosition}>
+    <G x={logoPositionX} y={logoPositionY}>
       <Defs>
-        <ClipPath id='clip-logo-background'>
+        <ClipPath id="clip-logo-background">
           <Rect
-            width={logoBackgroundSize}
-            height={logoBackgroundSize}
-            rx={logoBackgroundBorderRadius}
-            ry={logoBackgroundBorderRadius}
+            width={logoBackgroundSizeWidth}
+            height={logoBackgroundSizeHeight}
+            rx={logoBackgroundBorderRadiusX}
+            ry={logoBackgroundBorderRadiusY}
           />
         </ClipPath>
-        <ClipPath id='clip-logo'>
+        <ClipPath id="clip-logo">
           <Rect
-            width={logoSize}
-            height={logoSize}
+            width={logoWidth}
+            height={logoHeight}
             rx={logoBorderRadius}
             ry={logoBorderRadius}
           />
@@ -47,19 +52,19 @@ const renderLogo = ({
       </Defs>
       <G>
         <Rect
-          width={logoBackgroundSize}
-          height={logoBackgroundSize}
+          width={logoBackgroundSizeWidth}
+          height={logoBackgroundSizeHeight}
           fill={logoBackgroundColor}
-          clipPath='url(#clip-logo-background)'
+          clipPath="url(#clip-logo-background)"
         />
       </G>
-      <G x={logoMargin} y={logoMargin}>
+      <G x={logoMarginX} y={logoMarginY}>
         <Image
-          width={logoSize}
-          height={logoSize}
-          preserveAspectRatio='xMidYMid slice'
+          width={logoWidth}
+          height={logoHeight}
+          preserveAspectRatio={logoPreserveAspectRatio}
           href={logo}
-          clipPath='url(#clip-logo)'
+          clipPath="url(#clip-logo)"
         />
       </G>
     </G>
@@ -72,10 +77,13 @@ const QRCode = ({
   color = 'black',
   backgroundColor = 'white',
   logo,
-  logoSize = size * 0.2,
+  logoWidth = size * 0.2,
+  logoHeight = size * 0.2,
   logoBackgroundColor = 'transparent',
-  logoMargin = 2,
+  logoMarginX = 2,
+  logoMarginY = 2,
   logoBorderRadius = 0,
+  logoPreserveAspectRatio = 'xMidYMid slice',
   quietZone = 0,
   enableLinearGradient = false,
   gradientDirection = ['0%', '0%', '100%', '100%'],
@@ -148,10 +156,13 @@ const QRCode = ({
         renderLogo({
           size,
           logo,
-          logoSize,
+          logoWidth,
+          logoHeight,
           logoBackgroundColor,
-          logoMargin,
-          logoBorderRadius
+          logoMarginX,
+          logoMarginY,
+          logoBorderRadius,
+          logoPreserveAspectRatio
         })}
     </Svg>
   )