diff --git a/src/components/GraphViewport.tsx b/src/components/GraphViewport.tsx
index 0e50c1a5..8d8b615d 100644
--- a/src/components/GraphViewport.tsx
+++ b/src/components/GraphViewport.tsx
@@ -1,9 +1,14 @@
 import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import Stack from '@mui/material/Stack';
 import { Component, createRef } from 'react';
 
 import { renderSvg } from '../graph/svg-renderer';
 import { TypeGraph } from '../graph/type-graph';
 import { Viewport } from '../graph/viewport';
+import ZoomInIcon from './icons/zoom-in.svg';
+import ZoomOutIcon from './icons/zoom-out.svg';
+import ZoomResetIcon from './icons/zoom-reset.svg';
 import LoadingAnimation from './utils/LoadingAnimation';
 
 interface GraphViewportProps {
@@ -119,6 +124,7 @@ export default class GraphViewport extends Component<
 
   render() {
     const isLoading = this.state.svgViewport == null;
+    const { svgViewport } = this.state;
     return (
       <Box
         sx={(theme) => ({
@@ -145,6 +151,41 @@ export default class GraphViewport extends Component<
             },
           }}
         />
+        {!isLoading && (
+          <Stack
+            alignItems="center"
+            spacing={0.8}
+            padding={1}
+            position="absolute"
+            bottom={0}
+            right={0}
+          >
+            <IconButton
+              aria-label="Zoom in"
+              color="secondary"
+              sx={{ width: 18 }}
+              onClick={() => svgViewport?.zoomIn()}
+            >
+              <ZoomInIcon />
+            </IconButton>
+            <IconButton
+              aria-label="Reset zoom"
+              color="secondary"
+              sx={{ width: 55 }}
+              onClick={() => svgViewport?.reset()}
+            >
+              <ZoomResetIcon />
+            </IconButton>
+            <IconButton
+              aria-label="Zoom out"
+              color="secondary"
+              sx={{ width: 18 }}
+              onClick={() => svgViewport?.zoomOut()}
+            >
+              <ZoomOutIcon />
+            </IconButton>
+          </Stack>
+        )}
         {isLoading && <LoadingAnimation />}
       </Box>
     );
diff --git a/src/components/icons/zoom-in.svg b/src/components/icons/zoom-in.svg
new file mode 100644
index 00000000..2883f416
--- /dev/null
+++ b/src/components/icons/zoom-in.svg
@@ -0,0 +1,11 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xml:space="preserve"
+  width="18"
+  height="18"
+>
+  <path
+    fill="currentColor"
+    d="m 14.980047,8.2499999 v 1.5000002 q 0,0.3046879 -0.222659,0.5273439 -0.222658,0.222654 -0.527343,0.222654 h -3.750001 v 3.75 q 0,0.304687 -0.222658,0.527344 Q 10.034732,15 9.7300439,15 H 8.2300441 Q 7.9253567,15 7.7027002,14.777342 7.4800418,14.554688 7.4800418,14.249998 V 10.5 H 3.7300445 Q 3.4253561,10.5 3.2027004,10.277346 2.9800444,10.054693 2.9800444,9.7500025 V 8.2499999 q 0,-0.3046875 0.222656,-0.5273435 0.222656,-0.2226583 0.527344,-0.2226583 H 7.4800446 V 3.75 q 0,-0.3046874 0.2226584,-0.5273438 0.2226537,-0.222656 0.527342,-0.222656 h 1.4999999 q 0.3046871,0 0.5273431,0.222656 Q 10.480046,3.4453127 10.480046,3.75 V 7.5 h 3.750001 q 0.304683,0 0.527345,0.2226583 0.222658,0.2226537 0.222655,0.5273416 z M 17.980044,14.625 V 3.375 q 0,-1.3945312 -0.990233,-2.38476562 Q 15.999575,0 14.605044,0 H 3.3550446 Q 1.9605134,0 0.97027837,0.99023438 -0.01995565,1.9804688 -0.01995565,3.375 v 11.25 q 0,1.394531 0.99023402,2.384766 Q 1.9605134,18 3.3550446,18 H 14.605044 q 1.394531,0 2.384767,-0.990234 0.990233,-0.990235 0.990233,-2.384766 z"
+  />
+</svg>
diff --git a/src/components/icons/zoom-out.svg b/src/components/icons/zoom-out.svg
new file mode 100644
index 00000000..a3cec696
--- /dev/null
+++ b/src/components/icons/zoom-out.svg
@@ -0,0 +1,11 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xml:space="preserve"
+  width="18"
+  height="18"
+  fill="currentColor"
+>
+  <path
+    d="m 15,8.25 v 1.5 q 0,0.304688 -0.222656,0.527344 Q 14.554688,10.5 14.25,10.5 H 3.75 Q 3.4453125,10.5 3.2226562,10.277344 3,10.054688 3,9.75 V 8.25 Q 3,7.9453125 3.2226562,7.7226563 3.4453125,7.5 3.75,7.5 h 10.5 q 0.304688,0 0.527344,0.2226563 Q 15,7.9453125 15,8.25 Z m 3,6.375 V 3.375 Q 18,1.9804688 17.009766,0.9902344 16.019531,0 14.625,0 H 3.375 Q 1.9804688,0 0.9902344,0.9902344 0,1.9804688 0,3.375 v 11.25 Q 0,16.019531 0.9902344,17.009766 1.9804688,18 3.375,18 h 11.25 q 1.394531,0 2.384766,-0.990234 Q 18,16.019531 18,14.625 Z"
+  />
+</svg>
diff --git a/src/components/icons/zoom-reset.svg b/src/components/icons/zoom-reset.svg
new file mode 100644
index 00000000..7e5bd959
--- /dev/null
+++ b/src/components/icons/zoom-reset.svg
@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xml:space="preserve"
+  width="55"
+  height="18"
+  fill="currentColor"
+>
+  <path
+    d="M 9.6773243,5.9405903 C 9.4567298,5.820787 9.1261352,5.7608853 8.6849461,5.7608853 H 6.3157837 v 2.7386561 h 2.3097029 c 0.4587294,0 0.803,-0.055475 1.0325135,-0.1658365 C 10.063811,8.1401311 10.266865,7.7574099 10.266865,7.1855411 10.266271,6.5676395 10.070054,6.1527542 9.6773243,5.9405903 Z"
+  />
+  <path
+    d="M 50.460567,0 H 4.5626216 C 1.9627568,0 0,1.5367869 0,3.3462296 V 14.81341 C 0,16.622853 1.9627568,18 4.5626216,18 H 50.460567 C 53.060432,18 55,16.622853 55,14.813705 V 3.3462296 C 55,1.5367869 53.060432,0 50.460567,0 Z M 12.586675,14.184296 H 10.217513 C 10.152403,13.958262 10.106027,13.776197 10.078081,13.637803 10.022191,13.351869 9.992162,13.059148 9.987406,12.759344 L 9.9734324,11.811836 C 9.9645161,11.161771 9.8515402,10.728295 9.6339189,10.511705 9.4162975,10.295115 9.0087026,10.186525 8.4111348,10.186525 H 6.3151891 V 14.184 H 4.2177567 V 3.9900984 H 9.130297 c 0.7019191,0.013869 1.242108,0.1015082 1.62027,0.2629181 0.378162,0.1614098 0.698947,0.3989508 0.96146,0.7123278 0.217324,0.2581967 0.389459,0.5441312 0.516406,0.8575082 0.126946,0.3133771 0.19027,0.6707214 0.19027,1.0720329 0,0.4842295 -0.123082,0.9601967 -0.369244,1.4281963 -0.246162,0.4680004 -0.652568,0.7987871 -1.219513,0.9923609 0.473892,0.1891475 0.80954,0.457672 1.006946,0.8055744 0.197405,0.347901 0.296109,0.879344 0.296109,1.594033 v 0.684589 c 0,0.46564 0.01873,0.781378 0.05649,0.947508 0.05649,0.262919 0.188783,0.456493 0.396298,0.581017 v 0.256132 z m 9.734108,0 H 14.537541 V 3.9900984 h 7.532324 v 1.8050164 h -5.434892 v 2.1647213 h 4.988946 V 9.730328 h -4.988946 v 2.621213 h 5.68581 z m 8.597244,-0.660394 c -0.725405,0.615541 -1.75019,0.923311 -3.074054,0.923311 -1.352108,0 -2.415541,-0.303049 -3.190297,-0.909442 -0.774757,-0.606394 -1.162136,-1.439705 -1.162136,-2.50023 h 2.048676 c 0.0666,0.46564 0.196811,0.813836 0.391243,1.044296 0.355568,0.419606 0.965027,0.629409 1.828379,0.629409 0.517,0 0.936783,-0.05547 1.259351,-0.165836 0.611838,-0.212164 0.917757,-0.606394 0.917757,-1.182689 0,-0.336688 -0.149838,-0.59695 -0.449514,-0.781377 C 29.187756,10.40164 28.712379,10.24259 28.061594,10.104197 L 26.949703,9.8622297 C 25.856838,9.6226229 25.106162,9.3620659 24.697379,9.0808529 24.00527,8.6104917 23.659216,7.8751479 23.659216,6.8745248 c 0,-0.9129837 0.338622,-1.6713444 1.015864,-2.2753772 0.677244,-0.6040328 1.671703,-0.9059017 2.983676,-0.9059017 1.095541,0 2.030244,0.2847541 2.803811,0.8542624 0.773567,0.5695082 1.179081,1.3957377 1.216838,2.4792788 H 29.616757 C 29.578703,6.4136066 29.302513,5.9777706 28.788188,5.7195739 28.445108,5.5490164 28.01908,5.4637377 27.509513,5.4637377 c -0.566945,0 -1.019135,0.1106558 -1.357162,0.3319673 -0.338324,0.2213115 -0.507189,0.5302623 -0.507189,0.9268522 0,0.3641313 0.166784,0.6361971 0.500054,0.8161973 0.214352,0.1198028 0.668919,0.260557 1.364297,0.4219666 l 1.802514,0.4219673 c 0.789919,0.1844264 1.381838,0.4311151 1.776351,0.7400661 0.612135,0.4795078 0.918352,1.1735405 0.918352,2.0818025 -5.95e-4,0.930394 -0.363298,1.703804 -1.088703,2.319345 z m 10.439,0.660394 H 33.573784 V 3.9900984 h 7.532324 v 1.8050164 h -5.434892 v 2.1647213 h 4.988946 V 9.730328 h -4.988946 v 2.621213 h 5.685811 z M 50.49208,5.7954099 H 47.419215 V 14.18459 H 45.259054 V 5.7954099 H 42.172216 V 3.9903935 h 8.319568 v 1.8050164 z"
+  />
+</svg>
diff --git a/src/components/viewport.css b/src/components/viewport.css
index 4b20fd57..4cb021d9 100644
--- a/src/components/viewport.css
+++ b/src/components/viewport.css
@@ -4,13 +4,6 @@ g.graph > polygon {
   fill: transparent;
 }
 
-#svg-pan-zoom-controls {
-  & path {
-    fill-opacity: 0.75;
-    fill: var(--field-name-color);
-  }
-}
-
 /* Nodes Styling */
 .node {
   pointer-events: bounding-box;
diff --git a/src/graph/viewport.ts b/src/graph/viewport.ts
index 29a349c1..c5845abc 100644
--- a/src/graph/viewport.ts
+++ b/src/graph/viewport.ts
@@ -12,6 +12,9 @@ interface Point {
 interface Instance {
   resize(): Instance;
   zoom(scale: number): void;
+  zoomIn(): void;
+  zoomOut(): void;
+  reset(): void;
   getPan(): Point;
   getZoom(): number;
   pan(point: Point): Instance;
@@ -73,7 +76,6 @@ export class Viewport {
       zoomScaleSensitivity: 0.25,
       minZoom: 0.95,
       maxZoom: this.maxZoom,
-      controlIconsEnabled: true,
     });
     this.zoomer.zoom(0.95);
   }
@@ -220,6 +222,18 @@ export class Viewport {
     });
   }
 
