diff --git a/.gitignore b/.gitignore
index ed7f567..71c0418 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,7 @@
 .DS_Store
+.idea/
+*~
+.*.swp
 node_modules/
 lib/
 examples/bundle.js
diff --git a/src/__test__/__snapshots__/index.test.tsx.snap b/src/__test__/__snapshots__/index.test.tsx.snap
index 5dc1730..ec274bd 100644
--- a/src/__test__/__snapshots__/index.test.tsx.snap
+++ b/src/__test__/__snapshots__/index.test.tsx.snap
@@ -78,6 +78,31 @@ exports[`Canvas rendering renders Canvas variation ({
 ]
 `;
 
+exports[`Canvas rendering renders Canvas variation ({
+  imageSettings: {
+    src: 'https://static.zpao.com/favicon.png',
+    x: undefined,
+    y: undefined,
+    height: 24,
+    width: 24,
+    excavate: false
+  },
+  cellSize: 8
+}) correctly 1`] = `
+[
+  <canvas
+    height="232"
+    role="img"
+    style="height: 232px; width: 232px;"
+    width="232"
+  />,
+  <img
+    src="https://static.zpao.com/favicon.png"
+    style="display: none;"
+  />,
+]
+`;
+
 exports[`Canvas rendering renders Canvas variation ({
   imageSettings: {
     src: 'https://static.zpao.com/favicon.png',
@@ -102,6 +127,31 @@ exports[`Canvas rendering renders Canvas variation ({
 ]
 `;
 
+exports[`Canvas rendering renders Canvas variation ({
+  imageSettings: {
+    src: 'https://static.zpao.com/favicon.png',
+    x: undefined,
+    y: undefined,
+    height: 24,
+    width: 24,
+    excavate: true
+  },
+  cellSize: 8
+}) correctly 1`] = `
+[
+  <canvas
+    height="232"
+    role="img"
+    style="height: 232px; width: 232px;"
+    width="232"
+  />,
+  <img
+    src="https://static.zpao.com/favicon.png"
+    style="display: none;"
+  />,
+]
+`;
+
 exports[`Canvas rendering renders Canvas variation ({
   imageSettings: {
     src: 'https://static.zpao.com/favicon.png',
@@ -205,6 +255,28 @@ exports[`Canvas rendering renders Canvas variation ({
 ]
 `;
 
+exports[`Canvas rendering renders Canvas variation ({ cellSize: 1 }) correctly 1`] = `
+[
+  <canvas
+    height="29"
+    role="img"
+    style="height: 29px; width: 29px;"
+    width="29"
+  />,
+]
+`;
+
+exports[`Canvas rendering renders Canvas variation ({ cellSize: 48 }) correctly 1`] = `
+[
+  <canvas
+    height="1392"
+    role="img"
+    style="height: 1392px; width: 1392px;"
+    width="1392"
+  />,
+]
+`;
+
 exports[`Canvas rendering renders Canvas variation ({ includeMargin: false }) correctly 1`] = `
 [
   <canvas
@@ -511,6 +583,45 @@ exports[`SVG rendering renders SVG variation ({
 </svg>
 `;
 
+exports[`SVG rendering renders SVG variation ({
+  imageSettings: {
+    src: 'https://static.zpao.com/favicon.png',
+    x: undefined,
+    y: undefined,
+    height: 24,
+    width: 24,
+    excavate: false
+  },
+  cellSize: 8
+}) correctly 1`] = `
+<svg
+  height="232"
+  role="img"
+  viewBox="0 0 29 29"
+  width="232"
+>
+  <path
+    d="M0,0 h29v29H0z"
+    fill="#ffffff"
+    shape-rendering="crispEdges"
+  />
+  <path
+    d="M0 0h7v1H0zM12 0h1v1H12zM16 0h1v1H16zM18 0h3v1H18zM22,0 h7v1H22zM0 1h1v1H0zM6 1h1v1H6zM8 1h1v1H8zM10 1h1v1H10zM14 1h2v1H14zM22 1h1v1H22zM28,1 h1v1H28zM0 2h1v1H0zM2 2h3v1H2zM6 2h1v1H6zM11 2h1v1H11zM14 2h3v1H14zM20 2h1v1H20zM22 2h1v1H22zM24 2h3v1H24zM28,2 h1v1H28zM0 3h1v1H0zM2 3h3v1H2zM6 3h1v1H6zM8 3h8v1H8zM17 3h1v1H17zM19 3h1v1H19zM22 3h1v1H22zM24 3h3v1H24zM28,3 h1v1H28zM0 4h1v1H0zM2 4h3v1H2zM6 4h1v1H6zM9 4h1v1H9zM11 4h2v1H11zM14 4h1v1H14zM16 4h1v1H16zM19 4h2v1H19zM22 4h1v1H22zM24 4h3v1H24zM28,4 h1v1H28zM0 5h1v1H0zM6 5h1v1H6zM8 5h2v1H8zM13 5h1v1H13zM15 5h4v1H15zM22 5h1v1H22zM28,5 h1v1H28zM0 6h7v1H0zM8 6h1v1H8zM10 6h1v1H10zM12 6h1v1H12zM14 6h1v1H14zM16 6h1v1H16zM18 6h1v1H18zM20 6h1v1H20zM22,6 h7v1H22zM9 7h2v1H9zM14 7h1v1H14zM16 7h1v1H16zM0 8h5v1H0zM6 8h4v1H6zM11 8h3v1H11zM17 8h1v1H17zM20 8h2v1H20zM23 8h1v1H23zM25 8h1v1H25zM27 8h1v1H27zM0 9h1v1H0zM2 9h2v1H2zM5 9h1v1H5zM10 9h2v1H10zM13 9h1v1H13zM16 9h1v1H16zM18 9h3v1H18zM22 9h3v1H22zM28,9 h1v1H28zM0 10h2v1H0zM3 10h1v1H3zM5 10h2v1H5zM10 10h1v1H10zM13 10h6v1H13zM20 10h2v1H20zM23 10h2v1H23zM0 11h1v1H0zM2 11h3v1H2zM8 11h1v1H8zM11 11h1v1H11zM19 11h6v1H19zM27 11h1v1H27zM3 12h2v1H3zM6 12h10v1H6zM17 12h1v1H17zM19 12h1v1H19zM23 12h1v1H23zM25 12h2v1H25zM2 13h1v1H2zM7 13h1v1H7zM9 13h1v1H9zM11 13h1v1H11zM14 13h1v1H14zM16 13h1v1H16zM18 13h7v1H18zM26 13h1v1H26zM28,13 h1v1H28zM0 14h1v1H0zM3 14h1v1H3zM6 14h1v1H6zM10 14h1v1H10zM14 14h2v1H14zM18 14h1v1H18zM20 14h1v1H20zM24 14h1v1H24zM26 14h1v1H26zM1 15h2v1H1zM4 15h1v1H4zM10 15h3v1H10zM20 15h1v1H20zM23 15h2v1H23zM27 15h1v1H27zM5 16h2v1H5zM10 16h1v1H10zM12 16h6v1H12zM23 16h1v1H23zM26 16h1v1H26zM0 17h1v1H0zM3 17h2v1H3zM10 17h2v1H10zM14 17h1v1H14zM16 17h5v1H16zM22 17h5v1H22zM28,17 h1v1H28zM0 18h1v1H0zM2 18h2v1H2zM6 18h1v1H6zM8 18h1v1H8zM10 18h1v1H10zM12 18h1v1H12zM14 18h4v1H14zM21 18h1v1H21zM23 18h1v1H23zM25 18h2v1H25zM0 19h1v1H0zM2 19h1v1H2zM4 19h2v1H4zM7 19h5v1H7zM14 19h2v1H14zM18 19h1v1H18zM22 19h1v1H22zM24 19h1v1H24zM27 19h1v1H27zM0 20h1v1H0zM2 20h2v1H2zM5 20h2v1H5zM9 20h9v1H9zM20 20h5v1H20zM26,20 h3v1H26zM8 21h6v1H8zM16 21h5v1H16zM24,21 h5v1H24zM0 22h7v1H0zM8 22h2v1H8zM12 22h1v1H12zM14 22h4v1H14zM19 22h2v1H19zM22 22h1v1H22zM24 22h3v1H24zM0 23h1v1H0zM6 23h1v1H6zM9 23h1v1H9zM11 23h2v1H11zM14 23h1v1H14zM16 23h1v1H16zM18 23h3v1H18zM24 23h2v1H24zM27,23 h2v1H27zM0 24h1v1H0zM2 24h3v1H2zM6 24h1v1H6zM8 24h2v1H8zM13 24h3v1H13zM17 24h1v1H17zM20 24h8v1H20zM0 25h1v1H0zM2 25h3v1H2zM6 25h1v1H6zM8 25h1v1H8zM10 25h2v1H10zM16 25h3v1H16zM20 25h1v1H20zM28,25 h1v1H28zM0 26h1v1H0zM2 26h3v1H2zM6 26h1v1H6zM8 26h1v1H8zM12 26h2v1H12zM15 26h1v1H15zM18 26h2v1H18zM21 26h4v1H21zM27 26h1v1H27zM0 27h1v1H0zM6 27h1v1H6zM8 27h3v1H8zM16 27h1v1H16zM20 27h1v1H20zM22 27h4v1H22zM27 27h1v1H27zM0 28h7v1H0zM8 28h7v1H8zM17 28h1v1H17zM19 28h1v1H19zM22 28h1v1H22zM26 28h1v1H26z"
+    fill="#000000"
+    shape-rendering="crispEdges"
+  />
+  <image
+    height="3"
+    href="https://static.zpao.com/favicon.png"
+    opacity="1"
+    preserveAspectRatio="none"
+    width="3"
+    x="13"
+    y="13"
+  />
+</svg>
+`;
+
 exports[`SVG rendering renders SVG variation ({
   imageSettings: {
     src: 'https://static.zpao.com/favicon.png',
@@ -549,6 +660,45 @@ exports[`SVG rendering renders SVG variation ({
 </svg>
 `;
 
+exports[`SVG rendering renders SVG variation ({
+  imageSettings: {
+    src: 'https://static.zpao.com/favicon.png',
+    x: undefined,
+    y: undefined,
+    height: 24,
+    width: 24,
+    excavate: true
+  },
+  cellSize: 8
+}) correctly 1`] = `
+<svg
+  height="232"
+  role="img"
+  viewBox="0 0 29 29"
+  width="232"
+>
+  <path
+    d="M0,0 h29v29H0z"
+    fill="#ffffff"
+    shape-rendering="crispEdges"
+  />
+  <path
+    d="M0 0h7v1H0zM12 0h1v1H12zM16 0h1v1H16zM18 0h3v1H18zM22,0 h7v1H22zM0 1h1v1H0zM6 1h1v1H6zM8 1h1v1H8zM10 1h1v1H10zM14 1h2v1H14zM22 1h1v1H22zM28,1 h1v1H28zM0 2h1v1H0zM2 2h3v1H2zM6 2h1v1H6zM11 2h1v1H11zM14 2h3v1H14zM20 2h1v1H20zM22 2h1v1H22zM24 2h3v1H24zM28,2 h1v1H28zM0 3h1v1H0zM2 3h3v1H2zM6 3h1v1H6zM8 3h8v1H8zM17 3h1v1H17zM19 3h1v1H19zM22 3h1v1H22zM24 3h3v1H24zM28,3 h1v1H28zM0 4h1v1H0zM2 4h3v1H2zM6 4h1v1H6zM9 4h1v1H9zM11 4h2v1H11zM14 4h1v1H14zM16 4h1v1H16zM19 4h2v1H19zM22 4h1v1H22zM24 4h3v1H24zM28,4 h1v1H28zM0 5h1v1H0zM6 5h1v1H6zM8 5h2v1H8zM13 5h1v1H13zM15 5h4v1H15zM22 5h1v1H22zM28,5 h1v1H28zM0 6h7v1H0zM8 6h1v1H8zM10 6h1v1H10zM12 6h1v1H12zM14 6h1v1H14zM16 6h1v1H16zM18 6h1v1H18zM20 6h1v1H20zM22,6 h7v1H22zM9 7h2v1H9zM14 7h1v1H14zM16 7h1v1H16zM0 8h5v1H0zM6 8h4v1H6zM11 8h3v1H11zM17 8h1v1H17zM20 8h2v1H20zM23 8h1v1H23zM25 8h1v1H25zM27 8h1v1H27zM0 9h1v1H0zM2 9h2v1H2zM5 9h1v1H5zM10 9h2v1H10zM13 9h1v1H13zM16 9h1v1H16zM18 9h3v1H18zM22 9h3v1H22zM28,9 h1v1H28zM0 10h2v1H0zM3 10h1v1H3zM5 10h2v1H5zM10 10h1v1H10zM13 10h6v1H13zM20 10h2v1H20zM23 10h2v1H23zM0 11h1v1H0zM2 11h3v1H2zM8 11h1v1H8zM11 11h1v1H11zM19 11h6v1H19zM27 11h1v1H27zM3 12h2v1H3zM6 12h10v1H6zM17 12h1v1H17zM19 12h1v1H19zM23 12h1v1H23zM25 12h2v1H25zM2 13h1v1H2zM7 13h1v1H7zM9 13h1v1H9zM11 13h1v1H11zM16 13h1v1H16zM18 13h7v1H18zM26 13h1v1H26zM28,13 h1v1H28zM0 14h1v1H0zM3 14h1v1H3zM6 14h1v1H6zM10 14h1v1H10zM18 14h1v1H18zM20 14h1v1H20zM24 14h1v1H24zM26 14h1v1H26zM1 15h2v1H1zM4 15h1v1H4zM10 15h3v1H10zM20 15h1v1H20zM23 15h2v1H23zM27 15h1v1H27zM5 16h2v1H5zM10 16h1v1H10zM12 16h6v1H12zM23 16h1v1H23zM26 16h1v1H26zM0 17h1v1H0zM3 17h2v1H3zM10 17h2v1H10zM14 17h1v1H14zM16 17h5v1H16zM22 17h5v1H22zM28,17 h1v1H28zM0 18h1v1H0zM2 18h2v1H2zM6 18h1v1H6zM8 18h1v1H8zM10 18h1v1H10zM12 18h1v1H12zM14 18h4v1H14zM21 18h1v1H21zM23 18h1v1H23zM25 18h2v1H25zM0 19h1v1H0zM2 19h1v1H2zM4 19h2v1H4zM7 19h5v1H7zM14 19h2v1H14zM18 19h1v1H18zM22 19h1v1H22zM24 19h1v1H24zM27 19h1v1H27zM0 20h1v1H0zM2 20h2v1H2zM5 20h2v1H5zM9 20h9v1H9zM20 20h5v1H20zM26,20 h3v1H26zM8 21h6v1H8zM16 21h5v1H16zM24,21 h5v1H24zM0 22h7v1H0zM8 22h2v1H8zM12 22h1v1H12zM14 22h4v1H14zM19 22h2v1H19zM22 22h1v1H22zM24 22h3v1H24zM0 23h1v1H0zM6 23h1v1H6zM9 23h1v1H9zM11 23h2v1H11zM14 23h1v1H14zM16 23h1v1H16zM18 23h3v1H18zM24 23h2v1H24zM27,23 h2v1H27zM0 24h1v1H0zM2 24h3v1H2zM6 24h1v1H6zM8 24h2v1H8zM13 24h3v1H13zM17 24h1v1H17zM20 24h8v1H20zM0 25h1v1H0zM2 25h3v1H2zM6 25h1v1H6zM8 25h1v1H8zM10 25h2v1H10zM16 25h3v1H16zM20 25h1v1H20zM28,25 h1v1H28zM0 26h1v1H0zM2 26h3v1H2zM6 26h1v1H6zM8 26h1v1H8zM12 26h2v1H12zM15 26h1v1H15zM18 26h2v1H18zM21 26h4v1H21zM27 26h1v1H27zM0 27h1v1H0zM6 27h1v1H6zM8 27h3v1H8zM16 27h1v1H16zM20 27h1v1H20zM22 27h4v1H22zM27 27h1v1H27zM0 28h7v1H0zM8 28h7v1H8zM17 28h1v1H17zM19 28h1v1H19zM22 28h1v1H22zM26 28h1v1H26z"
+    fill="#000000"
+    shape-rendering="crispEdges"
+  />
+  <image
+    height="3"
+    href="https://static.zpao.com/favicon.png"
+    opacity="1"
+    preserveAspectRatio="none"
+    width="3"
+    x="13"
+    y="13"
+  />
+</svg>
+`;
+
 exports[`SVG rendering renders SVG variation ({
   imageSettings: {
     src: 'https://static.zpao.com/favicon.png',
@@ -708,6 +858,46 @@ exports[`SVG rendering renders SVG variation ({
 </svg>
 `;
 
+exports[`SVG rendering renders SVG variation ({ cellSize: 1 }) correctly 1`] = `
+<svg
+  height="29"
+  role="img"
+  viewBox="0 0 29 29"
+  width="29"
+>
+  <path
+    d="M0,0 h29v29H0z"
+    fill="#ffffff"
+    shape-rendering="crispEdges"
+  />
+  <path
+    d="M0 0h7v1H0zM12 0h1v1H12zM16 0h1v1H16zM18 0h3v1H18zM22,0 h7v1H22zM0 1h1v1H0zM6 1h1v1H6zM8 1h1v1H8zM10 1h1v1H10zM14 1h2v1H14zM22 1h1v1H22zM28,1 h1v1H28zM0 2h1v1H0zM2 2h3v1H2zM6 2h1v1H6zM11 2h1v1H11zM14 2h3v1H14zM20 2h1v1H20zM22 2h1v1H22zM24 2h3v1H24zM28,2 h1v1H28zM0 3h1v1H0zM2 3h3v1H2zM6 3h1v1H6zM8 3h8v1H8zM17 3h1v1H17zM19 3h1v1H19zM22 3h1v1H22zM24 3h3v1H24zM28,3 h1v1H28zM0 4h1v1H0zM2 4h3v1H2zM6 4h1v1H6zM9 4h1v1H9zM11 4h2v1H11zM14 4h1v1H14zM16 4h1v1H16zM19 4h2v1H19zM22 4h1v1H22zM24 4h3v1H24zM28,4 h1v1H28zM0 5h1v1H0zM6 5h1v1H6zM8 5h2v1H8zM13 5h1v1H13zM15 5h4v1H15zM22 5h1v1H22zM28,5 h1v1H28zM0 6h7v1H0zM8 6h1v1H8zM10 6h1v1H10zM12 6h1v1H12zM14 6h1v1H14zM16 6h1v1H16zM18 6h1v1H18zM20 6h1v1H20zM22,6 h7v1H22zM9 7h2v1H9zM14 7h1v1H14zM16 7h1v1H16zM0 8h5v1H0zM6 8h4v1H6zM11 8h3v1H11zM17 8h1v1H17zM20 8h2v1H20zM23 8h1v1H23zM25 8h1v1H25zM27 8h1v1H27zM0 9h1v1H0zM2 9h2v1H2zM5 9h1v1H5zM10 9h2v1H10zM13 9h1v1H13zM16 9h1v1H16zM18 9h3v1H18zM22 9h3v1H22zM28,9 h1v1H28zM0 10h2v1H0zM3 10h1v1H3zM5 10h2v1H5zM10 10h1v1H10zM13 10h6v1H13zM20 10h2v1H20zM23 10h2v1H23zM0 11h1v1H0zM2 11h3v1H2zM8 11h1v1H8zM11 11h1v1H11zM19 11h6v1H19zM27 11h1v1H27zM3 12h2v1H3zM6 12h10v1H6zM17 12h1v1H17zM19 12h1v1H19zM23 12h1v1H23zM25 12h2v1H25zM2 13h1v1H2zM7 13h1v1H7zM9 13h1v1H9zM11 13h1v1H11zM14 13h1v1H14zM16 13h1v1H16zM18 13h7v1H18zM26 13h1v1H26zM28,13 h1v1H28zM0 14h1v1H0zM3 14h1v1H3zM6 14h1v1H6zM10 14h1v1H10zM14 14h2v1H14zM18 14h1v1H18zM20 14h1v1H20zM24 14h1v1H24zM26 14h1v1H26zM1 15h2v1H1zM4 15h1v1H4zM10 15h3v1H10zM20 15h1v1H20zM23 15h2v1H23zM27 15h1v1H27zM5 16h2v1H5zM10 16h1v1H10zM12 16h6v1H12zM23 16h1v1H23zM26 16h1v1H26zM0 17h1v1H0zM3 17h2v1H3zM10 17h2v1H10zM14 17h1v1H14zM16 17h5v1H16zM22 17h5v1H22zM28,17 h1v1H28zM0 18h1v1H0zM2 18h2v1H2zM6 18h1v1H6zM8 18h1v1H8zM10 18h1v1H10zM12 18h1v1H12zM14 18h4v1H14zM21 18h1v1H21zM23 18h1v1H23zM25 18h2v1H25zM0 19h1v1H0zM2 19h1v1H2zM4 19h2v1H4zM7 19h5v1H7zM14 19h2v1H14zM18 19h1v1H18zM22 19h1v1H22zM24 19h1v1H24zM27 19h1v1H27zM0 20h1v1H0zM2 20h2v1H2zM5 20h2v1H5zM9 20h9v1H9zM20 20h5v1H20zM26,20 h3v1H26zM8 21h6v1H8zM16 21h5v1H16zM24,21 h5v1H24zM0 22h7v1H0zM8 22h2v1H8zM12 22h1v1H12zM14 22h4v1H14zM19 22h2v1H19zM22 22h1v1H22zM24 22h3v1H24zM0 23h1v1H0zM6 23h1v1H6zM9 23h1v1H9zM11 23h2v1H11zM14 23h1v1H14zM16 23h1v1H16zM18 23h3v1H18zM24 23h2v1H24zM27,23 h2v1H27zM0 24h1v1H0zM2 24h3v1H2zM6 24h1v1H6zM8 24h2v1H8zM13 24h3v1H13zM17 24h1v1H17zM20 24h8v1H20zM0 25h1v1H0zM2 25h3v1H2zM6 25h1v1H6zM8 25h1v1H8zM10 25h2v1H10zM16 25h3v1H16zM20 25h1v1H20zM28,25 h1v1H28zM0 26h1v1H0zM2 26h3v1H2zM6 26h1v1H6zM8 26h1v1H8zM12 26h2v1H12zM15 26h1v1H15zM18 26h2v1H18zM21 26h4v1H21zM27 26h1v1H27zM0 27h1v1H0zM6 27h1v1H6zM8 27h3v1H8zM16 27h1v1H16zM20 27h1v1H20zM22 27h4v1H22zM27 27h1v1H27zM0 28h7v1H0zM8 28h7v1H8zM17 28h1v1H17zM19 28h1v1H19zM22 28h1v1H22zM26 28h1v1H26z"
+    fill="#000000"
+    shape-rendering="crispEdges"
+  />
+</svg>
+`;
+
+exports[`SVG rendering renders SVG variation ({ cellSize: 48 }) correctly 1`] = `
+<svg
+  height="1392"
+  role="img"
+  viewBox="0 0 29 29"
+  width="1392"
+>
+  <path
+    d="M0,0 h29v29H0z"
+    fill="#ffffff"
+    shape-rendering="crispEdges"
+  />
+  <path
+    d="M0 0h7v1H0zM12 0h1v1H12zM16 0h1v1H16zM18 0h3v1H18zM22,0 h7v1H22zM0 1h1v1H0zM6 1h1v1H6zM8 1h1v1H8zM10 1h1v1H10zM14 1h2v1H14zM22 1h1v1H22zM28,1 h1v1H28zM0 2h1v1H0zM2 2h3v1H2zM6 2h1v1H6zM11 2h1v1H11zM14 2h3v1H14zM20 2h1v1H20zM22 2h1v1H22zM24 2h3v1H24zM28,2 h1v1H28zM0 3h1v1H0zM2 3h3v1H2zM6 3h1v1H6zM8 3h8v1H8zM17 3h1v1H17zM19 3h1v1H19zM22 3h1v1H22zM24 3h3v1H24zM28,3 h1v1H28zM0 4h1v1H0zM2 4h3v1H2zM6 4h1v1H6zM9 4h1v1H9zM11 4h2v1H11zM14 4h1v1H14zM16 4h1v1H16zM19 4h2v1H19zM22 4h1v1H22zM24 4h3v1H24zM28,4 h1v1H28zM0 5h1v1H0zM6 5h1v1H6zM8 5h2v1H8zM13 5h1v1H13zM15 5h4v1H15zM22 5h1v1H22zM28,5 h1v1H28zM0 6h7v1H0zM8 6h1v1H8zM10 6h1v1H10zM12 6h1v1H12zM14 6h1v1H14zM16 6h1v1H16zM18 6h1v1H18zM20 6h1v1H20zM22,6 h7v1H22zM9 7h2v1H9zM14 7h1v1H14zM16 7h1v1H16zM0 8h5v1H0zM6 8h4v1H6zM11 8h3v1H11zM17 8h1v1H17zM20 8h2v1H20zM23 8h1v1H23zM25 8h1v1H25zM27 8h1v1H27zM0 9h1v1H0zM2 9h2v1H2zM5 9h1v1H5zM10 9h2v1H10zM13 9h1v1H13zM16 9h1v1H16zM18 9h3v1H18zM22 9h3v1H22zM28,9 h1v1H28zM0 10h2v1H0zM3 10h1v1H3zM5 10h2v1H5zM10 10h1v1H10zM13 10h6v1H13zM20 10h2v1H20zM23 10h2v1H23zM0 11h1v1H0zM2 11h3v1H2zM8 11h1v1H8zM11 11h1v1H11zM19 11h6v1H19zM27 11h1v1H27zM3 12h2v1H3zM6 12h10v1H6zM17 12h1v1H17zM19 12h1v1H19zM23 12h1v1H23zM25 12h2v1H25zM2 13h1v1H2zM7 13h1v1H7zM9 13h1v1H9zM11 13h1v1H11zM14 13h1v1H14zM16 13h1v1H16zM18 13h7v1H18zM26 13h1v1H26zM28,13 h1v1H28zM0 14h1v1H0zM3 14h1v1H3zM6 14h1v1H6zM10 14h1v1H10zM14 14h2v1H14zM18 14h1v1H18zM20 14h1v1H20zM24 14h1v1H24zM26 14h1v1H26zM1 15h2v1H1zM4 15h1v1H4zM10 15h3v1H10zM20 15h1v1H20zM23 15h2v1H23zM27 15h1v1H27zM5 16h2v1H5zM10 16h1v1H10zM12 16h6v1H12zM23 16h1v1H23zM26 16h1v1H26zM0 17h1v1H0zM3 17h2v1H3zM10 17h2v1H10zM14 17h1v1H14zM16 17h5v1H16zM22 17h5v1H22zM28,17 h1v1H28zM0 18h1v1H0zM2 18h2v1H2zM6 18h1v1H6zM8 18h1v1H8zM10 18h1v1H10zM12 18h1v1H12zM14 18h4v1H14zM21 18h1v1H21zM23 18h1v1H23zM25 18h2v1H25zM0 19h1v1H0zM2 19h1v1H2zM4 19h2v1H4zM7 19h5v1H7zM14 19h2v1H14zM18 19h1v1H18zM22 19h1v1H22zM24 19h1v1H24zM27 19h1v1H27zM0 20h1v1H0zM2 20h2v1H2zM5 20h2v1H5zM9 20h9v1H9zM20 20h5v1H20zM26,20 h3v1H26zM8 21h6v1H8zM16 21h5v1H16zM24,21 h5v1H24zM0 22h7v1H0zM8 22h2v1H8zM12 22h1v1H12zM14 22h4v1H14zM19 22h2v1H19zM22 22h1v1H22zM24 22h3v1H24zM0 23h1v1H0zM6 23h1v1H6zM9 23h1v1H9zM11 23h2v1H11zM14 23h1v1H14zM16 23h1v1H16zM18 23h3v1H18zM24 23h2v1H24zM27,23 h2v1H27zM0 24h1v1H0zM2 24h3v1H2zM6 24h1v1H6zM8 24h2v1H8zM13 24h3v1H13zM17 24h1v1H17zM20 24h8v1H20zM0 25h1v1H0zM2 25h3v1H2zM6 25h1v1H6zM8 25h1v1H8zM10 25h2v1H10zM16 25h3v1H16zM20 25h1v1H20zM28,25 h1v1H28zM0 26h1v1H0zM2 26h3v1H2zM6 26h1v1H6zM8 26h1v1H8zM12 26h2v1H12zM15 26h1v1H15zM18 26h2v1H18zM21 26h4v1H21zM27 26h1v1H27zM0 27h1v1H0zM6 27h1v1H6zM8 27h3v1H8zM16 27h1v1H16zM20 27h1v1H20zM22 27h4v1H22zM27 27h1v1H27zM0 28h7v1H0zM8 28h7v1H8zM17 28h1v1H17zM19 28h1v1H19zM22 28h1v1H22zM26 28h1v1H26z"
+    fill="#000000"
+    shape-rendering="crispEdges"
+  />
+</svg>
+`;
+
 exports[`SVG rendering renders SVG variation ({ includeMargin: false }) correctly 1`] = `
 <svg
   height="128"
diff --git a/src/__test__/index.test.tsx b/src/__test__/index.test.tsx
index 24687c1..c841e8a 100644
--- a/src/__test__/index.test.tsx
+++ b/src/__test__/index.test.tsx
@@ -63,6 +63,20 @@ const TEST_CONFIGS: PartialQRProps[] = [
       excavate: false,
     },
   },
+  {
+    imageSettings: {
+      ...BASE_IMAGE_SETTINGS,
+      excavate: true,
+    },
+    cellSize: 8,
+  },
+  {
+    imageSettings: {
+      ...BASE_IMAGE_SETTINGS,
+      excavate: false,
+    },
+    cellSize: 8,
+  },
   {value: '1234567890'},
   {value: ['12345', '/ABC/DEF', 'abcDEF123']},
   {value: 'single byte emoji ✅'},
@@ -75,6 +89,8 @@ const TEST_CONFIGS: PartialQRProps[] = [
   {includeMargin: false, marginSize: 8},
   {includeMargin: false, marginSize: 6.5},
   {marginSize: -10},
+  {cellSize: 1},
+  {cellSize: 48},
   {title: 'some descriptive title'},
   // With our really small value, auto versioning would be really small. We
   // aren't encoding version anywhere testable, so this will be a proxy test
diff --git a/src/index.tsx b/src/index.tsx
index b6dd37a..2e91c48 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -134,6 +134,13 @@ type QRProps = {
    * The settings for the embedded image.
    */
   imageSettings?: ImageSettings;
+  /**
+   * The size of each square module in the QR code, in pixels.
+   *
+   * If set, overrides the size property.
+   * @defaultValue undefined
+   */
+  cellSize?: number;
 };
 type QRPropsCanvas = QRProps & React.CanvasHTMLAttributes<HTMLCanvasElement>;
 type QRPropsSVG = QRProps & React.SVGAttributes<SVGSVGElement>;
@@ -215,8 +222,8 @@ function excavateModules(modules: Modules, excavation: Excavation): Modules {
 }
 
 function getImageSettings(
-  cells: Modules,
-  size: number,
+  numCells: number,
+  qrSize: number,
   margin: number,
   imageSettings?: ImageSettings
 ): null | {
@@ -231,19 +238,15 @@ function getImageSettings(
   if (imageSettings == null) {
     return null;
   }
-  const numCells = cells.length + margin * 2;
-  const defaultSize = Math.floor(size * DEFAULT_IMG_SCALE);
-  const scale = numCells / size;
+  const midpoint = numCells / 2 - margin;
+  const defaultSize = Math.floor(qrSize * DEFAULT_IMG_SCALE);
+  const scale = numCells / qrSize;
   const w = (imageSettings.width || defaultSize) * scale;
   const h = (imageSettings.height || defaultSize) * scale;
   const x =
-    imageSettings.x == null
-      ? cells.length / 2 - w / 2
-      : imageSettings.x * scale;
+    imageSettings.x == null ? midpoint - w / 2 : imageSettings.x * scale;
   const y =
-    imageSettings.y == null
-      ? cells.length / 2 - h / 2
-      : imageSettings.y * scale;
+    imageSettings.y == null ? midpoint - h / 2 : imageSettings.y * scale;
   const opacity = imageSettings.opacity == null ? 1 : imageSettings.opacity;
 
   let excavation = null;
@@ -275,6 +278,7 @@ function useQRCode({
   marginSize,
   imageSettings,
   size,
+  cellSize,
   boostLevel,
 }: {
   value: string | string[];
@@ -284,6 +288,7 @@ function useQRCode({
   marginSize?: number;
   imageSettings?: ImageSettings;
   size: number;
+  cellSize: number | undefined;
   boostLevel?: boolean;
 }) {
   let qrcode = React.useMemo(() => {
@@ -302,15 +307,16 @@ function useQRCode({
     );
   }, [value, level, minVersion, boostLevel]);
 
-  const {cells, margin, numCells, calculatedImageSettings} =
+  const {cells, margin, numCells, calculatedImageSettings, qrSize} =
     React.useMemo(() => {
       let cells = qrcode.getModules();
 
       const margin = getMarginSize(includeMargin, marginSize);
       const numCells = cells.length + margin * 2;
+      const qrSize = cellSize === undefined ? size : cellSize * numCells;
       const calculatedImageSettings = getImageSettings(
-        cells,
-        size,
+        numCells,
+        qrSize,
         margin,
         imageSettings
       );
@@ -319,8 +325,9 @@ function useQRCode({
         margin,
         numCells,
         calculatedImageSettings,
+        qrSize,
       };
-    }, [qrcode, size, imageSettings, includeMargin, marginSize]);
+    }, [qrcode, size, cellSize, imageSettings, includeMargin, marginSize]);
 
   return {
     qrcode,
@@ -328,6 +335,7 @@ function useQRCode({
     cells,
     numCells,
     calculatedImageSettings,
+    qrSize,
   };
 }
 
@@ -358,6 +366,7 @@ const QRCodeCanvas = React.forwardRef<HTMLCanvasElement, QRPropsCanvas>(
       boostLevel,
       marginSize,
       imageSettings,
+      cellSize,
       ...extraProps
     } = props;
     const {style, ...otherProps} = extraProps;
@@ -384,16 +393,18 @@ const QRCodeCanvas = React.forwardRef<HTMLCanvasElement, QRPropsCanvas>(
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const [isImgLoaded, setIsImageLoaded] = React.useState(false);
 
-    const {margin, cells, numCells, calculatedImageSettings} = useQRCode({
-      value,
-      level,
-      minVersion,
-      boostLevel,
-      includeMargin,
-      marginSize,
-      imageSettings,
-      size,
-    });
+    const {margin, cells, numCells, calculatedImageSettings, qrSize} =
+      useQRCode({
+        value,
+        level,
+        minVersion,
+        boostLevel,
+        includeMargin,
+        marginSize,
+        imageSettings,
+        size,
+        cellSize,
+      });
 
     React.useEffect(() => {
       // Always update the canvas. It's cheap enough and we want to be correct
@@ -429,8 +440,8 @@ const QRCodeCanvas = React.forwardRef<HTMLCanvasElement, QRPropsCanvas>(
         // result in some potentially unwanted single pixel issues between
         // blocks, only in environments that don't support Path2D.
         const pixelRatio = window.devicePixelRatio || 1;
-        canvas.height = canvas.width = size * pixelRatio;
-        const scale = (size / numCells) * pixelRatio;
+        canvas.height = canvas.width = qrSize * pixelRatio;
+        const scale = (qrSize / numCells) * pixelRatio;
         ctx.scale(scale, scale);
 
         // Draw solid background, only paint dark modules.
@@ -473,7 +484,7 @@ const QRCodeCanvas = React.forwardRef<HTMLCanvasElement, QRPropsCanvas>(
       setIsImageLoaded(false);
     }, [imgSrc]);
 
-    const canvasStyle = {height: size, width: size, ...style};
+    const canvasStyle = {height: qrSize, width: qrSize, ...style};
     let img = null;
     if (imgSrc != null) {
       img = (
@@ -493,8 +504,8 @@ const QRCodeCanvas = React.forwardRef<HTMLCanvasElement, QRPropsCanvas>(
       <>
         <canvas
           style={canvasStyle}
-          height={size}
-          width={size}
+          height={qrSize}
+          width={qrSize}
           ref={setCanvasRef}
           role="img"
           {...otherProps}
@@ -520,19 +531,22 @@ const QRCodeSVG = React.forwardRef<SVGSVGElement, QRPropsSVG>(
       title,
       marginSize,
       imageSettings,
+      cellSize,
       ...otherProps
     } = props;
 
-    const {margin, cells, numCells, calculatedImageSettings} = useQRCode({
-      value,
-      level,
-      minVersion,
-      boostLevel,
-      includeMargin,
-      marginSize,
-      imageSettings,
-      size,
-    });
+    const {margin, cells, numCells, calculatedImageSettings, qrSize} =
+      useQRCode({
+        value,
+        level,
+        minVersion,
+        boostLevel,
+        includeMargin,
+        marginSize,
+        imageSettings,
+        size,
+        cellSize,
+      });
 
     let cellsToDraw = cells;
     let image = null;
@@ -569,8 +583,8 @@ const QRCodeSVG = React.forwardRef<SVGSVGElement, QRPropsSVG>(
 
     return (
       <svg
-        height={size}
-        width={size}
+        height={qrSize}
+        width={qrSize}
         viewBox={`0 0 ${numCells} ${numCells}`}
         ref={forwardedRef}
         role="img"