diff --git a/src/app/components/network-legend/network-legend.component.html b/src/app/components/network-legend/network-legend.component.html
index 1b36d56a9e286e8bfbf0ef9d91e39920b8b12ddf..5f666c6c5aa5b936d2b25cb667b6d11aa7d6c0d7 100644
--- a/src/app/components/network-legend/network-legend.component.html
+++ b/src/app/components/network-legend/network-legend.component.html
@@ -22,11 +22,9 @@
               </span>
             </td>
             <td *ngSwitchCase="'hexagon'">
-              <div class="node hexagon">
-                <div class="hexagon-in1">
-                  <div class="hexagon-in2" [style.background-color]=nodeGroup.value.color></div>
-                </div>
-              </div>
+              <span class="node hexagon" [style.color]=nodeGroup.value.color>
+                &#x2B23;
+              </span>
             </td>
             <td *ngSwitchCase="'triangle'">
               <span class="node triangle" [style.border-bottom-color]=nodeGroup.value.color>
diff --git a/src/app/components/network-legend/network-legend.component.scss b/src/app/components/network-legend/network-legend.component.scss
index 67e23ad7b8f4e1a6ba9fcc08e41591657a9484f5..ca7cfadd256a990abc0168f1741d17a23e826509 100644
--- a/src/app/components/network-legend/network-legend.component.scss
+++ b/src/app/components/network-legend/network-legend.component.scss
@@ -11,9 +11,9 @@ div.legend {
     max-width: 20vw;
   }
   tr.list-item{
-    padding: 0;
+    line-height: calc(#{$legend-row-height} / 2);
     td{
-      height: $legend-circle-size;
+      height: $legend-row-height;
       vertical-align: middle !important;
       padding: 0 !important;
       .text{
@@ -108,47 +108,9 @@ div.legend {
         display: inline-block;
       }
       .hexagon {
-        overflow: hidden;
-        visibility: hidden;
-        -webkit-transform: rotate(120deg);
-           -moz-transform: rotate(120deg);
-            -ms-transform: rotate(120deg);
-             -o-transform: rotate(120deg);
-                transform: rotate(120deg);
-        cursor: pointer;
-        .hexagon {
-          overflow: hidden;
-          visibility: hidden;
-          -webkit-transform: rotate(120deg);
-             -moz-transform: rotate(120deg);
-              -ms-transform: rotate(120deg);
-               -o-transform: rotate(120deg);
-                  transform: rotate(120deg);
-          cursor: pointer;
-          }
-      .hexagon-in1 {
-          overflow: hidden;
-          width: 100%;
-          height: 100%;
-          -webkit-transform: rotate(-60deg);
-             -moz-transform: rotate(-60deg);
-              -ms-transform: rotate(-60deg);
-               -o-transform: rotate(-60deg);
-                  transform: rotate(-60deg);
-          }
-      .hexagon-in2 {
-          width: 100%;
-          height: 100%;
-          background-repeat: no-repeat;
-          background-position: 50%;
-          visibility: visible;
-          -webkit-transform: rotate(-60deg);
-             -moz-transform: rotate(-60deg);
-              -ms-transform: rotate(-60deg);
-               -o-transform: rotate(-60deg);
-                  transform: rotate(-60deg);
-          }
-        }
+        font-size: $legend-hexagon-font-size;
+        display: inline-block;
+      }
       .legend-icon {
         width: $legend-row-height;
         height: $legend-row-height;
diff --git a/src/variables.scss b/src/variables.scss
index 2170d7aa3517552cb59a5147a0e6741caf649ea1..b3e7dcceb31be59eade74da88b57290f4c5ad8d4 100644
--- a/src/variables.scss
+++ b/src/variables.scss
@@ -12,6 +12,7 @@ $legend-edge-height: 3px;
 $legend-star-color: #FC0;
 $legend-triangle-size: $legend-row-height;
 $legend-triangle-height: 29px;
+$legend-hexagon-font-size: 38px;
 
 $height: 100%;