diff --git a/src/components/cycle/__tests__/custom-symptom-icon-picker.test.tsx b/src/components/cycle/__tests__/custom-symptom-icon-picker.test.tsx
new file mode 100644
index 000000000..e828dc7cb
--- /dev/null
+++ b/src/components/cycle/__tests__/custom-symptom-icon-picker.test.tsx
@@ -0,0 +1,56 @@
+/**
+ * The cycle sheet's "add a custom symptom" popover offers the same icon
+ * picker as the symptoms feature, and must look and behave the same: 44 px
+ * targets on a phone, 36 px from `sm`, a translated name per icon.
+ *
+ * The popover portals and portals do not render server-side, so it is
+ * replaced by pass-through wrappers; what is measured is the picker inside.
+ *
+ * Mutation check (run, seen red): put the cycle sheet's own inline picker
+ * back (`size-7`, `aria-label={name}`) → this test goes red.
+ */
+import { describe, expect, it, vi } from "vitest";
+import type { ReactNode } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+
+vi.mock("@/components/ui/popover", () => ({
+ Popover: ({ children }: { children: ReactNode }) => <>{children},
+ PopoverTrigger: ({ children }: { children: ReactNode }) => <>{children},
+ PopoverContent: ({ children }: { children: ReactNode }) => (
+
{children}
+ ),
+}));
+
+vi.mock("../use-cycle", async (importOriginal) => ({
+ ...(await importOriginal()),
+ useCreateCustomSymptom: () => ({
+ mutateAsync: vi.fn(),
+ reset: vi.fn(),
+ isPending: false,
+ isError: false,
+ error: null,
+ }),
+}));
+
+import { CUSTOM_SYMPTOM_ICON_ALLOWLIST } from "@/lib/cycle/custom-symptoms-shared";
+import { I18nProvider } from "@/lib/i18n/context";
+import { AddSymptomChip } from "../log-day-sheet";
+
+describe("cycle custom-symptom icon picker", () => {
+ it("has 44 px targets on a phone and translated icon names", () => {
+ const html = renderToStaticMarkup(
+
+ {}} />
+ ,
+ );
+ const buttons = html.match(/]*role="radio"[^>]*>/g) ?? [];
+ expect(buttons).toHaveLength(CUSTOM_SYMPTOM_ICON_ALLOWLIST.length);
+ for (const button of buttons) {
+ expect(button).toContain("size-11");
+ expect(button).toContain("sm:size-9");
+ expect(button).not.toMatch(/\bsize-7\b/);
+ }
+ expect(html).toContain('aria-label="Herzschlag"');
+ expect(html).not.toContain('aria-label="HeartPulse"');
+ });
+});
diff --git a/src/components/cycle/log-day-sheet.tsx b/src/components/cycle/log-day-sheet.tsx
index 3cf04f61d..b15617d7a 100644
--- a/src/components/cycle/log-day-sheet.tsx
+++ b/src/components/cycle/log-day-sheet.tsx
@@ -48,7 +48,7 @@ import { useTranslations } from "@/lib/i18n/context";
import { useUnitDisplay } from "@/hooks/use-unit-display";
import { resolveIntlLocale } from "@/lib/format-locale";
import type { Locale } from "@/lib/i18n/config";
-import { CUSTOM_SYMPTOM_ICON_ALLOWLIST } from "@/lib/cycle/custom-symptoms-shared";
+import { SymptomIconPicker } from "@/components/symptoms/symptom-icon-picker";
import { FieldInfo } from "./field-info";
import { CYCLE_SYMPTOM_CATALOG } from "./symptom-catalog";
import { FLOW_HUE, PHASE_HUE } from "./phase-tokens";
@@ -1519,7 +1519,11 @@ export function SymptomRow({
* label + icon popover to mint a new custom symptom. Same height and shape as
* a symptom row so it reads as part of the list, not a foreign button.
*/
-function AddSymptomChip({ onCreated }: { onCreated: (key: string) => void }) {
+export function AddSymptomChip({
+ onCreated,
+}: {
+ onCreated: (key: string) => void;
+}) {
const { t } = useTranslations();
const create = useCreateCustomSymptom();
const [openForm, setOpenForm] = useState(false);
@@ -1594,34 +1598,11 @@ function AddSymptomChip({ onCreated }: { onCreated: (key: string) => void }) {
diff --git a/src/components/symptoms/symptom-icon-picker.tsx b/src/components/symptoms/symptom-icon-picker.tsx
new file mode 100644
index 000000000..4b766a73f
--- /dev/null
+++ b/src/components/symptoms/symptom-icon-picker.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+/**
+ * The icon picker a person-named symptom is given an icon with. One source for
+ * the three places that offer it (the symptoms add chip, the symptom edit
+ * sheet, and the cycle sheet's custom-symptom popover), which all draw from
+ * the same allowlist: 44 px targets on a phone, 36 px from `sm`, and each icon
+ * named in the reader's language rather than by its Lucide component name.
+ */
+import { useTranslations } from "@/lib/i18n/context";
+import { SYMPTOM_ICON_ALLOWLIST } from "@/lib/symptoms/shared";
+import { cn } from "@/lib/utils";
+
+import { symptomIcon } from "./symptom-icons";
+
+export function SymptomIconPicker({
+ value,
+ onChange,
+ label,
+}: {
+ value: string;
+ onChange: (name: string) => void;
+ /** The radiogroup's accessible name (the visible field label). */
+ label: string;
+}) {
+ const { t } = useTranslations();
+ return (
+