+  zoomIn() {
+    this.zoomer.zoomIn();
+  }
+
+  zoomOut() {
+    this.zoomer.zoomOut();
+  }
+
+  reset() {
+    this.zoomer.reset();
+  }
+
   destroy() {
     this.resizeObserver.disconnect();
     try {
diff --git a/tests/demo.spec.ts-snapshots/choose-github-preset-Demo-linux.png b/tests/demo.spec.ts-snapshots/choose-github-preset-Demo-linux.png
index 1a425e1b..3fe22777 100644
Binary files a/tests/demo.spec.ts-snapshots/choose-github-preset-Demo-linux.png and b/tests/demo.spec.ts-snapshots/choose-github-preset-Demo-linux.png differ
diff --git a/tests/demo.spec.ts-snapshots/choose-shopify-storefront-preset-Demo-linux.png b/tests/demo.spec.ts-snapshots/choose-shopify-storefront-preset-Demo-linux.png
index 0bacdb41..89adfb2f 100644
Binary files a/tests/demo.spec.ts-snapshots/choose-shopify-storefront-preset-Demo-linux.png and b/tests/demo.spec.ts-snapshots/choose-shopify-storefront-preset-Demo-linux.png differ
diff --git a/tests/demo.spec.ts-snapshots/choose-star-wars-preset-Demo-linux.png b/tests/demo.spec.ts-snapshots/choose-star-wars-preset-Demo-linux.png
index 4d879542..851346ad 100644
Binary files a/tests/demo.spec.ts-snapshots/choose-star-wars-preset-Demo-linux.png and b/tests/demo.spec.ts-snapshots/choose-star-wars-preset-Demo-linux.png differ
diff --git a/tests/demo.spec.ts-snapshots/choose-yelp-preset-Demo-linux.png b/tests/demo.spec.ts-snapshots/choose-yelp-preset-Demo-linux.png
index 68eb9fb7..94b30497 100644
Binary files a/tests/demo.spec.ts-snapshots/choose-yelp-preset-Demo-linux.png and b/tests/demo.spec.ts-snapshots/choose-yelp-preset-Demo-linux.png differ
diff --git a/tests/demo.spec.ts-snapshots/copy-introspection-button-click-Demo-linux.png b/tests/demo.spec.ts-snapshots/copy-introspection-button-click-Demo-linux.png
index 00e1fd8f..1a93e9cd 100644
Binary files a/tests/demo.spec.ts-snapshots/copy-introspection-button-click-Demo-linux.png and b/tests/demo.spec.ts-snapshots/copy-introspection-button-click-Demo-linux.png differ
diff --git a/tests/demo.spec.ts-snapshots/demo-after-resize-Demo-linux.png b/tests/demo.spec.ts-snapshots/demo-after-resize-Demo-linux.png
index d52cbd38..7060b416 100644
Binary files a/tests/demo.spec.ts-snapshots/demo-after-resize-Demo-linux.png and b/tests/demo.spec.ts-snapshots/demo-after-resize-Demo-linux.png differ
diff --git a/tests/demo.spec.ts-snapshots/demo-before-resize-Demo-linux.png b/tests/demo.spec.ts-snapshots/demo-before-resize-Demo-linux.png
index 7eed9339..d15df07e 100644
Binary files a/tests/demo.spec.ts-snapshots/demo-before-resize-Demo-linux.png and b/tests/demo.spec.ts-snapshots/demo-before-resize-Demo-linux.png differ
diff --git a/tests/demo.spec.ts-snapshots/display-introspection-Demo-linux.png b/tests/demo.spec.ts-snapshots/display-introspection-Demo-linux.png
index bd4d8f87..7dfb9f66 100644
Binary files a/tests/demo.spec.ts-snapshots/display-introspection-Demo-linux.png and b/tests/demo.spec.ts-snapshots/display-introspection-Demo-linux.png differ
diff --git a/tests/demo.spec.ts-snapshots/display-schema-from-url-Demo-linux.png b/tests/demo.spec.ts-snapshots/display-schema-from-url-Demo-linux.png
index bd4d8f87..7dfb9f66 100644
Binary files a/tests/demo.spec.ts-snapshots/display-schema-from-url-Demo-linux.png and b/tests/demo.spec.ts-snapshots/display-schema-from-url-Demo-linux.png differ
diff --git a/tests/demo.spec.ts-snapshots/display-sdl-Demo-linux.png b/tests/demo.spec.ts-snapshots/display-sdl-Demo-linux.png
index bd4d8f87..7dfb9f66 100644
Binary files a/tests/demo.spec.ts-snapshots/display-sdl-Demo-linux.png and b/tests/demo.spec.ts-snapshots/display-sdl-Demo-linux.png differ
diff --git a/tests/demo.spec.ts-snapshots/display-sdl-with-unknown-directives-Demo-linux.png b/tests/demo.spec.ts-snapshots/display-sdl-with-unknown-directives-Demo-linux.png
index e4561e95..32a3492f 100644
Binary files a/tests/demo.spec.ts-snapshots/display-sdl-with-unknown-directives-Demo-linux.png and b/tests/demo.spec.ts-snapshots/display-sdl-with-unknown-directives-Demo-linux.png differ
diff --git a/tests/demo.spec.ts-snapshots/fill-introspection-Demo-linux.png b/tests/demo.spec.ts-snapshots/fill-introspection-Demo-linux.png
index 526c7b85..7d86364e 100644
Binary files a/tests/demo.spec.ts-snapshots/fill-introspection-Demo-linux.png and b/tests/demo.spec.ts-snapshots/fill-introspection-Demo-linux.png differ
diff --git a/tests/demo.spec.ts-snapshots/fill-sdl-Demo-linux.png b/tests/demo.spec.ts-snapshots/fill-sdl-Demo-linux.png
index 38f04203..61f259be 100644
Binary files a/tests/demo.spec.ts-snapshots/fill-sdl-Demo-linux.png and b/tests/demo.spec.ts-snapshots/fill-sdl-Demo-linux.png differ
diff --git a/tests/demo.spec.ts-snapshots/loaded-demo-Demo-linux.png b/tests/demo.spec.ts-snapshots/loaded-demo-Demo-linux.png
index bc1a9650..cb67d94d 100644
Binary files a/tests/demo.spec.ts-snapshots/loaded-demo-Demo-linux.png and b/tests/demo.spec.ts-snapshots/loaded-demo-Demo-linux.png differ
diff --git a/tests/demo.spec.ts-snapshots/open-dialog-Demo-linux.png b/tests/demo.spec.ts-snapshots/open-dialog-Demo-linux.png
index 0317acf5..ec6da2fa 100644
Binary files a/tests/demo.spec.ts-snapshots/open-dialog-Demo-linux.png and b/tests/demo.spec.ts-snapshots/open-dialog-Demo-linux.png differ
diff --git a/tests/demo.spec.ts-snapshots/show-github-preset-Demo-linux.png b/tests/demo.spec.ts-snapshots/show-github-preset-Demo-linux.png
index 2d43e0c3..3cea5393 100644
Binary files a/tests/demo.spec.ts-snapshots/show-github-preset-Demo-linux.png and b/tests/demo.spec.ts-snapshots/show-github-preset-Demo-linux.png differ
diff --git a/tests/demo.spec.ts-snapshots/show-shopify-storefront-preset-Demo-linux.png b/tests/demo.spec.ts-snapshots/show-shopify-storefront-preset-Demo-linux.png
index b5ea8c60..c26b3086 100644
Binary files a/tests/demo.spec.ts-snapshots/show-shopify-storefront-preset-Demo-linux.png and b/tests/demo.spec.ts-snapshots/show-shopify-storefront-preset-Demo-linux.png differ
diff --git a/tests/demo.spec.ts-snapshots/show-star-wars-preset-Demo-linux.png b/tests/demo.spec.ts-snapshots/show-star-wars-preset-Demo-linux.png
index bc1a9650..cb67d94d 100644
Binary files a/tests/demo.spec.ts-snapshots/show-star-wars-preset-Demo-linux.png and b/tests/demo.spec.ts-snapshots/show-star-wars-preset-Demo-linux.png differ
diff --git a/tests/demo.spec.ts-snapshots/show-yelp-preset-Demo-linux.png b/tests/demo.spec.ts-snapshots/show-yelp-preset-Demo-linux.png
index 2188c6ed..5dc0e294 100644
Binary files a/tests/demo.spec.ts-snapshots/show-yelp-preset-Demo-linux.png and b/tests/demo.spec.ts-snapshots/show-yelp-preset-Demo-linux.png differ
diff --git a/tests/demo.spec.ts-snapshots/switch-to-introspection-tab-Demo-linux.png b/tests/demo.spec.ts-snapshots/switch-to-introspection-tab-Demo-linux.png
index 94834520..2caa167f 100644
Binary files a/tests/demo.spec.ts-snapshots/switch-to-introspection-tab-Demo-linux.png and b/tests/demo.spec.ts-snapshots/switch-to-introspection-tab-Demo-linux.png differ
diff --git a/tests/demo.spec.ts-snapshots/switch-to-presets-tab-Demo-linux.png b/tests/demo.spec.ts-snapshots/switch-to-presets-tab-Demo-linux.png
index 0317acf5..ec6da2fa 100644
Binary files a/tests/demo.spec.ts-snapshots/switch-to-presets-tab-Demo-linux.png and b/tests/demo.spec.ts-snapshots/switch-to-presets-tab-Demo-linux.png differ
diff --git a/tests/demo.spec.ts-snapshots/switch-to-sdl-tab-Demo-linux.png b/tests/demo.spec.ts-snapshots/switch-to-sdl-tab-Demo-linux.png
index 115ca960..f78f12ad 100644
Binary files a/tests/demo.spec.ts-snapshots/switch-to-sdl-tab-Demo-linux.png and b/tests/demo.spec.ts-snapshots/switch-to-sdl-tab-Demo-linux.png differ
diff --git a/tests/webpack.spec.ts-snapshots/loaded-webpack-example-WebpackExample-linux.png b/tests/webpack.spec.ts-snapshots/loaded-webpack-example-WebpackExample-linux.png
index d9ddf9c4..639d3218 100644
Binary files a/tests/webpack.spec.ts-snapshots/loaded-webpack-example-WebpackExample-linux.png and b/tests/webpack.spec.ts-snapshots/loaded-webpack-example-WebpackExample-linux.png differ