diff --git a/packages/excalidraw/shapes.tsx b/packages/element/shapes.ts
similarity index 85%
rename from packages/excalidraw/shapes.tsx
rename to packages/element/shapes.ts
index b2c391a42..0e0069f09 100644
--- a/packages/excalidraw/shapes.tsx
+++ b/packages/element/shapes.ts
@@ -18,18 +18,6 @@ import {
   type GeometricShape,
 } from "@excalidraw/utils/geometry/shape";
 
-import {
-  ArrowIcon,
-  DiamondIcon,
-  EllipseIcon,
-  EraserIcon,
-  FreedrawIcon,
-  ImageIcon,
-  LineIcon,
-  RectangleIcon,
-  SelectionIcon,
-  TextIcon,
-} from "./components/icons";
 import {
   DEFAULT_ADAPTIVE_RADIUS,
   DEFAULT_PROPORTIONAL_RADIUS,
@@ -40,7 +28,6 @@ import { getElementAbsoluteCoords } from "./element";
 import { shouldTestInside } from "./element/collision";
 import { LinearElementEditor } from "./element/linearElementEditor";
 import { getBoundTextElement } from "./element/textElement";
-import { KEYS } from "./keys";
 import { ShapeCache } from "./scene/ShapeCache";
 import { invariant } from "./utils";
 
@@ -53,92 +40,6 @@ import type {
 } from "./element/types";
 import type { NormalizedZoomValue, Zoom } from "./types";
 
-export const SHAPES = [
-  {
-    icon: SelectionIcon,
-    value: "selection",
-    key: KEYS.V,
-    numericKey: KEYS["1"],
-    fillable: true,
-  },
-  {
-    icon: RectangleIcon,
-    value: "rectangle",
-    key: KEYS.R,
-    numericKey: KEYS["2"],
-    fillable: true,
-  },
-  {
-    icon: DiamondIcon,
-    value: "diamond",
-    key: KEYS.D,
-    numericKey: KEYS["3"],
-    fillable: true,
-  },
-  {
-    icon: EllipseIcon,
-    value: "ellipse",
-    key: KEYS.O,
-    numericKey: KEYS["4"],
-    fillable: true,
-  },
-  {
-    icon: ArrowIcon,
-    value: "arrow",
-    key: KEYS.A,
-    numericKey: KEYS["5"],
-    fillable: true,
-  },
-  {
-    icon: LineIcon,
-    value: "line",
-    key: KEYS.L,
-    numericKey: KEYS["6"],
-    fillable: true,
-  },
-  {
-    icon: FreedrawIcon,
-    value: "freedraw",
-    key: [KEYS.P, KEYS.X],
-    numericKey: KEYS["7"],
-    fillable: false,
-  },
-  {
-    icon: TextIcon,
-    value: "text",
-    key: KEYS.T,
-    numericKey: KEYS["8"],
-    fillable: false,
-  },
-  {
-    icon: ImageIcon,
-    value: "image",
-    key: null,
-    numericKey: KEYS["9"],
-    fillable: false,
-  },
-  {
-    icon: EraserIcon,
-    value: "eraser",
-    key: KEYS.E,
-    numericKey: KEYS["0"],
-    fillable: false,
-  },
-] as const;
-
-export const findShapeByKey = (key: string) => {
-  const shape = SHAPES.find((shape, index) => {
-    return (
-      (shape.numericKey != null && key === shape.numericKey.toString()) ||
-      (shape.key &&
-        (typeof shape.key === "string"
-          ? shape.key === key
-          : (shape.key as readonly string[]).includes(key)))
-    );
-  });
-  return shape?.value || null;
-};
-
 /**
  * get the pure geometric shape of an excalidraw element
  * which is then used for hit detection
diff --git a/packages/excalidraw/components/shapes.tsx b/packages/excalidraw/components/shapes.tsx
new file mode 100644
index 000000000..1fbb7add2
--- /dev/null
+++ b/packages/excalidraw/components/shapes.tsx
@@ -0,0 +1,100 @@
+import { KEYS } from "../keys";
+
+import {
+  SelectionIcon,
+  RectangleIcon,
+  DiamondIcon,
+  EllipseIcon,
+  ArrowIcon,
+  LineIcon,
+  FreedrawIcon,
+  TextIcon,
+  ImageIcon,
+  EraserIcon,
+} from "./icons";
+
+export const SHAPES = [
+  {
+    icon: SelectionIcon,
+    value: "selection",
+    key: KEYS.V,
+    numericKey: KEYS["1"],
+    fillable: true,
+  },
+  {
+    icon: RectangleIcon,
+    value: "rectangle",
+    key: KEYS.R,
+    numericKey: KEYS["2"],
+    fillable: true,
+  },
+  {
+    icon: DiamondIcon,
+    value: "diamond",
+    key: KEYS.D,
+    numericKey: KEYS["3"],
+    fillable: true,
+  },
+  {
+    icon: EllipseIcon,
+    value: "ellipse",
+    key: KEYS.O,
+    numericKey: KEYS["4"],
+    fillable: true,
+  },
+  {
+    icon: ArrowIcon,
+    value: "arrow",
+    key: KEYS.A,
+    numericKey: KEYS["5"],
+    fillable: true,
+  },
+  {
+    icon: LineIcon,
+    value: "line",
+    key: KEYS.L,
+    numericKey: KEYS["6"],
+    fillable: true,
+  },
+  {
+    icon: FreedrawIcon,
+    value: "freedraw",
+    key: [KEYS.P, KEYS.X],
+    numericKey: KEYS["7"],
+    fillable: false,
+  },
+  {
+    icon: TextIcon,
+    value: "text",
+    key: KEYS.T,
+    numericKey: KEYS["8"],
+    fillable: false,
+  },
+  {
+    icon: ImageIcon,
+    value: "image",
+    key: null,
+    numericKey: KEYS["9"],
+    fillable: false,
+  },
+  {
+    icon: EraserIcon,
+    value: "eraser",
+    key: KEYS.E,
+    numericKey: KEYS["0"],
+    fillable: false,
+  },
+] as const;
+
+export const findShapeByKey = (key: string) => {
+  const shape = SHAPES.find((shape, index) => {
+    return (
+      (shape.numericKey != null && key === shape.numericKey.toString()) ||
+      (shape.key &&
+        (typeof shape.key === "string"
+          ? shape.key === key
+          : (shape.key as readonly string[]).includes(key)))
+    );
+  });
+  return shape?.value || null;
+};