diff --git a/packages/js/product-editor/changelog/update-product-editor-reorganize-images b/packages/js/product-editor/changelog/update-product-editor-reorganize-images
new file mode 100644
index 00000000000..d4fbe579d34
--- /dev/null
+++ b/packages/js/product-editor/changelog/update-product-editor-reorganize-images
@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+[Product Block Editor]: Add new image components
diff --git a/packages/js/product-editor/src/images/glasses/index.tsx b/packages/js/product-editor/src/images/glasses/index.tsx
new file mode 100644
index 00000000000..f8c0be90912
--- /dev/null
+++ b/packages/js/product-editor/src/images/glasses/index.tsx
@@ -0,0 +1,38 @@
+/**
+ * External dependencies
+ */
+import { SVG, Path } from '@wordpress/components';
+import { createElement } from '@wordpress/element';
+
+export function Glasses( {
+ colorOne = '#E0E0E0',
+ colorTwo = '#F0F0F0',
+ size = 72,
+ style = {},
+} ) {
+ const rate = 72 / 33;
+
+ return (
+
+ );
+}
diff --git a/packages/js/product-editor/src/images/glasses/stories/index.tsx b/packages/js/product-editor/src/images/glasses/stories/index.tsx
new file mode 100644
index 00000000000..990dcb34de2
--- /dev/null
+++ b/packages/js/product-editor/src/images/glasses/stories/index.tsx
@@ -0,0 +1,16 @@
+/**
+ * Internal dependencies
+ */
+import { Glasses } from '../index';
+
+export default {
+ title: 'Product Editor/images/Glasses',
+ component: Glasses,
+ args: {
+ size: 72,
+ colorOne: '#E0E0E0',
+ colorTwo: '#F0F0F0',
+ },
+};
+
+export const Default = Glasses;
diff --git a/packages/js/product-editor/src/images/pants/index.tsx b/packages/js/product-editor/src/images/pants/index.tsx
new file mode 100644
index 00000000000..1b9a454a51b
--- /dev/null
+++ b/packages/js/product-editor/src/images/pants/index.tsx
@@ -0,0 +1,52 @@
+/**
+ * External dependencies
+ */
+import { SVG, Path, G, Rect } from '@wordpress/components';
+import { useInstanceId } from '@wordpress/compose';
+import { createElement } from '@wordpress/element';
+
+export function Pants( {
+ colorOne = '#DDDDDD',
+ colorTwo = '#F0F0F0',
+ size = 50,
+ style = {},
+} ) {
+ const clipPathId = useInstanceId( Pants, 'pants' ) as string;
+ const rate = 50 / 72;
+
+ return (
+
+ );
+}
diff --git a/packages/js/product-editor/src/images/pants/stories/index.tsx b/packages/js/product-editor/src/images/pants/stories/index.tsx
new file mode 100644
index 00000000000..93eca5a611d
--- /dev/null
+++ b/packages/js/product-editor/src/images/pants/stories/index.tsx
@@ -0,0 +1,16 @@
+/**
+ * Internal dependencies
+ */
+import { Pants } from '../index';
+
+export default {
+ title: 'Product Editor/images/Pants',
+ component: Pants,
+ args: {
+ size: 50,
+ colorOne: '#E0E0E0',
+ colorTwo: '#F0F0F0',
+ },
+};
+
+export const Default = Pants;
diff --git a/packages/js/product-editor/src/images/shirt/index.tsx b/packages/js/product-editor/src/images/shirt/index.tsx
new file mode 100644
index 00000000000..69c743c0ee5
--- /dev/null
+++ b/packages/js/product-editor/src/images/shirt/index.tsx
@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import { SVG, Path } from '@wordpress/components';
+import { createElement } from '@wordpress/element';
+
+export function Shirt( {
+ colorOne = '#E0E0E0',
+ colorTwo = '#F0F0F0',
+ size = 68,
+ style = {},
+} ) {
+ const rate = 68 / 56;
+ return (
+
+ );
+}
diff --git a/packages/js/product-editor/src/images/shirt/stories/index.tsx b/packages/js/product-editor/src/images/shirt/stories/index.tsx
new file mode 100644
index 00000000000..1134bf5148e
--- /dev/null
+++ b/packages/js/product-editor/src/images/shirt/stories/index.tsx
@@ -0,0 +1,16 @@
+/**
+ * Internal dependencies
+ */
+import { Shirt } from '../index';
+
+export default {
+ title: 'Product Editor/images/Shirt',
+ component: Shirt,
+ args: {
+ size: '88',
+ colorOne: '#E0E0E0',
+ colorTwo: '#F0F0F0',
+ },
+};
+
+export const Default = Shirt;
diff --git a/packages/js/product-editor/src/images/shopping-bugs/index.tsx b/packages/js/product-editor/src/images/shopping-bugs/index.tsx
deleted file mode 100644
index 5e46f5b3c78..00000000000
--- a/packages/js/product-editor/src/images/shopping-bugs/index.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * External dependencies
- */
-import { SVG, Path } from '@wordpress/components';
-import { createElement } from '@wordpress/element';
-
-export function ShoppingBags( {
- colorOne = '#E0E0E0',
- colorTwo = '#F0F0F0',
- size = '88',
-} ) {
- return (
-
- );
-}
diff --git a/packages/js/product-editor/src/images/shopping-bugs/stories/index.tsx b/packages/js/product-editor/src/images/shopping-bugs/stories/index.tsx
deleted file mode 100644
index 8174ac37d15..00000000000
--- a/packages/js/product-editor/src/images/shopping-bugs/stories/index.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * External dependencies
- */
-import React from 'react';
-
-/**
- * Internal dependencies
- */
-import { ShoppingBags } from '../index';
-
-export default {
- title: 'Product Editor/images/ShoppingBags',
- component: ShoppingBags,
- args: {
- size: '88',
- colorOne: '#E0E0E0',
- colorTwo: '#F0F0F0',
- },
-};
-
-export const Default = ( args ) => ;
-
-// Set the story name
-Default.storyName = 'Shopping Bags';