diff --git a/web/src/beta/components/Blocks/ImageBlock/index.stories.tsx b/web/src/beta/components/Blocks/ImageBlock/index.stories.tsx
new file mode 100644
index 0000000000..c4aae8964e
--- /dev/null
+++ b/web/src/beta/components/Blocks/ImageBlock/index.stories.tsx
@@ -0,0 +1,39 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import ImageBlock from ".";
+
+export default {
+  component: ImageBlock,
+} as Meta;
+
+const Container: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
+  <div style={{ width: "430px" }}>{children}</div>
+);
+
+type Story = StoryObj<typeof ImageBlock>;
+
+export const Default: Story = {
+  args: {
+    src: "http://placehold.it/430X260",
+  },
+  render: args => {
+    return (
+      <Container>
+        <ImageBlock {...args} />
+      </Container>
+    );
+  },
+};
+
+export const Blank: Story = {
+  args: {
+    src: "",
+  },
+  render: args => {
+    return (
+      <Container>
+        <ImageBlock {...args} />
+      </Container>
+    );
+  },
+};
diff --git a/web/src/beta/components/Blocks/ImageBlock/index.tsx b/web/src/beta/components/Blocks/ImageBlock/index.tsx
new file mode 100644
index 0000000000..a2aef4e426
--- /dev/null
+++ b/web/src/beta/components/Blocks/ImageBlock/index.tsx
@@ -0,0 +1,39 @@
+import Icon from "@reearth/beta/components/Icon";
+import { styled } from "@reearth/services/theme";
+
+type Props = {
+  src: string;
+  alt?: string;
+};
+
+const ImageBlock: React.FC<Props> = ({ src, alt }) => {
+  return src ? (
+    <Wrapper>
+      <ImageBox src={src} alt={alt} />
+    </Wrapper>
+  ) : (
+    <BlankImageBox>
+      <Icon icon="image" color="#2e2e2e" size={32} />
+    </BlankImageBox>
+  );
+};
+
+const Wrapper = styled.div`
+  width: inherit;
+`;
+
+const ImageBox = styled.img`
+  display: flex;
+  object-fit: cover;
+  width: 100%;
+`;
+
+const BlankImageBox = styled.div`
+  display: flex;
+  aspect-ratio: 43/26;
+  background: #f1f1f1;
+  align-items: center;
+  justify-content: center;
+`;
+
+export default ImageBlock;
diff --git a/web/src/beta/components/Icon/Icons/image.svg b/web/src/beta/components/Icon/Icons/image.svg
new file mode 100644
index 0000000000..1a5a9e43f8
--- /dev/null
+++ b/web/src/beta/components/Icon/Icons/image.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.0001 12.5V12.5004C21.0001 12.8983 20.842 13.2799 20.5606 13.5612C20.2792 13.8425 19.8977 14.0005 19.4998 14.0005C19.1019 14.0004 18.7204 13.8424 18.4391 13.561C18.1577 13.2797 17.9997 12.8981 17.9997 12.5002C17.9997 12.1024 18.1577 11.7208 18.4391 11.4395C18.7204 11.1581 19.1019 11 19.4998 11C19.8977 11 20.2792 11.158 20.5606 11.4393C20.842 11.7206 21.0001 12.1022 21.0001 12.5ZM29 7V25C28.9994 25.5302 28.7885 26.0386 28.4135 26.4135C28.0386 26.7885 27.5302 26.9994 27 27H5C4.46975 26.9994 3.9614 26.7885 3.58646 26.4135C3.21152 26.0386 3.00061 25.5302 3 25V7C3.00061 6.46975 3.21152 5.9614 3.58646 5.58646C3.9614 5.21152 4.46975 5.00061 5 5H27C27.5302 5.00061 28.0386 5.21152 28.4135 5.58646C28.7885 5.9614 28.9994 6.46975 29 7ZM27.001 20.5867L27 7H5V18.5857L9.58582 14C9.9612 13.6255 10.4698 13.4152 11.0001 13.4152C11.5303 13.4152 12.0389 13.6255 12.4143 14L18.0001 19.5859L20.5858 17C20.9612 16.6255 21.4698 16.4152 22.0001 16.4152C22.5303 16.4152 23.0389 16.6255 23.4143 17L27.001 20.5867Z" fill="currentColor"/>
+</svg>
diff --git a/web/src/beta/components/Icon/icons.ts b/web/src/beta/components/Icon/icons.ts
index cbefe72974..0ac75908f7 100644
--- a/web/src/beta/components/Icon/icons.ts
+++ b/web/src/beta/components/Icon/icons.ts
@@ -54,6 +54,9 @@ import TwoRectangle from "./Icons/two-rectangle.svg";
 // Plus
 import Plus from "./Icons/plus.svg";
 
+// Image
+import Image from "./Icons/image.svg";
+
 export default {
   file: File,
   dl: InfoTable,
@@ -87,4 +90,5 @@ export default {
   workspaceAdd: WorkspaceAdd,
   workspaces: Workspaces,
   checkmark: CheckMark,
+  image: Image,
 };