diff --git a/web/src/beta/components/Icon/Icons/fileIcon.svg b/web/src/beta/components/Icon/Icons/fileIcon.svg
new file mode 100644
index 000000000..5c3d184a8
--- /dev/null
+++ b/web/src/beta/components/Icon/Icons/fileIcon.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.87868 1.87868C4.44129 1.31607 5.20435 1 6 1H14C14.2652 1 14.5196 1.10536 14.7071 1.29289L20.7071 7.29289C20.8946 7.48043 21 7.73478 21 8V20C21 20.7957 20.6839 21.5587 20.1213 22.1213C19.5587 22.6839 18.7957 23 18 23H6C5.20435 23 4.44129 22.6839 3.87868 22.1213C3.31607 21.5587 3 20.7957 3 20V4C3 3.20435 3.31607 2.44129 3.87868 1.87868ZM6 3C5.73478 3 5.48043 3.10536 5.29289 3.29289C5.10536 3.48043 5 3.73478 5 4V20C5 20.2652 5.10536 20.5196 5.29289 20.7071C5.48043 20.8946 5.73478 21 6 21H18C18.2652 21 18.5196 20.8946 18.7071 20.7071C18.8946 20.5196 19 20.2652 19 20V8.41421L13.5858 3H6Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 1C14.5523 1 15 1.44772 15 2V7H20C20.5523 7 21 7.44772 21 8C21 8.55228 20.5523 9 20 9H14C13.4477 9 13 8.55228 13 8V2C13 1.44772 13.4477 1 14 1Z" fill="currentColor"/>
+</svg>
diff --git a/web/src/beta/components/Icon/icons.ts b/web/src/beta/components/Icon/icons.ts
new file mode 100644
index 000000000..17e22aa0c
--- /dev/null
+++ b/web/src/beta/components/Icon/icons.ts
@@ -0,0 +1,7 @@
+
+// Dataset
+import File from "./Icons/fileIcon.svg";
+
+export default {
+  file: File,
+};
diff --git a/web/src/beta/components/Icon/index.stories.tsx b/web/src/beta/components/Icon/index.stories.tsx
new file mode 100644
index 000000000..372f101b9
--- /dev/null
+++ b/web/src/beta/components/Icon/index.stories.tsx
@@ -0,0 +1,19 @@
+import { Meta } from "@storybook/react";
+
+import Icon from ".";
+
+const icon =
+  '<svg stroke="white" fill="#00A0E8" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="css-1t9xarj" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>';
+
+export default {
+  title: "Icon",
+  component: Icon,
+} as Meta;
+
+export const Default = () => <Icon icon="file" alt="icon" size={20} />;
+export const Color = () => <Icon icon="file" color="red" alt="icon" size={20} />;
+export const Image = () => <Icon icon={`/sample.svg`} alt="icon" size={20} />;
+export const Svg = () => <Icon icon={icon} alt="icon" size={20} />;
+export const Wrapped = () => (
+  <Icon icon={icon} alt="icon" size={20} style={{ background: "green" }} />
+);
diff --git a/web/src/beta/components/Icon/index.tsx b/web/src/beta/components/Icon/index.tsx
new file mode 100644
index 000000000..132045435
--- /dev/null
+++ b/web/src/beta/components/Icon/index.tsx
@@ -0,0 +1,106 @@
+import svgToMiniDataURI from "mini-svg-data-uri";
+import React, { AriaAttributes, AriaRole, CSSProperties, memo, useMemo } from "react";
+import SVG from "react-inlinesvg";
+
+import { ariaProps } from "@reearth/classic/util/aria";
+import { styled } from "@reearth/services/theme";
+
+import Icons from "./icons";
+
+export type Icons = keyof typeof Icons;
+
+export type Props = {
+  className?: string;
+  icon?: string;
+  size?: string | number;
+  alt?: string;
+  color?: string;
+  stroke?: string;
+  style?: CSSProperties;
+  role?: AriaRole;
+  notransition?: boolean;
+  transitionDuration?: string;
+  onClick?: () => void;
+} & AriaAttributes;
+
+const Icon: React.FC<Props> = ({
+  className,
+  icon,
+  alt,
+  style,
+  color,
+  stroke,
+  size,
+  role,
+  notransition,
+  transitionDuration,
+  onClick,
+  ...props
+}) => {
+  const src = useMemo(
+    () => (icon?.startsWith("<svg ") ? svgToMiniDataURI(icon) : Icons[icon as Icons]),
+    [icon],
+  );
+  if (!icon) return null;
+
+  const aria = ariaProps(props);
+  const sizeStr = typeof size === "number" ? `${size}px` : size;
+  if (!src) {
+    return (
+      <StyledImg
+        className={className}
+        src={icon}
+        alt={alt}
+        style={style}
+        role={role}
+        size={sizeStr}
+        notransition={notransition}
+        onClick={onClick}
+        {...aria}
+      />
+    );
+  }
+
+  return (
+    <StyledSvg
+      className={className}
+      src={src}
+      role={role}
+      color={color}
+      stroke={stroke}
+      size={sizeStr}
+      onClick={onClick}
+      style={{
+        ...style,
+        // To prevent annoying errors from being output to the console, specify transitions without Emotion.
+        transitionDuration:
+          !notransition && !style?.transitionDuration
+            ? transitionDuration || "0.3s"
+            : style?.transitionDuration,
+      }}
+      {...aria}
+    />
+  );
+};
+
+const StyledImg = styled.img<{ size?: string; notransition?: boolean }>`
+  width: ${({ size }) => size};
+  height: ${({ size }) => size};
+  ${({ notransition }) => !notransition && "transition: all 0.3s;"}
+`;
+
+const StyledSvg = styled(SVG)<{
+  color?: string;
+  stroke?: string;
+  size?: string;
+}>`
+  font-size: 0;
+  display: inline-block;
+  width: ${({ size }) => size};
+  height: ${({ size }) => size};
+  color: ${({ color }) => color};
+  ${({ stroke }) => `stroke: ${stroke};`}
+  transition-property: color, background;
+`;
+
+export default memo(Icon);