diff --git a/src/components/CustomIcons.jsx b/src/components/CustomIcons.jsx
deleted file mode 100644
index 22d36a0..0000000
--- a/src/components/CustomIcons.jsx
+++ /dev/null
@@ -1,38 +0,0 @@
-export function IconAddTable({ theme }) {
-  return (
-    <svg height="26" width="26">
-      <path
-        fill="none"
-        stroke={theme === "light" ? "rgb(51 65 85)" : "lightgrey"}
-        strokeWidth="2"
-        d="M4 2 L20 2 A4 4 0 0 1 22 4 L22 14 M14 22 L4 22 A4 4 0 0 1 1 18 L1 4 A4 4 0 0 1 5 2 M22 17 L22 25 M18 21 L26 21 M1 8 L22 8"
-      />
-    </svg>
-  );
-}
-
-export function IconAddArea({ theme }) {
-  return (
-    <svg height="26" width="26">
-      <path
-        fill="none"
-        stroke={theme === "light" ? "rgb(51 65 85)" : "lightgrey"}
-        strokeWidth="2"
-        d="M4 2 L20 2 A4 4 0 0 1 22 4 L22 14 M14 22 L4 22 A4 4 0 0 1 1 18 L1 4 A4 4 0 0 1 5 2 M22 17 L22 25 M18 21 L26 21"
-      />
-    </svg>
-  );
-}
-
-export function IconAddNote({ theme }) {
-  return (
-    <svg height="26" width="26">
-      <path
-        fill="none"
-        stroke={theme === "light" ? "rgb(51 65 85)" : "lightgrey"}
-        strokeWidth="2"
-        d="M12 2 L20 2 A4 4 0 0 1 22 4 L22 14 M14 22 L4 22 A4 4 0 0 1 1 18 L1 12 L12 2 M1 12 L9 12 A3 3 0 0 0 12 9 L12 1 M22 17 L22 25 M18 21 L26 21"
-      />
-    </svg>
-  );
-}
diff --git a/src/components/EditorHeader/ControlPanel.jsx b/src/components/EditorHeader/ControlPanel.jsx
index ded9e8f..38fe797 100644
--- a/src/components/EditorHeader/ControlPanel.jsx
+++ b/src/components/EditorHeader/ControlPanel.jsx
@@ -42,7 +42,6 @@ import {
   jsonToMariaDB,
   jsonToSQLServer,
 } from "../../utils/toSQL";
-import { IconAddTable, IconAddArea, IconAddNote } from "../CustomIcons";
 import {
   ObjectType,
   Action,
@@ -59,7 +58,6 @@ import { db } from "../../data/db";
 import { useLiveQuery } from "dexie-react-hooks";
 import { Parser } from "node-sql-parser";
 import Todo from "./Todo";
-
 import useLayout from "../../hooks/useLayout";
 import useSettings from "../../hooks/useSettings";
 import useTransform from "../../hooks/useTransform";
@@ -77,6 +75,7 @@ import useNotes from "../../hooks/useNotes";
 import useTypes from "../../hooks/useTypes";
 import useSaveState from "../../hooks/useSaveState";
 import Thumbnail from "../Thumbnail";
+import { IconAddArea, IconAddNote, IconAddTable } from "../../icons";
 
 export default function ControlPanel({
   diagramId,
@@ -2184,7 +2183,7 @@ export default function ControlPanel({
               className="flex items-center py-1 px-2 hover-2 rounded"
               onClick={() => addTable()}
             >
-              <IconAddTable theme={settings.mode} />
+              <IconAddTable />
             </button>
           </Tooltip>
           <Tooltip content="Add subject area" position="bottom">
@@ -2192,7 +2191,7 @@ export default function ControlPanel({
               className="py-1 px-2 hover-2 rounded flex items-center"
               onClick={() => addArea()}
             >
-              <IconAddArea theme={settings.mode} />
+              <IconAddArea />
             </button>
           </Tooltip>
           <Tooltip content="Add note" position="bottom">
@@ -2200,7 +2199,7 @@ export default function ControlPanel({
               className="py-1 px-2 hover-2 rounded flex items-center"
               onClick={() => addNote()}
             >
-              <IconAddNote theme={settings.mode} />
+              <IconAddNote />
             </button>
           </Tooltip>
           <Divider layout="vertical" margin="8px" />
diff --git a/src/icons/IconAddArea.jsx b/src/icons/IconAddArea.jsx
new file mode 100644
index 0000000..8f9ea81
--- /dev/null
+++ b/src/icons/IconAddArea.jsx
@@ -0,0 +1,12 @@
+export default function IconAddArea() {
+  return (
+    <svg height="26" width="26">
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        d="M4 2 L20 2 A4 4 0 0 1 22 4 L22 14 M14 22 L4 22 A4 4 0 0 1 1 18 L1 4 A4 4 0 0 1 5 2 M22 17 L22 25 M18 21 L26 21"
+      />
+    </svg>
+  );
+}
diff --git a/src/icons/IconAddNote.jsx b/src/icons/IconAddNote.jsx
new file mode 100644
index 0000000..81936ff
--- /dev/null
+++ b/src/icons/IconAddNote.jsx
@@ -0,0 +1,12 @@
+export default function IconAddNote() {
+  return (
+    <svg height="26" width="26">
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        d="M12 2 L20 2 A4 4 0 0 1 22 4 L22 14 M14 22 L4 22 A4 4 0 0 1 1 18 L1 12 L12 2 M1 12 L9 12 A3 3 0 0 0 12 9 L12 1 M22 17 L22 25 M18 21 L26 21"
+      />
+    </svg>
+  );
+}
diff --git a/src/icons/IconAddTable.jsx b/src/icons/IconAddTable.jsx
new file mode 100644
index 0000000..dd8553e
--- /dev/null
+++ b/src/icons/IconAddTable.jsx
@@ -0,0 +1,12 @@
+export default function IconAddTable() {
+  return (
+    <svg height="26" width="26">
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        d="M4 2 L20 2 A4 4 0 0 1 22 4 L22 14 M14 22 L4 22 A4 4 0 0 1 1 18 L1 4 A4 4 0 0 1 5 2 M22 17 L22 25 M18 21 L26 21 M1 8 L22 8"
+      />
+    </svg>
+  );
+}
diff --git a/src/icons/index.js b/src/icons/index.js
new file mode 100644
index 0000000..84f5b88
--- /dev/null
+++ b/src/icons/index.js
@@ -0,0 +1,3 @@
+export { default as IconAddTable } from "./IconAddTable";
+export { default as IconAddArea } from "./IconAddArea";
+export { default as IconAddNote } from "./IconAddNote";