diff --git a/src/app/common/modals/modals.less b/src/app/common/modals/modals.less
index b3505402..dd899af3 100644
--- a/src/app/common/modals/modals.less
+++ b/src/app/common/modals/modals.less
@@ -278,32 +278,35 @@
         .control {
         }
 
-        .tab-color-icon.color-green {
-            color: desaturate(@tab-green, 30%);
+        .tab-color-icon.color-default path {
+            fill: @tab-green;
         }
-        .tab-color-icon.color-orange {
-            color: desaturate(@tab-orange, 30%);
+        .tab-color-icon.color-green path {
+            fill: @tab-green;
         }
-        .tab-color-icon.color-red {
-            color: desaturate(@tab-red, 20%);
+        .tab-color-icon.color-orange path {
+            fill: @tab-orange;
         }
-        .tab-color-icon.color-yellow {
-            color: desaturate(@tab-yellow, 30%);
+        .tab-color-icon.color-red path {
+            fill: @tab-red;
         }
-        .tab-color-icon.color-blue {
-            color: desaturate(@tab-blue, 20%);
+        .tab-color-icon.color-yellow path {
+            fill: @tab-yellow;
         }
-        .tab-color-icon.color-magenta {
-            color: desaturate(@tab-magenta, 20%);
+        .tab-color-icon.color-blue path {
+            fill: @tab-blue;
         }
-        .tab-color-icon.color-cyan {
-            color: desaturate(@tab-cyan, 20%);
+        .tab-color-icon.color-magenta path {
+            fill: @tab-magenta;
         }
-        .tab-color-icon.color-white {
-            color: @term-white;
+        .tab-color-icon.color-cyan path {
+            fill: @tab-cyan;
         }
-        .tab-color-icon.color-black {
-            color: lighten(@tab-black, 20%);
+        .tab-color-icon.color-white path {
+            fill: @tab-white;
+        }
+        .tab-color-icon.color-black path {
+            fill: @tab-black
         }
 
         .tab-colors {
@@ -321,6 +324,15 @@
                 width: 100px;
             }
 
+            .tab-color-icon {
+                width: 1.1em;
+                vertical-align: middle;
+            }
+
+            .tab-color-name {
+                margin-left: 1em;
+            }
+
             .tab-color-select {
                 cursor: pointer;
                 margin: 5px;
diff --git a/src/app/common/modals/settings.tsx b/src/app/common/modals/settings.tsx
index adda6659..4985c424 100644
--- a/src/app/common/modals/settings.tsx
+++ b/src/app/common/modals/settings.tsx
@@ -9,6 +9,7 @@ import { Toggle, InlineSettingsTextEdit, SettingsError, InfoMessage } from "../c
 import { LineType, RendererPluginType, ClientDataType, CommandRtnType } from "../../../types/types";
 import { PluginModel } from "../../../plugins/plugins";
 import * as util from "../../../util/util";
+import { ReactComponent as SquareIcon } from "../../assets/icons/tab/square.svg";
 
 import "./modals.less";
 
@@ -240,10 +241,8 @@ class ScreenSettingsModal extends React.Component<{ sessionId: string; screenId:
                             <div className="settings-input">
                                 <div className="tab-colors">
                                     <div className="tab-color-cur">
-                                        <span className={cn("icon tab-color-icon", "color-" + screen.getTabColor())}>
-                                            <i className="fa-sharp fa-solid fa-square" />
-                                        </span>
-                                        <span>{screen.getTabColor()}</span>
+                                        <SquareIcon className={cn("tab-color-icon", "color-" + screen.getTabColor())}/>
+                                        <span className="tab-color-name">{screen.getTabColor()}</span>
                                     </div>
                                     <div className="tab-color-sep">|</div>
                                     <For each="color" of={TabColors}>
@@ -252,9 +251,7 @@ class ScreenSettingsModal extends React.Component<{ sessionId: string; screenId:
                                             className="tab-color-select"
                                             onClick={() => this.selectTabColor(color)}
                                         >
-                                            <span className={cn("tab-color-icon", "color-" + color)}>
-                                                <i className="fa-sharp fa-solid fa-square" />
-                                            </span>
+                                            <SquareIcon className={cn("tab-color-icon", "color-" + color)}/>
                                         </div>
                                     </For>
                                 </div>