Tried SVG

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

index.html

@@ -32,7 +32,10 @@
         </div>
         <div class="nav-container">
             <p class="nav-align">Backend Status</p>
-            <span class="connected nav-align backend-status-indicator">●</span>
+            <svg class="nav-align connected" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+                <circle r="1" cx="1" cy="1" />
+            </svg>
+            <!--<span class="connected nav-align backend-status-indicator">●</span>-->
             <button class="btn btn-primary nav-align" id="checkBackendButton">Reload</button>
         </div>
     </nav>

stylesheet.css

@@ -1,5 +1,5 @@
 .nav-align {
-  height: 4em;
+  width: fit-content;
   vertical-align: middle;
   padding-left: 20px;
   padding-right: 20px;
@@ -10,10 +10,7 @@
   display: inline-flex;
   position: relative;
   float: right;
-}
-
-.backend-status-indicator {
-  font-size: 4em;
+  align-items: center;
 }
 
 .connected {