diff --git a/client/src/app/scenograph/overlays/map.js b/client/src/app/scenograph/overlays/map.js
index c935cd6e..584c5d8d 100644
--- a/client/src/app/scenograph/overlays/map.js
+++ b/client/src/app/scenograph/overlays/map.js
@@ -34,6 +34,7 @@ export default class Map {
         // Create the fov icon
         this.fov = document.createElement('div');
         this.fov.id = 'map-fov';
+        this.fov.innerHTML = this.icons.fov;
         this.container.appendChild(this.fov);
 
     }
@@ -44,6 +45,7 @@ export default class Map {
         iconTemplate.innerHTML = document.querySelector('#templates #map_icons').innerHTML;
 
         icons.aircraft = iconTemplate.querySelector('.aircraft').innerHTML;
+        icons.fov = iconTemplate.querySelector('.fov').innerHTML;
         icons.ship = iconTemplate.querySelector('.ship').innerHTML;
         icons.special = iconTemplate.querySelector('.special').innerHTML;
         icons.structure = iconTemplate.querySelector('.structure').innerHTML;
diff --git a/client/src/assets/map_icons/fov.svg b/client/src/assets/map_icons/fov.svg
new file mode 100644
index 00000000..0dd8525b
--- /dev/null
+++ b/client/src/assets/map_icons/fov.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1.06474,0,0,1.21685,-6.47429,-21.6849)">
+        <path d="M100,20L20,180L100,120L180,180L100,20Z"  style="stroke:none;fill:#333);fill-opacity:0.67;" />
+    </g>
+</svg>
diff --git a/client/src/styles/overlays/game.styl b/client/src/styles/overlays/game.styl
index 1f267456..d88edb8b 100644
--- a/client/src/styles/overlays/game.styl
+++ b/client/src/styles/overlays/game.styl
@@ -110,14 +110,10 @@
         left: @css{ min(2.5vw, 2.5vh) };
 
         #map-fov {
-            --p: 3.5px; /* control the shape (can be percentage) */
-            height: 10px;
-            aspect-ratio: 3/2;
-            clip-path: polygon(var(--p) 100%,calc(100% - var(--p)) 100%,100% 0,0 0);
-            background: radial-gradient(rgba(#FFF, 0.35) 5%, rgba(#FFF, 0.5) 95%);
+            height: 15px;
             position: absolute;
-            left: calc( 50% - 6.5px );
-            top: calc( 50% - 5px );
+            left: calc( 50% - 7.5px );
+            top: calc( 50% - 7.5px );
         }
 
         .marker {
diff --git a/client/src/templates/partials/overlays/map-icons.pug b/client/src/templates/partials/overlays/map-icons.pug
index ac9ff40b..77d55421 100644
--- a/client/src/templates/partials/overlays/map-icons.pug
+++ b/client/src/templates/partials/overlays/map-icons.pug
@@ -1,3 +1,5 @@
+.fov
+    include ../../../assets/map_icons/fov.svg
 .aircraft
     include ../../../assets/map_icons/aircraft.svg
 .ship