diff --git a/package.json b/package.json
index 2c8a4c4..d0cd35c 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
     "@changesets/changelog-github": "0.5.0",
     "@changesets/cli": "2.27.1",
     "@evilmartians/harmony": "1.2.0",
+    "@heroicons/react": "2.0.18",
     "@rollup/plugin-babel": "6.0.4",
     "@rollup/plugin-typescript": "11.1.5",
     "@storybook/addon-a11y": "7.6.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fed0888..6e0e97a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -37,6 +37,9 @@ devDependencies:
   '@evilmartians/harmony':
     specifier: 1.2.0
     version: 1.2.0
+  '@heroicons/react':
+    specifier: 2.0.18
+    version: 2.0.18(react@18.2.0)
   '@rollup/plugin-babel':
     specifier: 6.0.4
     version: 6.0.4(@babel/core@7.23.5)(@types/babel__core@7.20.5)(rollup@4.7.0)
@@ -2428,6 +2431,14 @@ packages:
     resolution: {integrity: sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==}
     dev: true
 
+  /@heroicons/react@2.0.18(react@18.2.0):
+    resolution: {integrity: sha512-7TyMjRrZZMBPa+/5Y8lN0iyvUU/01PeMGX2+RE7cQWpEUIcb4QotzUObFkJDejj/HUH4qjP/eQ0gzzKs2f+6Yw==}
+    peerDependencies:
+      react: '>= 16'
+    dependencies:
+      react: 18.2.0
+    dev: true
+
   /@humanwhocodes/config-array@0.11.13:
     resolution: {integrity: sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==}
     engines: {node: '>=10.10.0'}
diff --git a/src/components/Alert.stories.tsx b/src/components/Alert.stories.tsx
new file mode 100644
index 0000000..225bce0
--- /dev/null
+++ b/src/components/Alert.stories.tsx
@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Alert } from "./Alert";
+
+const meta = {
+  component: Alert,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Alert>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic = {
+  args: {
+    children:
+      "An alert displays a brief, important message, usually at the top of a page. Only text content updates are conveyed to screen readers, preserving focus.",
+  },
+} satisfies Story;
diff --git a/src/components/Alert.tsx b/src/components/Alert.tsx
new file mode 100644
index 0000000..68e235a
--- /dev/null
+++ b/src/components/Alert.tsx
@@ -0,0 +1,17 @@
+import { InformationCircleIcon } from "@heroicons/react/24/solid";
+
+export interface AlertProps {
+  children?: React.ReactNode;
+}
+
+export function Alert({ children }: AlertProps) {
+  return (
+    <div
+      role="alert"
+      className="grid grid-cols-[auto_1fr] gap-x-2 rounded-2xl bg-ui-neutral-1 p-4 text-base text-ui-neutral-5"
+    >
+      <InformationCircleIcon className="h-6 w-6" />
+      {children}
+    </div>
+  );
+}