diff --git a/src/renderer/coremods/settings/icons/Close.tsx b/src/renderer/coremods/settings/icons/Close.tsx
new file mode 100644
index 000000000..013f7499c
--- /dev/null
+++ b/src/renderer/coremods/settings/icons/Close.tsx
@@ -0,0 +1,7 @@
+import { MouseEventHandler } from "react";
+
+export default (props: { onClick?: MouseEventHandler }): React.ReactElement => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" onClick={props.onClick}>
+    <path d="M9.5 3.205L8.795 2.5 6 5.295 3.205 2.5l-.705.705L5.295 6 2.5 8.795l.705.705L6 6.705 8.795 9.5l.705-.705L6.705 6"></path>
+  </svg>
+)
diff --git a/src/renderer/coremods/settings/icons/Popout.tsx b/src/renderer/coremods/settings/icons/Popout.tsx
new file mode 100644
index 000000000..419028b63
--- /dev/null
+++ b/src/renderer/coremods/settings/icons/Popout.tsx
@@ -0,0 +1,7 @@
+import { MouseEventHandler } from "react";
+
+export default (props: { onClick?: MouseEventHandler }): React.ReactElement => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" onClick={props.onClick}>
+    <path d="M10 5V3H5.375C4.06519 3 3 4.06519 3 5.375V18.625C3 19.936 4.06519 21 5.375 21H18.625C19.936 21 21 19.936 21 18.625V14H19V19H5V5H10Z M21 2.99902H14V4.99902H17.586L9.29297 13.292L10.707 14.706L19 6.41302V9.99902H21V2.99902Z" />
+  </svg>
+);
diff --git a/src/renderer/coremods/settings/icons/Settings.tsx b/src/renderer/coremods/settings/icons/Settings.tsx
index efe9d358b..b2e701fc7 100644
--- a/src/renderer/coremods/settings/icons/Settings.tsx
+++ b/src/renderer/coremods/settings/icons/Settings.tsx
@@ -1,5 +1,7 @@
-export default (): React.ReactElement => (
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor">
+import { MouseEventHandler } from "react";
+
+export default (props: { onClick?: MouseEventHandler }): React.ReactElement => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" onClick={props.onClick}>
     {/* Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. */}
     <path d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336c44.2 0 80-35.8 80-80s-35.8-80-80-80s-80 35.8-80 80s35.8 80 80 80z" />
   </svg>
diff --git a/src/renderer/coremods/settings/icons/index.ts b/src/renderer/coremods/settings/icons/index.ts
index e6c8be8d6..db6583a38 100644
--- a/src/renderer/coremods/settings/icons/index.ts
+++ b/src/renderer/coremods/settings/icons/index.ts
@@ -4,6 +4,8 @@ import Link from "./Link";
 import Reload from "./Reload";
 import Settings from "./Settings";
 import Trash from "./Trash";
+import Close from "./Close";
+import Popout from "./Popout";
 
 export default {
   Discord,
@@ -12,4 +14,6 @@ export default {
   Reload,
   Settings,
   Trash,
+  Close,
+  Popout,
 };
diff --git a/src/renderer/coremods/settings/pages/QuickCSS.tsx b/src/renderer/coremods/settings/pages/QuickCSS.tsx
index a06f0c7b8..e29dff8cc 100644
--- a/src/renderer/coremods/settings/pages/QuickCSS.tsx
+++ b/src/renderer/coremods/settings/pages/QuickCSS.tsx
@@ -10,6 +10,9 @@ import "./QuickCSS.css";
 import { generalSettings } from "./General";
 import { ReactComponent } from "src/types";
 import { Store } from "@common/flux";
+import Settings from "../icons/Settings";
+import Close from "../icons/Close";
+import Popout from "../icons/Popout";
 
 const { connectStores } = flux;
 
@@ -245,48 +248,26 @@ const QuickCSS = (props: { popout: boolean } & Record<string, boolean>): React.R
         <div id="replugged-quickcss-wrapper" data-popout={props.popout}>
           <div className="replugged-quickcss-header">
             <Tooltip text={Messages.SETTINGS}>
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" onClick={() => {}}>
-                <path
-                  fill="currentColor"
-                  fill-rule="evenodd"
-                  clip-rule="evenodd"
-                  d="M19.738 10H22V14H19.739C19.498 14.931 19.1 15.798 18.565 16.564L20 18L18 20L16.565 18.564C15.797 19.099 14.932 19.498 14 19.738V22H10V19.738C9.069 19.498 8.203 19.099 7.436 18.564L6 20L4 18L5.436 16.564C4.901 15.799 4.502 14.932 4.262 14H2V10H4.262C4.502 9.068 4.9 8.202 5.436 7.436L4 6L6 4L7.436 5.436C8.202 4.9 9.068 4.502 10 4.262V2H14V4.261C14.932 4.502 15.797 4.9 16.565 5.435L18 3.999L20 5.999L18.564 7.436C19.099 8.202 19.498 9.069 19.738 10ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z"
-                />
-              </svg>
+              <Settings />
             </Tooltip>
 
             <Tooltip text={props.popout ? Messages.CLOSE : Messages.POPOUT_PLAYER}>
               {!props.popout ? (
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  onClick={() => {
-                    openPopout(
-                      "DISCORD_REPLUGGED_QUICKCSS",
-                      () => (
-                        <DnDProvider windowKey="DISCORD_REPLUGGED_QUICKCSS">
-                          <QuickCSS popout={true}></QuickCSS>
-                        </DnDProvider>
-                      ),
-                      {},
-                    );
-                  }}>
-                  <path
-                    fill="currentColor"
-                    d="M10 5V3H5.375C4.06519 3 3 4.06519 3 5.375V18.625C3 19.936 4.06519 21 5.375 21H18.625C19.936 21 21 19.936 21 18.625V14H19V19H5V5H10Z M21 2.99902H14V4.99902H17.586L9.29297 13.292L10.707 14.706L19 6.41302V9.99902H21V2.99902Z"
-                  />
-                </svg>
+                <Popout onClick={() => {
+                  openPopout(
+                    "DISCORD_REPLUGGED_QUICKCSS",
+                    () => (
+                      <DnDProvider windowKey="DISCORD_REPLUGGED_QUICKCSS">
+                        <QuickCSS popout={true}></QuickCSS>
+                      </DnDProvider>
+                    ),
+                    {},
+                  );
+                }} />
               ) : (
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 12 12"
-                  onClick={() => {
-                    closePopout("DISCORD_REPLUGGED_QUICKCSS");
-                  }}>
-                  <g fill="currentColor">
-                    <path d="M9.5 3.205L8.795 2.5 6 5.295 3.205 2.5l-.705.705L5.295 6 2.5 8.795l.705.705L6 6.705 8.795 9.5l.705-.705L6.705 6"></path>
-                  </g>
-                </svg>
+                <Close onClick={() => {
+                  closePopout("DISCORD_REPLUGGED_QUICKCSS");
+                }} />
               )}
             </Tooltip>
           </div>