refactor(web): move the app chrome from phosphor to material symbols

Auth pages, dialogs, the command palette, the user menu, Applications, the rich-text toolbar, the stylesheet editor and the error screens use the Material Symbols set instead of Phosphor; the icon subset gains the 35 glyphs they need. Phosphor stays for brand logos, the landing page and the icons printed on resumes. Also removes the form field and test mock that only wrapped the old rich input.

apps/web/src/components/input/chip-input.tsx

@@ -12,11 +12,11 @@ import { rectSortingStrategy, SortableContext, sortableKeyboardCoordinates, useS
 import { CSS } from "@dnd-kit/utilities";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
-import { PencilSimpleIcon, XIcon } from "@phosphor-icons/react";
 import * as React from "react";
 import { createPortal } from "react-dom";
 import { Badge } from "@reactive-resume/ui/components/badge";
 import { useFormControl } from "@reactive-resume/ui/components/form";
+import { Icon } from "@reactive-resume/ui/components/icon";
 import { Input } from "@reactive-resume/ui/components/input";
 import { Kbd } from "@reactive-resume/ui/components/kbd";
 import { cn } from "@reactive-resume/utils/style";
@@ -110,7 +110,7 @@ function ChipItem({ id, chip, index, isEditing, onEdit, onRemove }: ChipItemProp
 							onEdit(index);
 						}}
 					>
-						<PencilSimpleIcon className="size-3.5" />
+						<Icon name="edit" size={14} />
 					</button>
 					<button
 						type="button"
@@ -126,7 +126,7 @@ function ChipItem({ id, chip, index, isEditing, onEdit, onRemove }: ChipItemProp
 							onRemove(index);
 						}}
 					>
-						<XIcon className="size-3.5" />
+						<Icon name="close" size={14} />
 					</button>
 				</div>
 			</Badge>

apps/web/src/components/input/rich-input.tsx

@@ -2,35 +2,6 @@ import type { Editor, UseEditorOptions } from "@tiptap/react";
 import { t } from "@lingui/core/macro";
 import { useLingui } from "@lingui/react";
 import { Trans } from "@lingui/react/macro";
-import {
-	ArrowsInSimpleIcon,
-	ArrowsOutSimpleIcon,
-	CodeSimpleIcon,
-	HighlighterCircleIcon,
-	KeyReturnIcon,
-	LinkBreakIcon,
-	LinkIcon,
-	ListBulletsIcon,
-	ListNumbersIcon,
-	MinusIcon,
-	ParagraphIcon,
-	TextAlignCenterIcon,
-	TextAlignJustifyIcon,
-	TextAlignLeftIcon,
-	TextAlignRightIcon,
-	TextBolderIcon,
-	TextHFiveIcon,
-	TextHFourIcon,
-	TextHOneIcon,
-	TextHSixIcon,
-	TextHThreeIcon,
-	TextHTwoIcon,
-	TextIndentIcon,
-	TextItalicIcon,
-	TextOutdentIcon,
-	TextStrikethroughIcon,
-	TextUnderlineIcon,
-} from "@phosphor-icons/react";
 import Color from "@tiptap/extension-color";
 import Highlight from "@tiptap/extension-highlight";
 import { Table, TableCell, TableHeader, TableRow } from "@tiptap/extension-table";
@@ -50,6 +21,7 @@ import {
 	DropdownMenuSeparator,
 	DropdownMenuTrigger,
 } from "@reactive-resume/ui/components/dropdown-menu";
+import { Icon } from "@reactive-resume/ui/components/icon";
 import { PopoverHeader, PopoverTitle, PopoverTrigger } from "@reactive-resume/ui/components/popover";
 import { toast } from "@reactive-resume/ui/components/toast";
 import { Toggle } from "@reactive-resume/ui/components/toggle";
@@ -616,7 +588,7 @@ export function RichInput({
 				title={isFullscreen ? t`Exit Fullscreen` : t`Fullscreen`}
 				onClick={() => setIsFullscreen(!isFullscreen)}
 			>
-				{isFullscreen ? <ArrowsInSimpleIcon className="size-4" /> : <ArrowsOutSimpleIcon className="size-4" />}
+				{isFullscreen ? <Icon name="close_fullscreen" size={16} /> : <Icon name="open_in_full" size={16} />}
 			</Button>
 		</div>
 	);
@@ -847,7 +819,7 @@ function renderEditorToolbar(state: EditorToolbarState, isFullscreen: boolean) {
 				disabled={!state.canBold}
 				onPressedChange={state.toggleBold}
 			>
-				<TextBolderIcon className="size-3.5" />
+				<Icon name="format_bold" size={14} />
 			</Toggle>
 
 			<Toggle
@@ -859,7 +831,7 @@ function renderEditorToolbar(state: EditorToolbarState, isFullscreen: boolean) {
 				disabled={!state.canItalic}
 				onPressedChange={state.toggleItalic}
 			>
-				<TextItalicIcon className="size-3.5" />
+				<Icon name="format_italic" size={14} />
 			</Toggle>
 
 			<Toggle
@@ -871,7 +843,7 @@ function renderEditorToolbar(state: EditorToolbarState, isFullscreen: boolean) {
 				disabled={!state.canUnderline}
 				onPressedChange={state.toggleUnderline}
 			>
-				<TextUnderlineIcon className="size-3.5" />
+				<Icon name="format_underlined" size={14} />
 			</Toggle>
 
 			<Toggle
@@ -883,7 +855,7 @@ function renderEditorToolbar(state: EditorToolbarState, isFullscreen: boolean) {
 				disabled={!state.canStrike}
 				onPressedChange={state.toggleStrike}
 			>
-				<TextStrikethroughIcon className="size-3.5" />
+				<Icon name="format_strikethrough" size={14} />
 			</Toggle>
 
 			<ColorPicker
@@ -902,7 +874,7 @@ function renderEditorToolbar(state: EditorToolbarState, isFullscreen: boolean) {
 								disabled={!state.canHighlightColor}
 							>
 								<span className="flex flex-col items-center leading-none">
-									<HighlighterCircleIcon className="size-3.5" />
+									<Icon name="ink_highlighter" size={14} />
 									<span
 										className="mt-0.5 h-0.5 w-3 rounded-full"
 										style={{ backgroundColor: visibleHighlightColor ?? "currentColor" }}
@@ -919,7 +891,7 @@ function renderEditorToolbar(state: EditorToolbarState, isFullscreen: boolean) {
 							className="grid size-9 place-items-center rounded-lg border border-line bg-sunken/60 text-sm shadow-xs"
 							style={{ backgroundColor: visibleHighlightColor ?? defaultHighlightColor }}
 						>
-							<HighlighterCircleIcon className="size-4" />
+							<Icon name="ink_highlighter" size={16} />
 						</span>
 
 						<div className="flex flex-col gap-0.5">
@@ -1019,15 +991,15 @@ function renderEditorToolbar(state: EditorToolbarState, isFullscreen: boolean) {
 							className="rounded-none"
 						>
 							{match(state)
-								.with({ isParagraph: true }, () => <ParagraphIcon className="size-3.5" />)
-								.with({ isHeading1: true }, () => <TextHOneIcon className="size-3.5" />)
-								.with({ isHeading2: true }, () => <TextHTwoIcon className="size-3.5" />)
-								.with({ isHeading3: true }, () => <TextHThreeIcon className="size-3.5" />)
-								.with({ isHeading4: true }, () => <TextHFourIcon className="size-3.5" />)
-								.with({ isHeading5: true }, () => <TextHFiveIcon className="size-3.5" />)
-								.with({ isHeading6: true }, () => <TextHSixIcon className="size-3.5" />)
+								.with({ isParagraph: true }, () => <Icon name="format_paragraph" size={14} />)
+								.with({ isHeading1: true }, () => <Icon name="format_h1" size={14} />)
+								.with({ isHeading2: true }, () => <Icon name="format_h2" size={14} />)
+								.with({ isHeading3: true }, () => <Icon name="format_h3" size={14} />)
+								.with({ isHeading4: true }, () => <Icon name="format_h4" size={14} />)
+								.with({ isHeading5: true }, () => <Icon name="format_h5" size={14} />)
+								.with({ isHeading6: true }, () => <Icon name="format_h6" size={14} />)
 								.otherwise(() => (
-									<ParagraphIcon className="size-3.5" />
+									<Icon name="format_paragraph" size={14} />
 								))}
 						</Button>
 					}
@@ -1098,12 +1070,12 @@ function renderEditorToolbar(state: EditorToolbarState, isFullscreen: boolean) {
 							className="rounded-none"
 						>
 							{match(state)
-								.with({ isLeftAlign: true }, () => <TextAlignLeftIcon className="size-3.5" />)
-								.with({ isCenterAlign: true }, () => <TextAlignCenterIcon className="size-3.5" />)
-								.with({ isRightAlign: true }, () => <TextAlignRightIcon className="size-3.5" />)
-								.with({ isJustifyAlign: true }, () => <TextAlignJustifyIcon className="size-3.5" />)
+								.with({ isLeftAlign: true }, () => <Icon name="format_align_left" size={14} />)
+								.with({ isCenterAlign: true }, () => <Icon name="format_align_center" size={14} />)
+								.with({ isRightAlign: true }, () => <Icon name="format_align_right" size={14} />)
+								.with({ isJustifyAlign: true }, () => <Icon name="format_align_justify" size={14} />)
 								.otherwise(() => (
-									<TextAlignLeftIcon className="size-3.5" />
+									<Icon name="format_align_left" size={14} />
 								))}
 						</Button>
 					}
@@ -1152,7 +1124,7 @@ function renderEditorToolbar(state: EditorToolbarState, isFullscreen: boolean) {
 				disabled={!state.canBulletList}
 				onPressedChange={state.toggleBulletList}
 			>
-				<ListBulletsIcon className="size-3.5" />
+				<Icon name="format_list_bulleted" size={14} />
 			</Toggle>
 
 			<Toggle
@@ -1164,7 +1136,7 @@ function renderEditorToolbar(state: EditorToolbarState, isFullscreen: boolean) {
 				disabled={!state.canOrderedList}
 				onPressedChange={state.toggleOrderedList}
 			>
-				<ListNumbersIcon className="size-3.5" />
+				<Icon name="format_list_numbered" size={14} />
 			</Toggle>
 
 			<Button
@@ -1176,7 +1148,7 @@ function renderEditorToolbar(state: EditorToolbarState, isFullscreen: boolean) {
 				disabled={!state.canDecreaseIndent}
 				onClick={state.decreaseIndent}
 			>
-				<TextOutdentIcon className="size-3.5" />
+				<Icon name="format_indent_decrease" size={14} />
 			</Button>
 
 			<Button
@@ -1188,7 +1160,7 @@ function renderEditorToolbar(state: EditorToolbarState, isFullscreen: boolean) {
 				disabled={!state.canIncreaseIndent}
 				onClick={state.increaseIndent}
 			>
-				<TextIndentIcon className="size-3.5" />
+				<Icon name="format_indent_increase" size={14} />
 			</Button>
 
 			<div className="mx-1 h-5 w-px bg-line" />
@@ -1202,7 +1174,7 @@ function renderEditorToolbar(state: EditorToolbarState, isFullscreen: boolean) {
 					title={t`Remove link`}
 					onClick={state.unsetLink}
 				>
-					<LinkBreakIcon className="size-3.5" />
+					<Icon name="link_off" size={14} />
 				</Button>
 			) : (
 				<Button
@@ -1213,7 +1185,7 @@ function renderEditorToolbar(state: EditorToolbarState, isFullscreen: boolean) {
 					title={t`Add link`}
 					onClick={state.setLink}
 				>
-					<LinkIcon className="size-3.5" />
+					<Icon name="link" size={14} />
 				</Button>
 			)}
 
@@ -1226,7 +1198,7 @@ function renderEditorToolbar(state: EditorToolbarState, isFullscreen: boolean) {
 				disabled={!state.canInlineCode}
 				onPressedChange={state.toggleInlineCode}
 			>
-				<CodeSimpleIcon className="size-3.5" />
+				<Icon name="code" size={14} />
 			</Toggle>
 
 			<Button
@@ -1237,7 +1209,7 @@ function renderEditorToolbar(state: EditorToolbarState, isFullscreen: boolean) {
 				title={t`New Line`}
 				onClick={state.setHardBreak}
 			>
-				<KeyReturnIcon className="size-3.5" />
+				<Icon name="keyboard_return" size={14} />
 			</Button>
 
 			<Button
@@ -1248,7 +1220,7 @@ function renderEditorToolbar(state: EditorToolbarState, isFullscreen: boolean) {
 				title={t`Separator`}
 				onClick={state.setHorizontalRule}
 			>
-				<MinusIcon className="size-3.5" />
+				<Icon name="horizontal_rule" size={14} />
 			</Button>
 
 			<span className="ml-auto px-2 text-ink-3 text-xs tabular-nums" aria-live="polite">

apps/web/src/components/input/url-input.tsx

@@ -1,8 +1,8 @@
 import type { Website } from "@reactive-resume/schema/resume/data";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
-import { TagIcon } from "@phosphor-icons/react";
 import { useCallback } from "react";
+import { Icon } from "@reactive-resume/ui/components/icon";
 import { Input } from "@reactive-resume/ui/components/input";
 import {
 	InputGroup,
@@ -79,7 +79,7 @@ export function URLInput<TValue extends Website>({ value, onChange, hideLabelBut
 										message: "Add a label to the URL",
 									})}
 								>
-									<TagIcon />
+									<Icon name="sell" size={16} />
 								</InputGroupButton>
 							}
 						/>

apps/web/src/components/layout/error-screen.tsx

@@ -1,10 +1,10 @@
 import type { ErrorComponentProps } from "@tanstack/react-router";
 import { Trans } from "@lingui/react/macro";
-import { ArrowClockwiseIcon, HouseIcon, WarningIcon } from "@phosphor-icons/react";
 import { Link } from "@tanstack/react-router";
 import { Alert, AlertDescription, AlertTitle } from "@reactive-resume/ui/components/alert";
 import { BrandIcon } from "@reactive-resume/ui/components/brand-icon";
 import { Button, buttonVariants } from "@reactive-resume/ui/components/button";
+import { Icon } from "@reactive-resume/ui/components/icon";
 
 export function ErrorScreen({ reset }: ErrorComponentProps) {
 	return (
@@ -12,7 +12,7 @@ export function ErrorScreen({ reset }: ErrorComponentProps) {
 			<BrandIcon variant="logo" className="size-12" />
 
 			<Alert>
-				<WarningIcon />
+				<Icon name="warning" size={16} />
 				<AlertTitle>
 					<Trans>Something went wrong</Trans>
 				</AlertTitle>
@@ -23,12 +23,12 @@ export function ErrorScreen({ reset }: ErrorComponentProps) {
 
 			<div className="flex items-center gap-x-2">
 				<Button onClick={reset}>
-					<ArrowClockwiseIcon />
+					<Icon name="refresh" size={16} />
 					<Trans>Try again</Trans>
 				</Button>
 
 				<Link to="/dashboard" className={buttonVariants({ variant: "secondary" })}>
-					<HouseIcon />
+					<Icon name="home" size={16} />
 					<Trans>Go to dashboard</Trans>
 				</Link>
 			</div>

apps/web/src/components/layout/not-found-screen.tsx

@@ -1,9 +1,9 @@
 import { Trans } from "@lingui/react/macro";
-import { HouseIcon, MagnifyingGlassIcon, WarningIcon } from "@phosphor-icons/react";
 import { Link } from "@tanstack/react-router";
 import { Alert, AlertDescription, AlertTitle } from "@reactive-resume/ui/components/alert";
 import { BrandIcon } from "@reactive-resume/ui/components/brand-icon";
 import { buttonVariants } from "@reactive-resume/ui/components/button";
+import { Icon } from "@reactive-resume/ui/components/icon";
 
 export function NotFoundScreen() {
 	return (
@@ -11,7 +11,7 @@ export function NotFoundScreen() {
 			<BrandIcon variant="logo" className="size-12" />
 
 			<Alert>
-				<WarningIcon />
+				<Icon name="warning" size={16} />
 				<AlertTitle>
 					<Trans>We couldn't find that page</Trans>
 				</AlertTitle>
@@ -22,12 +22,12 @@ export function NotFoundScreen() {
 
 			<div className="flex items-center gap-x-2">
 				<Link to="/dashboard" className={buttonVariants()}>
-					<MagnifyingGlassIcon />
+					<Icon name="search" size={16} />
 					<Trans>Go to dashboard</Trans>
 				</Link>
 
 				<Link to="/" className={buttonVariants({ variant: "secondary" })}>
-					<HouseIcon />
+					<Icon name="home" size={16} />
 					<Trans>Go home</Trans>
 				</Link>
 			</div>

apps/web/src/dialogs/auth/change-password.tsx

@@ -1,7 +1,6 @@
 import type { DialogProps } from "../store";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
-import { EyeIcon, EyeSlashIcon, PasswordIcon } from "@phosphor-icons/react";
 import { useQueryClient } from "@tanstack/react-query";
 import { useToggle } from "usehooks-ts";
 import z from "zod";
@@ -14,6 +13,7 @@ import {
 	DialogTitle,
 } from "@reactive-resume/ui/components/dialog";
 import { FormControl, FormItem, FormLabel, FormMessage } from "@reactive-resume/ui/components/form";
+import { Icon } from "@reactive-resume/ui/components/icon";
 import { Input } from "@reactive-resume/ui/components/input";
 import { toast } from "@reactive-resume/ui/components/toast";
 import { useFormBlocker } from "@/hooks/use-form-blocker";
@@ -82,7 +82,7 @@ export function ChangePasswordDialog(_: DialogProps<"auth.change-password">) {
 		<DialogContent>
 			<DialogHeader>
 				<DialogTitle className="flex items-center gap-x-2">
-					<PasswordIcon />
+					<Icon name="password" size={16} />
 					<Trans>Update your password</Trans>
 				</DialogTitle>
 				<DialogDescription>
@@ -132,7 +132,11 @@ export function ChangePasswordDialog(_: DialogProps<"auth.change-password">) {
 													message: "Show password",
 												})}
 									</span>
-									{showCurrentPassword ? <EyeIcon /> : <EyeSlashIcon />}
+									{showCurrentPassword ? (
+										<Icon name="visibility" size={16} />
+									) : (
+										<Icon name="visibility_off" size={16} />
+									)}
 								</Button>
 							</div>
 							<FormMessage errors={field.state.meta.errors} />
@@ -174,7 +178,7 @@ export function ChangePasswordDialog(_: DialogProps<"auth.change-password">) {
 													message: "Show password",
 												})}
 									</span>
-									{showNewPassword ? <EyeIcon /> : <EyeSlashIcon />}
+									{showNewPassword ? <Icon name="visibility" size={16} /> : <Icon name="visibility_off" size={16} />}
 								</Button>
 							</div>
 							<FormMessage errors={field.state.meta.errors} />

apps/web/src/dialogs/auth/disable-two-factor.tsx

@@ -1,7 +1,6 @@
 import type { DialogProps } from "../store";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
-import { EyeIcon, EyeSlashIcon, LockOpenIcon } from "@phosphor-icons/react";
 import { useRouter } from "@tanstack/react-router";
 import { useToggle } from "usehooks-ts";
 import z from "zod";
@@ -14,6 +13,7 @@ import {
 	DialogTitle,
 } from "@reactive-resume/ui/components/dialog";
 import { FormControl, FormItem, FormLabel, FormMessage } from "@reactive-resume/ui/components/form";
+import { Icon } from "@reactive-resume/ui/components/icon";
 import { Input } from "@reactive-resume/ui/components/input";
 import { toast } from "@reactive-resume/ui/components/toast";
 import { useFormBlocker } from "@/hooks/use-form-blocker";
@@ -74,7 +74,7 @@ export function DisableTwoFactorDialog(_: DialogProps<"auth.two-factor.disable">
 		<DialogContent>
 			<DialogHeader>
 				<DialogTitle className="flex items-center gap-x-2">
-					<LockOpenIcon />
+					<Icon name="lock_open" size={16} />
 					<Trans>Disable Two-Factor Authentication</Trans>
 				</DialogTitle>
 				<DialogDescription>
@@ -129,7 +129,7 @@ export function DisableTwoFactorDialog(_: DialogProps<"auth.two-factor.disable">
 													message: "Show password",
 												})}
 									</span>
-									{showPassword ? <EyeIcon /> : <EyeSlashIcon />}
+									{showPassword ? <Icon name="visibility" size={16} /> : <Icon name="visibility_off" size={16} />}
 								</Button>
 							</div>
 							<FormMessage errors={field.state.meta.errors} />

apps/web/src/dialogs/auth/enable-two-factor.tsx

@@ -1,7 +1,6 @@
 import type { DialogProps } from "../store";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
-import { ArrowDownIcon, CopyIcon, EyeIcon, EyeSlashIcon } from "@phosphor-icons/react";
 import { useStore } from "@tanstack/react-form";
 import { useRouter } from "@tanstack/react-router";
 import { QRCodeSVG } from "qrcode.react";
@@ -18,6 +17,7 @@ import {
 	DialogTitle,
 } from "@reactive-resume/ui/components/dialog";
 import { FormControl, FormItem, FormLabel, FormMessage } from "@reactive-resume/ui/components/form";
+import { Icon } from "@reactive-resume/ui/components/icon";
 import { Input } from "@reactive-resume/ui/components/input";
 import { OTPField } from "@reactive-resume/ui/components/otp-field";
 import { toast } from "@reactive-resume/ui/components/toast";
@@ -225,7 +225,7 @@ export function EnableTwoFactorDialog(_: DialogProps<"auth.two-factor.enable">)
 															message: "Show password",
 														})}
 											</span>
-											{showPassword ? <EyeIcon /> : <EyeSlashIcon />}
+											{showPassword ? <Icon name="visibility" size={16} /> : <Icon name="visibility_off" size={16} />}
 										</Button>
 									</div>
 									<FormMessage errors={field.state.meta.errors} />
@@ -255,7 +255,7 @@ export function EnableTwoFactorDialog(_: DialogProps<"auth.two-factor.enable">)
 													message: "Copy secret",
 												})}
 											</span>
-											<CopyIcon />
+											<Icon name="content_copy" size={16} />
 										</Button>
 									</div>
 
@@ -321,11 +321,11 @@ export function EnableTwoFactorDialog(_: DialogProps<"auth.two-factor.enable">)
 
 								<div className="flex items-center gap-x-2">
 									<Button type="button" variant="secondary" onClick={handleDownloadBackupCodes} className="flex-1">
-										<ArrowDownIcon className="me-2 size-4" />
+										<Icon name="arrow_downward" size={16} className="me-2" />
 										<Trans comment="Action button to download two-factor backup codes as a text file">Download</Trans>
 									</Button>
 									<Button type="button" variant="ghost" onClick={handleCopyBackupCodes} className="flex-1">
-										<CopyIcon className="me-2 size-4" />
+										<Icon name="content_copy" size={16} className="me-2" />
 										<Trans comment="Action button to copy two-factor backup codes to clipboard">Copy</Trans>
 									</Button>
 								</div>

apps/web/src/dialogs/resume/index.tsx

@@ -1,7 +1,6 @@
 import type { DialogProps } from "../store";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
-import { MagicWandIcon, PencilSimpleLineIcon } from "@phosphor-icons/react";
 import { useMutation } from "@tanstack/react-query";
 import { useNavigate, useParams } from "@tanstack/react-router";
 import z from "zod";
@@ -14,6 +13,7 @@ import {
 	DialogTitle,
 } from "@reactive-resume/ui/components/dialog";
 import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from "@reactive-resume/ui/components/form";
+import { Icon } from "@reactive-resume/ui/components/icon";
 import { Input } from "@reactive-resume/ui/components/input";
 import { toast } from "@reactive-resume/ui/components/toast";
 import { generateRandomName } from "@reactive-resume/utils/string";
@@ -85,7 +85,7 @@ export function UpdateResumeDialog({ data }: DialogProps<"resume.update">) {
 		<DialogContent>
 			<DialogHeader>
 				<DialogTitle className="flex items-center gap-x-2">
-					<PencilSimpleLineIcon />
+					<Icon name="edit" size={16} />
 					<Trans>Update Resume</Trans>
 				</DialogTitle>
 				<DialogDescription>
@@ -150,7 +150,7 @@ export function DuplicateResumeDialog({ data }: DialogProps<"resume.duplicate">)
 		<DialogContent>
 			<DialogHeader>
 				<DialogTitle className="flex items-center gap-x-2">
-					<PencilSimpleLineIcon />
+					<Icon name="edit" size={16} />
 					<Trans>Duplicate Resume</Trans>
 				</DialogTitle>
 				<DialogDescription>
@@ -208,7 +208,7 @@ const ResumeForm = withForm({
 								/>
 
 								<Button size="icon" variant="secondary" title={t`Generate a random name`} onClick={onGenerateName}>
-									<MagicWandIcon />
+									<Icon name="auto_fix_high" size={16} />
 								</Button>
 							</div>
 							<FormMessage errors={field.state.meta.errors} />

apps/web/src/features/applications/components/application-form-sheet.tsx

@@ -3,12 +3,12 @@ import type { Application } from "../types";
 import type { FileAttachment } from "./file-attachment-field";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
-import { SparkleIcon, XIcon } from "@phosphor-icons/react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useState } from "react";
 import { STAGES } from "@reactive-resume/schema/applications/data";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@reactive-resume/ui/components/accordion";
 import { Button } from "@reactive-resume/ui/components/button";
+import { Icon } from "@reactive-resume/ui/components/icon";
 import { Input } from "@reactive-resume/ui/components/input";
 import { Label } from "@reactive-resume/ui/components/label";
 import {
@@ -216,7 +216,7 @@ export function ApplicationFormSheet({ open, onOpenChange, application }: Props)
 							<AccordionItem value="job-description">
 								<AccordionTrigger>
 									<span className="flex items-center gap-1.5">
-										<SparkleIcon className="text-accent-text" />
+										<Icon name="auto_awesome" size={16} className="text-accent-text" />
 										<Trans>Job description</Trans>
 									</span>
 								</AccordionTrigger>
@@ -253,7 +253,7 @@ export function ApplicationFormSheet({ open, onOpenChange, application }: Props)
 											disabled={form.jobDescription.trim().length < MIN_AUTOFILL_CHARS || autofill.isPending}
 											onClick={() => runAutofill(form.jobDescription)}
 										>
-											<SparkleIcon />
+											<Icon name="auto_awesome" size={16} />
 											<Trans>Fill fields</Trans>
 										</Button>
 									</div>
@@ -464,7 +464,7 @@ function TagsField({ value, suggestions, onChange }: TagsFieldProps) {
 								className="hover:text-danger-text"
 								onClick={() => onChange(value.filter((t) => t !== tag))}
 							>
-								<XIcon className="size-3" />
+								<Icon name="close" size={12} />
 							</button>
 						</span>
 					))}

apps/web/src/features/applications/components/calendar-view.tsx

@@ -4,17 +4,10 @@ import type { Application } from "../types";
 import { t } from "@lingui/core/macro";
 import { useLingui } from "@lingui/react";
 import { Trans } from "@lingui/react/macro";
-import {
-	CalendarBlankIcon,
-	CalendarPlusIcon,
-	CaretLeftIcon,
-	CaretRightIcon,
-	MapPinIcon,
-	PlusIcon,
-} from "@phosphor-icons/react";
 import { useMemo, useState } from "react";
 import { INTERVIEW_KINDS } from "@reactive-resume/schema/applications/data";
 import { Button } from "@reactive-resume/ui/components/button";
+import { Icon } from "@reactive-resume/ui/components/icon";
 import { Popover, PopoverContent, PopoverTrigger } from "@reactive-resume/ui/components/popover";
 import { cn } from "@reactive-resume/utils/style";
 import {
@@ -101,7 +94,7 @@ export function ApplicationCalendar({ applications, allApplications, onOpen }: A
 
 					<div className="ms-auto flex items-center gap-1">
 						<Button size="icon-sm" variant="ghost" title={t`Previous month`} onClick={() => shiftMonth(-1)}>
-							<CaretLeftIcon />
+							<Icon name="chevron_left" size={16} />
 						</Button>
 						<Button
 							size="sm"
@@ -112,10 +105,10 @@ export function ApplicationCalendar({ applications, allApplications, onOpen }: A
 							<Trans>This month</Trans>
 						</Button>
 						<Button size="icon-sm" variant="ghost" title={t`Next month`} onClick={() => shiftMonth(1)}>
-							<CaretRightIcon />
+							<Icon name="chevron_right" size={16} />
 						</Button>
 						<Button size="sm" className="ms-2" onClick={() => schedule()}>
-							<CalendarPlusIcon />
+							<Icon name="calendar_add_on" size={16} />
 							<Trans>Schedule interview</Trans>
 						</Button>
 					</div>
@@ -158,7 +151,7 @@ export function ApplicationCalendar({ applications, allApplications, onOpen }: A
 										className="flex size-6 items-center justify-center rounded-md text-ink-3 opacity-0 transition-opacity hover:bg-sunken hover:text-ink focus-visible:opacity-100 group-hover/day:opacity-100 max-sm:hidden"
 										onClick={() => schedule(day)}
 									>
-										<PlusIcon className="size-3.5" />
+										<Icon name="add" size={14} />
 									</button>
 									<span
 										className={cn(
@@ -226,7 +219,7 @@ export function ApplicationCalendar({ applications, allApplications, onOpen }: A
 				{upcoming.length === 0 ? (
 					<div className="flex flex-col items-center gap-3 rounded-xl border border-line border-dashed px-4 py-8 text-center">
 						<div className="flex size-10 items-center justify-center rounded-full bg-sunken">
-							<CalendarBlankIcon className="size-5 text-ink-3" />
+							<Icon name="calendar_today" size={20} className="text-ink-3" />
 						</div>
 						<div className="space-y-1">
 							<p className="font-medium text-sm">
@@ -237,7 +230,7 @@ export function ApplicationCalendar({ applications, allApplications, onOpen }: A
 							</p>
 						</div>
 						<Button size="sm" variant="secondary" onClick={() => schedule()}>
-							<CalendarPlusIcon />
+							<Icon name="calendar_add_on" size={16} />
 							<Trans>Schedule interview</Trans>
 						</Button>
 					</div>
@@ -303,7 +296,7 @@ function UpcomingCard({ item, timeRange, locale, onEdit, onOpenApplication }: Up
 				</span>
 				{item.interview.location && (
 					<span className="mt-1.5 flex items-center gap-1 text-ink-3 text-xs">
-						<MapPinIcon className="shrink-0" />
+						<Icon name="location_on" size={16} className="shrink-0" />
 						<span className="truncate">{item.interview.location}</span>
 					</span>
 				)}

apps/web/src/features/applications/components/file-attachment-field.tsx

@@ -1,8 +1,8 @@
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
-import { FilePdfIcon, UploadSimpleIcon, XIcon } from "@phosphor-icons/react";
 import { useMutation } from "@tanstack/react-query";
 import { useRef } from "react";
+import { Icon } from "@reactive-resume/ui/components/icon";
 import { toast } from "@reactive-resume/ui/components/toast";
 import { orpc } from "@/libs/orpc/client";
 
@@ -57,7 +57,7 @@ export function FileAttachmentField({ value, onChange, attachLabel, disabled }:
 			{value ? (
 				<div className="flex items-center gap-3 rounded-lg border border-line p-2.5">
 					<span className="flex size-8 items-center justify-center rounded-md bg-accent/10 text-accent-text">
-						<FilePdfIcon />
+						<Icon name="picture_as_pdf" size={16} />
 					</span>
 					<a
 						href={value.url}
@@ -74,7 +74,7 @@ export function FileAttachmentField({ value, onChange, attachLabel, disabled }:
 						className="text-ink-3 hover:text-danger-text disabled:opacity-40"
 						onClick={clear}
 					>
-						<XIcon />
+						<Icon name="close" size={16} />
 					</button>
 				</div>
 			) : (
@@ -84,7 +84,7 @@ export function FileAttachmentField({ value, onChange, attachLabel, disabled }:
 					onClick={() => inputRef.current?.click()}
 					className="flex w-full items-center gap-2 rounded-lg border border-line border-dashed p-2.5 text-ink-3 text-sm hover:bg-sunken/50 disabled:opacity-60"
 				>
-					<UploadSimpleIcon />
+					<Icon name="upload" size={16} />
 					{upload.isPending ? <Trans>Uploading…</Trans> : attachLabel}
 				</button>
 			)}

apps/web/src/features/applications/components/insights-view.tsx

@@ -2,10 +2,10 @@ import type { ApplicationTimelineEntry } from "@reactive-resume/schema/applicati
 import type { Application } from "../types";
 import { t } from "@lingui/core/macro";
 import { Plural, Trans } from "@lingui/react/macro";
-import { DownloadSimpleIcon } from "@phosphor-icons/react";
 import { useQuery } from "@tanstack/react-query";
 import { useMemo, useRef } from "react";
 import { Button } from "@reactive-resume/ui/components/button";
+import { Icon } from "@reactive-resume/ui/components/icon";
 import { toast } from "@reactive-resume/ui/components/toast";
 import { orpc } from "@/libs/orpc/client";
 import { computeInsights, computeOutcomes, computeTimeline } from "../insights";
@@ -305,7 +305,7 @@ function PipelineFlow({ insights }: { insights: ReturnType<typeof computeInsight
 					<Trans>Where your applications went</Trans>
 				</h3>
 				<Button size="sm" variant="secondary" onClick={() => void exportPng()}>
-					<DownloadSimpleIcon />
+					<Icon name="download" size={16} />
 					<Trans>Export PNG</Trans>
 				</Button>
 			</div>

apps/web/src/features/applications/components/interview-dialog.tsx

@@ -2,7 +2,6 @@ import type { InterviewKind, InterviewTimelineEntry } from "@reactive-resume/sch
 import type { Application } from "../types";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
-import { TrashIcon } from "@phosphor-icons/react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useEffect, useId, useState } from "react";
 import { INTERVIEW_KINDS } from "@reactive-resume/schema/applications/data";
@@ -15,6 +14,7 @@ import {
 	DialogHeader,
 	DialogTitle,
 } from "@reactive-resume/ui/components/dialog";
+import { Icon } from "@reactive-resume/ui/components/icon";
 import { Input } from "@reactive-resume/ui/components/input";
 import { Label } from "@reactive-resume/ui/components/label";
 import { Textarea } from "@reactive-resume/ui/components/textarea";
@@ -267,7 +267,7 @@ export function InterviewDialog({
 								if (confirmed) remove.mutate({ id: draft.applicationId, entryId: interview.id });
 							}}
 						>
-							<TrashIcon />
+							<Icon name="delete" size={16} />
 							<Trans>Delete</Trans>
 						</Button>
 					) : (

apps/web/src/features/ats-checker/report/report-view.tsx

@@ -1,9 +1,9 @@
 import type { PdfAtsReport, PdfCategory, PdfCategoryScore } from "@reactive-resume/resume/ats-pdf";
 import { Trans } from "@lingui/react/macro";
-import { CheckCircleIcon } from "@phosphor-icons/react";
 import { useMemo } from "react";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@reactive-resume/ui/components/accordion";
 import { Badge } from "@reactive-resume/ui/components/badge";
+import { Icon } from "@reactive-resume/ui/components/icon";
 import { cn } from "@reactive-resume/utils/style";
 import { getPdfCategoryDescription, getPdfCategoryLabel } from "../messages";
 import { FindingRow } from "./finding-row";
@@ -106,7 +106,7 @@ function CategorySection({ category, findings }: CategorySectionProps) {
 
 				{findings.length === 0 ? (
 					<div className="flex items-center gap-2 rounded-md border border-dashed p-2.5">
-						<CheckCircleIcon className="size-4 shrink-0 text-accent-text" />
+						<Icon name="check_circle" size={16} className="shrink-0 text-accent-text" />
 						<span className="text-ink-3 text-xs leading-normal">
 							<Trans>Nothing to fix here.</Trans>
 						</span>
@@ -145,7 +145,7 @@ function WritingSection({ tips }: WritingSectionProps) {
 
 				{tips.length === 0 ? (
 					<div className="flex items-center gap-2 rounded-md border border-dashed p-2.5">
-						<CheckCircleIcon className="size-4 shrink-0 text-accent-text" />
+						<Icon name="check_circle" size={16} className="shrink-0 text-accent-text" />
 						<span className="text-ink-3 text-xs leading-normal">
 							<Trans>Nothing to suggest.</Trans>
 						</span>

apps/web/src/features/ats-checker/report/score-header.tsx

@@ -1,7 +1,7 @@
 import type { PdfAtsReport } from "@reactive-resume/resume/ats-pdf";
 import type { CSSProperties } from "react";
 import { Trans } from "@lingui/react/macro";
-import { InfoIcon } from "@phosphor-icons/react";
+import { Icon } from "@reactive-resume/ui/components/icon";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@reactive-resume/ui/components/tooltip";
 import { cn } from "@reactive-resume/utils/style";
 import { getPdfFindingMessage } from "../messages";
@@ -52,7 +52,7 @@ export function ScoreHeader({ report }: ScoreHeaderProps) {
 							render={
 								<span className="inline-flex cursor-help items-center gap-1 underline decoration-dotted underline-offset-2">
 									<Trans>{report.skippedChecks} skipped</Trans>
-									<InfoIcon className="size-3" />
+									<Icon name="info" size={12} />
 								</span>
 							}
 						/>

apps/web/src/features/auth/components/social-auth.tsx

@@ -1,10 +1,11 @@
 import type { RouterOutput } from "@/libs/orpc/client";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
-import { FingerprintIcon, GithubLogoIcon, GoogleLogoIcon, LinkedinLogoIcon, VaultIcon } from "@phosphor-icons/react";
+import { GithubLogoIcon, GoogleLogoIcon, LinkedinLogoIcon } from "@phosphor-icons/react";
 import { useQuery } from "@tanstack/react-query";
 import { useRouter, useSearch } from "@tanstack/react-router";
 import { Button } from "@reactive-resume/ui/components/button";
+import { Icon } from "@reactive-resume/ui/components/icon";
 import { Skeleton } from "@reactive-resume/ui/components/skeleton";
 import { toast } from "@reactive-resume/ui/components/toast";
 import { cn } from "@reactive-resume/utils/style";
@@ -91,7 +92,7 @@ function SocialAuthButtons({ providers }: SocialAuthButtonsProps) {
 				}
 				className={cn("hidden", "custom" in providers && "inline-flex")}
 			>
-				<VaultIcon />
+				<Icon name="key" size={16} />
 				{providers.custom}
 			</Button>
 
@@ -102,7 +103,7 @@ function SocialAuthButtons({ providers }: SocialAuthButtonsProps) {
 				}
 				className={cn("hidden", "passkey" in providers && "inline-flex")}
 			>
-				<FingerprintIcon />
+				<Icon name="fingerprint" size={16} />
 				<Trans comment="Label for passkey sign-in button">Passkey</Trans>
 			</Button>
 

apps/web/src/features/auth/pages/error.tsx

@@ -1,9 +1,9 @@
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
-import { ArrowLeftIcon, WarningIcon } from "@phosphor-icons/react";
 import { Link, useRouteContext } from "@tanstack/react-router";
 import { Alert, AlertDescription, AlertTitle } from "@reactive-resume/ui/components/alert";
 import { buttonVariants } from "@reactive-resume/ui/components/button";
+import { Icon } from "@reactive-resume/ui/components/icon";
 
 function getErrorMessage(code: string | undefined): string {
 	switch (code) {
@@ -68,7 +68,7 @@ export function AuthErrorPage({ code, description }: AuthErrorPageProps) {
 			</div>
 
 			<Alert>
-				<WarningIcon />
+				<Icon name="warning" size={16} />
 				<AlertTitle>{getErrorMessage(code)}</AlertTitle>
 				{description && (
 					<AlertDescription>
@@ -84,14 +84,14 @@ export function AuthErrorPage({ code, description }: AuthErrorPageProps) {
 
 			{returnsToSettings ? (
 				<Link to="/dashboard/settings/account" className={buttonVariants({ variant: "secondary" })}>
-					<ArrowLeftIcon />
+					<Icon name="arrow_back" size={16} />
 					<Trans comment="Action returning a signed-in user to the page where they manage linked providers">
 						Back to authentication settings
 					</Trans>
 				</Link>
 			) : (
 				<Link to="/auth/login" className={buttonVariants({ variant: "secondary" })}>
-					<ArrowLeftIcon />
+					<Icon name="arrow_back" size={16} />
 					<Trans comment="Action returning the visitor to the sign-in page after a failed sign-in">
 						Back to sign in
 					</Trans>

apps/web/src/features/auth/pages/forgot-password.tsx

@@ -1,11 +1,11 @@
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
-import { ArrowRightIcon } from "@phosphor-icons/react";
 import { Link } from "@tanstack/react-router";
 import { useState } from "react";
 import z from "zod";
 import { Button } from "@reactive-resume/ui/components/button";
 import { FormControl, FormItem, FormLabel, FormMessage } from "@reactive-resume/ui/components/form";
+import { Icon } from "@reactive-resume/ui/components/icon";
 import { Input } from "@reactive-resume/ui/components/input";
 import { toast } from "@reactive-resume/ui/components/toast";
 import { authClient } from "@/libs/auth/client";
@@ -67,7 +67,7 @@ export function ForgotPasswordPage() {
 							render={
 								<Link to="/auth/login">
 									<Trans comment="Call-to-action link from forgot-password page to login page">Sign in now</Trans>{" "}
-									<ArrowRightIcon />
+									<Icon name="arrow_forward" size={16} />
 								</Link>
 							}
 						/>

apps/web/src/features/auth/pages/login.tsx

@@ -1,6 +1,5 @@
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
-import { ArrowRightIcon, EyeIcon, EyeSlashIcon } from "@phosphor-icons/react";
 import { useQuery } from "@tanstack/react-query";
 import { Link, useNavigate, useRouter, useSearch } from "@tanstack/react-router";
 import { useEffect, useRef } from "react";
@@ -8,6 +7,7 @@ import { useToggle } from "usehooks-ts";
 import z from "zod";
 import { Button } from "@reactive-resume/ui/components/button";
 import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from "@reactive-resume/ui/components/form";
+import { Icon } from "@reactive-resume/ui/components/icon";
 import { Input } from "@reactive-resume/ui/components/input";
 import { toast } from "@reactive-resume/ui/components/toast";
 import { authClient } from "@/libs/auth/client";
@@ -136,7 +136,7 @@ export function LoginPage({ disableEmailAuth, disableSignups }: Props) {
 										<Trans comment="Call-to-action link from login page to account registration page">
 											Create one now
 										</Trans>{" "}
-										<ArrowRightIcon />
+										<Icon name="arrow_forward" size={16} />
 									</Link>
 								}
 							/>
@@ -233,7 +233,7 @@ export function LoginPage({ disableEmailAuth, disableSignups }: Props) {
 													})
 										}
 									>
-										{showPassword ? <EyeIcon /> : <EyeSlashIcon />}
+										{showPassword ? <Icon name="visibility" size={16} /> : <Icon name="visibility_off" size={16} />}
 									</Button>
 								</div>
 								<FormMessage errors={field.state.meta.errors} />

apps/web/src/features/auth/pages/register.tsx

@@ -1,6 +1,5 @@
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
-import { ArrowRightIcon, EyeIcon, EyeSlashIcon } from "@phosphor-icons/react";
 import { Link, useSearch } from "@tanstack/react-router";
 import { useState } from "react";
 import { useToggle } from "usehooks-ts";
@@ -8,6 +7,7 @@ import z from "zod";
 import { Alert, AlertDescription, AlertTitle } from "@reactive-resume/ui/components/alert";
 import { Button } from "@reactive-resume/ui/components/button";
 import { FormControl, FormItem, FormLabel, FormMessage } from "@reactive-resume/ui/components/form";
+import { Icon } from "@reactive-resume/ui/components/icon";
 import { Input } from "@reactive-resume/ui/components/input";
 import { toast } from "@reactive-resume/ui/components/toast";
 import { authClient } from "@/libs/auth/client";
@@ -104,7 +104,7 @@ export function RegisterPage({ disableEmailAuth }: Props) {
 							render={
 								<Link to="/auth/login" search={{ callbackURL, reauthenticate }}>
 									<Trans comment="Call-to-action link from registration page to login page">Sign in now</Trans>{" "}
-									<ArrowRightIcon />
+									<Icon name="arrow_forward" size={16} />
 								</Link>
 							}
 						/>
@@ -241,7 +241,7 @@ export function RegisterPage({ disableEmailAuth }: Props) {
 													})
 										}
 									>
-										{showPassword ? <EyeIcon /> : <EyeSlashIcon />}
+										{showPassword ? <Icon name="visibility" size={16} /> : <Icon name="visibility_off" size={16} />}
 									</Button>
 								</div>
 								<FormMessage errors={field.state.meta.errors} />
@@ -287,7 +287,7 @@ function PostSignupScreen() {
 				render={
 					<a href={callbackURL ?? "/dashboard"}>
 						<Trans comment="Button label to continue to dashboard after successful registration">Continue</Trans>{" "}
-						<ArrowRightIcon />
+						<Icon name="arrow_forward" size={16} />
 					</a>
 				}
 			/>

apps/web/src/features/auth/pages/reset-password.tsx

@@ -1,11 +1,11 @@
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
-import { EyeIcon, EyeSlashIcon } from "@phosphor-icons/react";
 import { useNavigate } from "@tanstack/react-router";
 import { useToggle } from "usehooks-ts";
 import z from "zod";
 import { Button } from "@reactive-resume/ui/components/button";
 import { FormControl, FormItem, FormLabel, FormMessage } from "@reactive-resume/ui/components/form";
+import { Icon } from "@reactive-resume/ui/components/icon";
 import { Input } from "@reactive-resume/ui/components/input";
 import { toast } from "@reactive-resume/ui/components/toast";
 import { authClient } from "@/libs/auth/client";
@@ -113,7 +113,7 @@ export function ResetPasswordPage({ token }: Props) {
 												})
 									}
 								>
-									{showPassword ? <EyeIcon /> : <EyeSlashIcon />}
+									{showPassword ? <Icon name="visibility" size={16} /> : <Icon name="visibility_off" size={16} />}
 								</Button>
 							</div>
 							<FormMessage errors={field.state.meta.errors} />

apps/web/src/features/auth/pages/resume-password.tsx

@@ -1,13 +1,13 @@
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
 import { ORPCError } from "@orpc/client";
-import { EyeIcon, EyeSlashIcon, LockOpenIcon } from "@phosphor-icons/react";
 import { useMutation } from "@tanstack/react-query";
 import { useNavigate } from "@tanstack/react-router";
 import { useToggle } from "usehooks-ts";
 import z from "zod";
 import { Button } from "@reactive-resume/ui/components/button";
 import { FormControl, FormItem, FormLabel, FormMessage } from "@reactive-resume/ui/components/form";
+import { Icon } from "@reactive-resume/ui/components/icon";
 import { Input } from "@reactive-resume/ui/components/input";
 import { toast } from "@reactive-resume/ui/components/toast";
 import { getReadableErrorMessage } from "@/libs/error-message";
@@ -132,7 +132,7 @@ export function ResumePasswordPage({ username, slug, redirectPath }: ResumePassw
 												})
 									}
 								>
-									{showPassword ? <EyeIcon /> : <EyeSlashIcon />}
+									{showPassword ? <Icon name="visibility" size={16} /> : <Icon name="visibility_off" size={16} />}
 								</Button>
 							</div>
 							<FormMessage errors={field.state.meta.errors} />
@@ -141,7 +141,7 @@ export function ResumePasswordPage({ username, slug, redirectPath }: ResumePassw
 				</form.Field>
 
 				<Button type="submit" className="w-full">
-					<LockOpenIcon />
+					<Icon name="lock_open" size={16} />
 					<Trans comment="Primary action button label to unlock a password-protected resume">Unlock</Trans>
 				</Button>
 			</form>

apps/web/src/features/auth/pages/verify-2fa.tsx

@@ -1,10 +1,10 @@
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
-import { ArrowLeftIcon, CheckIcon } from "@phosphor-icons/react";
 import { Link, useNavigate, useRouter, useSearch } from "@tanstack/react-router";
 import z from "zod";
 import { Button } from "@reactive-resume/ui/components/button";
 import { FormControl, FormItem, FormMessage } from "@reactive-resume/ui/components/form";
+import { Icon } from "@reactive-resume/ui/components/icon";
 import { Input } from "@reactive-resume/ui/components/input";
 import { OTPField } from "@reactive-resume/ui/components/otp-field";
 import { toast } from "@reactive-resume/ui/components/toast";
@@ -133,7 +133,7 @@ function TwoFactorVerificationPage({ backupCode = false }: TwoFactorVerification
 						nativeButton={false}
 						render={
 							<Link to={backupCode ? "/auth/verify-2fa" : "/auth/login"} search={{ callbackURL, reauthenticate }}>
-								<ArrowLeftIcon />
+								<Icon name="arrow_back" size={16} />
 								{backupCode ? (
 									<Trans comment="Secondary navigation button on backup-code verification screen">Go Back</Trans>
 								) : (
@@ -144,7 +144,7 @@ function TwoFactorVerificationPage({ backupCode = false }: TwoFactorVerification
 					/>
 
 					<Button type="submit" className="flex-1">
-						<CheckIcon />
+						<Icon name="check" size={16} />
 						{backupCode ? (
 							<Trans comment="Primary action button to submit backup code">Verify</Trans>
 						) : (

apps/web/src/features/command-palette/pages/ask.tsx

@@ -1,9 +1,9 @@
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
-import { SparkleIcon } from "@phosphor-icons/react";
 import { useQueryClient } from "@tanstack/react-query";
 import { useNavigate, useRouteContext, useRouterState } from "@tanstack/react-router";
 import { CommandItem } from "@reactive-resume/ui/components/command";
+import { Icon } from "@reactive-resume/ui/components/icon";
 import { toast } from "@reactive-resume/ui/components/toast";
 import { openAssistantFrom } from "@/features/assistant/open";
 import { orpc } from "@/libs/orpc/client";
@@ -49,7 +49,7 @@ export function AskCommandGroup() {
 	return (
 		<BaseCommandGroup heading={<Trans>Ask</Trans>}>
 			<CommandItem value={`ask ${question}`} onSelect={() => void ask()}>
-				<SparkleIcon />
+				<Icon name="auto_awesome" size={16} />
 				<span className="min-w-0 truncate">
 					<Trans>Ask the assistant “{question}”</Trans>
 				</span>

apps/web/src/features/command-palette/pages/navigation.tsx

@@ -1,18 +1,8 @@
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
-import {
-	BriefcaseIcon,
-	GearIcon,
-	HouseSimpleIcon,
-	KeyIcon,
-	PlusIcon,
-	ReadCvLogoIcon,
-	SealCheckIcon,
-	TrashIcon,
-	UserCircleIcon,
-} from "@phosphor-icons/react";
 import { useNavigate, useRouteContext } from "@tanstack/react-router";
 import { CommandItem } from "@reactive-resume/ui/components/command";
+import { Icon } from "@reactive-resume/ui/components/icon";
 import { useDialogStore } from "@/dialogs/store";
 import { useCommandPaletteStore } from "../store";
 import { BaseCommandGroup } from "./base";
@@ -32,7 +22,7 @@ export function NavigationCommandGroup() {
 		<>
 			<BaseCommandGroup heading={<Trans>Go to…</Trans>}>
 				<CommandItem keywords={[t`Home`]} value="navigation.home" onSelect={() => onNavigate("/")}>
-					<HouseSimpleIcon />
+					<Icon name="home" size={16} />
 					<Trans>Home</Trans>
 				</CommandItem>
 
@@ -42,7 +32,7 @@ export function NavigationCommandGroup() {
 					value="navigation.documents"
 					onSelect={() => onNavigate("/dashboard")}
 				>
-					<ReadCvLogoIcon />
+					<Icon name="description" size={16} />
 					<Trans>Documents</Trans>
 				</CommandItem>
 
@@ -55,7 +45,7 @@ export function NavigationCommandGroup() {
 						useDialogStore.getState().openDialog("document.new", undefined);
 					}}
 				>
-					<PlusIcon />
+					<Icon name="add" size={16} />
 					<Trans>New document</Trans>
 				</CommandItem>
 
@@ -65,7 +55,7 @@ export function NavigationCommandGroup() {
 					value="navigation.trash"
 					onSelect={() => onNavigate("/dashboard/trash")}
 				>
-					<TrashIcon />
+					<Icon name="delete" size={16} />
 					<Trans>Trash</Trans>
 				</CommandItem>
 
@@ -74,7 +64,7 @@ export function NavigationCommandGroup() {
 					value="navigation.ats-checker"
 					onSelect={() => onNavigate("/ats-checker")}
 				>
-					<SealCheckIcon />
+					<Icon name="verified" size={16} />
 					<Trans>ATS Checker</Trans>
 				</CommandItem>
 
@@ -84,7 +74,7 @@ export function NavigationCommandGroup() {
 					value="navigation.applications"
 					onSelect={() => onNavigate("/dashboard/applications")}
 				>
-					<BriefcaseIcon />
+					<Icon name="work" size={16} />
 					<Trans>Applications</Trans>
 				</CommandItem>
 
@@ -97,7 +87,7 @@ export function NavigationCommandGroup() {
 						reset();
 					}}
 				>
-					<PlusIcon />
+					<Icon name="add" size={16} />
 					<Trans>New Application</Trans>
 				</CommandItem>
 
@@ -107,7 +97,7 @@ export function NavigationCommandGroup() {
 					value="navigation.settings"
 					onSelect={() => pushPage("settings")}
 				>
-					<GearIcon />
+					<Icon name="settings" size={16} />
 					<Trans>Settings</Trans>
 				</CommandItem>
 			</BaseCommandGroup>
@@ -126,7 +116,7 @@ export function NavigationCommandGroup() {
 					value="navigation.settings.account"
 					onSelect={() => onNavigate("/dashboard/settings/account")}
 				>
-					<UserCircleIcon />
+					<Icon name="account_circle" size={16} />
 					<Trans>Account</Trans>
 				</CommandItem>
 
@@ -135,7 +125,7 @@ export function NavigationCommandGroup() {
 					value="navigation.settings.preferences"
 					onSelect={() => onNavigate("/dashboard/settings/preferences")}
 				>
-					<GearIcon />
+					<Icon name="settings" size={16} />
 					<Trans>Preferences</Trans>
 				</CommandItem>
 
@@ -144,7 +134,7 @@ export function NavigationCommandGroup() {
 					value="navigation.settings.ai"
 					onSelect={() => onNavigate("/dashboard/settings/ai")}
 				>
-					<KeyIcon />
+					<Icon name="key" size={16} />
 					<Trans>AI & developer</Trans>
 				</CommandItem>
 			</BaseCommandGroup>

apps/web/src/features/command-palette/pages/preferences/index.tsx

@@ -1,6 +1,6 @@
 import { Trans } from "@lingui/react/macro";
-import { PaletteIcon, TranslateIcon } from "@phosphor-icons/react";
 import { CommandItem } from "@reactive-resume/ui/components/command";
+import { Icon } from "@reactive-resume/ui/components/icon";
 import { useCommandPaletteStore } from "../../store";
 import { BaseCommandGroup } from "../base";
 import { LanguageCommandPage } from "./language";
@@ -13,12 +13,12 @@ export function PreferencesCommandGroup() {
 		<>
 			<BaseCommandGroup heading={<Trans>Preferences</Trans>}>
 				<CommandItem onSelect={() => pushPage("theme")}>
-					<PaletteIcon />
+					<Icon name="palette" size={16} />
 					<Trans>Change theme to…</Trans>
 				</CommandItem>
 
 				<CommandItem onSelect={() => pushPage("language")}>
-					<TranslateIcon />
+					<Icon name="translate" size={16} />
 					<Trans>Change language to…</Trans>
 				</CommandItem>
 			</BaseCommandGroup>

apps/web/src/features/command-palette/pages/resumes.tsx

@@ -1,11 +1,11 @@
 import type { RouterOutput } from "@/libs/orpc/client";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
-import { BriefcaseIcon, ChatCircleDotsIcon, PlusIcon, ReadCvLogoIcon } from "@phosphor-icons/react";
 import { useQuery } from "@tanstack/react-query";
 import { useNavigate, useRouteContext } from "@tanstack/react-router";
 import { CommandLoading } from "cmdk";
 import { CommandItem, CommandShortcut } from "@reactive-resume/ui/components/command";
+import { Icon } from "@reactive-resume/ui/components/icon";
 import { Kbd } from "@reactive-resume/ui/components/kbd";
 import { useDialogStore } from "@/dialogs/store";
 import { applicationsListQueryOptions } from "@/features/applications/queries";
@@ -108,12 +108,12 @@ export function ResumesCommandGroup() {
 		<>
 			<BaseCommandGroup heading={<Trans>Search for…</Trans>}>
 				<CommandItem keywords={[t`Resumes`]} value="search.resumes" onSelect={() => pushPage("resumes")}>
-					<ReadCvLogoIcon />
+					<Icon name="description" size={16} />
 					<Trans>Resumes</Trans>
 				</CommandItem>
 
 				<CommandItem keywords={[t`Applications`]} value="search.applications" onSelect={() => pushPage("applications")}>
-					<BriefcaseIcon />
+					<Icon name="work" size={16} />
 					<Trans>Applications</Trans>
 				</CommandItem>
 
@@ -122,7 +122,7 @@ export function ResumesCommandGroup() {
 					value="search.threads"
 					onSelect={() => pushPage("threads")}
 				>
-					<ChatCircleDotsIcon />
+					<Icon name="chat" size={16} />
 					<Trans>Assistant conversations</Trans>
 				</CommandItem>
 			</BaseCommandGroup>
@@ -130,7 +130,7 @@ export function ResumesCommandGroup() {
 			{searchPage === "resumes" ? (
 				<BaseCommandGroup page={commandSearchPage} heading={<Trans>Resumes</Trans>}>
 					<CommandItem value="resumes.create" onSelect={onCreate}>
-						<PlusIcon />
+						<Icon name="add" size={16} />
 						<Trans>Create a new resume</Trans>
 					</CommandItem>
 
@@ -146,7 +146,7 @@ export function ResumesCommandGroup() {
 								keywords={[resume.name, resume.slug]}
 								onSelect={() => onNavigate(`/builder/${resume.id}`)}
 							>
-								<ReadCvLogoIcon />
+								<Icon name="description" size={16} />
 								{resume.name}
 
 								<CommandShortcut className="opacity-0 group-data-[selected=true]/command-item:opacity-100">
@@ -163,7 +163,7 @@ export function ResumesCommandGroup() {
 			{searchPage === "applications" ? (
 				<BaseCommandGroup page={commandSearchPage} heading={<Trans>Applications</Trans>}>
 					<CommandItem value="applications.create" onSelect={onCreateApplication}>
-						<PlusIcon />
+						<Icon name="add" size={16} />
 						<Trans>New Application</Trans>
 					</CommandItem>
 
@@ -179,7 +179,7 @@ export function ResumesCommandGroup() {
 								keywords={[application.company, application.role]}
 								onSelect={() => onOpenApplication(application)}
 							>
-								<BriefcaseIcon />
+								<Icon name="work" size={16} />
 								<span className="min-w-0 truncate">{application.company}</span>
 								<span className="truncate text-ink-3 text-xs">{application.role}</span>
 							</CommandItem>
@@ -205,7 +205,7 @@ export function ResumesCommandGroup() {
 									keywords={[thread.title, documentName]}
 									onSelect={() => onOpenThread(thread)}
 								>
-									<ChatCircleDotsIcon />
+									<Icon name="chat" size={16} />
 									<span className="min-w-0 truncate">{thread.title}</span>
 									<span className="truncate text-ink-3 text-xs">{documentName}</span>
 								</CommandItem>

apps/web/src/features/resume/editor/write/picture-settings.tsx

@@ -2,14 +2,6 @@ import type { Area } from "react-easy-crop";
 import type z from "zod";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
-import {
-	EyeIcon,
-	EyeSlashIcon,
-	MagnifyingGlassMinusIcon,
-	MagnifyingGlassPlusIcon,
-	TrashSimpleIcon,
-	UploadSimpleIcon,
-} from "@phosphor-icons/react";
 import { useMutation } from "@tanstack/react-query";
 import { useRef, useState } from "react";
 import Cropper from "react-easy-crop";
@@ -26,6 +18,7 @@ import {
 	DialogTitle,
 } from "@reactive-resume/ui/components/dialog";
 import { FormControl, FormItem, FormLabel, FormMessage } from "@reactive-resume/ui/components/form";
+import { Icon } from "@reactive-resume/ui/components/icon";
 import { Input } from "@reactive-resume/ui/components/input";
 import {
 	InputGroup,
@@ -91,7 +84,7 @@ function PicturePreviewControls({
 				)}
 
 				<div className="absolute inset-0 z-0 flex size-full items-center justify-center">
-					{picture.url ? <TrashSimpleIcon className="size-6" /> : <UploadSimpleIcon className="size-6" />}
+					{picture.url ? <Icon name="delete" size={24} /> : <Icon name="upload" size={24} />}
 				</div>
 			</button>
 
@@ -125,7 +118,7 @@ function PicturePreviewControls({
 									onAutoSave();
 								}}
 							>
-								{picture.hidden ? <EyeSlashIcon /> : <EyeIcon />}
+								{picture.hidden ? <Icon name="visibility_off" size={16} /> : <Icon name="visibility" size={16} />}
 							</Button>
 						</div>
 					</FormItem>
@@ -655,7 +648,7 @@ export function PictureSettings() {
 							<span className="text-ink-3 text-xs tabular-nums">{zoom.toFixed(1)}×</span>
 						</div>
 						<div className="flex items-center gap-x-3">
-							<MagnifyingGlassMinusIcon className="size-4 shrink-0 text-ink-3" />
+							<Icon name="zoom_out" size={16} className="shrink-0 text-ink-3" />
 							<Slider
 								min={1}
 								max={3}
@@ -667,7 +660,7 @@ export function PictureSettings() {
 									setZoom(Array.isArray(value) ? value[0] : value);
 								}}
 							/>
-							<MagnifyingGlassPlusIcon className="size-4 shrink-0 text-ink-3" />
+							<Icon name="zoom_in" size={16} className="shrink-0 text-ink-3" />
 						</div>
 					</div>
 

apps/web/src/features/resume/stylesheet/editor.tsx

@@ -18,7 +18,6 @@ import {
 } from "@codemirror/view";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
-import { BookOpenIcon } from "@phosphor-icons/react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { convertLegacyStyleRules } from "@reactive-resume/pdf/semantic-legacy";
 import {
@@ -28,6 +27,7 @@ import {
 	shouldShowResumeHeader,
 } from "@reactive-resume/pdf/semantic-tree";
 import { isFatalStylesheetDiagnostic } from "@reactive-resume/resume/stylesheet";
+import { Icon } from "@reactive-resume/ui/components/icon";
 import { PopoverTrigger } from "@reactive-resume/ui/components/popover";
 import { Sheet, SheetContent, SheetTitle } from "@reactive-resume/ui/components/sheet";
 import { ColorPicker } from "@/components/input/color-picker";
@@ -515,7 +515,7 @@ function StylesheetEditorShell({ readOnly = false }: StylesheetEditorShellProps)
 			/>
 
 			<p className="flex items-center gap-1.5 text-ink-3 text-xs">
-				<BookOpenIcon aria-hidden="true" className="shrink-0" />
+				<Icon name="menu_book" size={16} aria-hidden="true" className="shrink-0" />
 				<span>
 					<Trans>Not sure what to write?</Trans>{" "}
 					<a

apps/web/src/features/resume/stylesheet/legacy-banner.tsx

@@ -1,7 +1,7 @@
 import { Trans } from "@lingui/react/macro";
-import { ArrowRightIcon, InfoIcon } from "@phosphor-icons/react";
 import { Alert, AlertDescription, AlertTitle } from "@reactive-resume/ui/components/alert";
 import { Button } from "@reactive-resume/ui/components/button";
+import { Icon } from "@reactive-resume/ui/components/icon";
 
 export type LegacyStylesheetBannerProps = {
 	disabled: boolean;
@@ -11,7 +11,7 @@ export type LegacyStylesheetBannerProps = {
 export function LegacyStylesheetBanner({ disabled, onActivate }: LegacyStylesheetBannerProps) {
 	return (
 		<Alert>
-			<InfoIcon />
+			<Icon name="info" size={16} />
 			<AlertTitle>
 				<Trans>Converted stylesheet draft</Trans>
 			</AlertTitle>
@@ -21,7 +21,7 @@ export function LegacyStylesheetBanner({ disabled, onActivate }: LegacyStyleshee
 				</p>
 				<Button type="button" size="sm" disabled={disabled} onClick={onActivate}>
 					<Trans>Activate Semantic CSS</Trans>
-					<ArrowRightIcon data-icon="inline-end" />
+					<Icon name="arrow_forward" size={16} data-icon="inline-end" />
 				</Button>
 			</AlertDescription>
 		</Alert>

apps/web/src/features/resume/stylesheet/status.tsx

@@ -1,9 +1,9 @@
 import type { SemanticCssDiagnostic } from "@reactive-resume/resume/stylesheet";
 import { Trans } from "@lingui/react/macro";
-import { WarningCircleIcon, WarningIcon } from "@phosphor-icons/react";
 import { isFatalStylesheetDiagnostic } from "@reactive-resume/resume/stylesheet";
 import { Alert, AlertDescription, AlertTitle } from "@reactive-resume/ui/components/alert";
 import { Badge } from "@reactive-resume/ui/components/badge";
+import { Icon } from "@reactive-resume/ui/components/icon";
 import { ScrollArea } from "@reactive-resume/ui/components/scroll-area";
 
 export type StylesheetStatusProps = {
@@ -23,19 +23,19 @@ export function StylesheetStatus({ mode, status, diagnostics }: StylesheetStatus
 		<div className="space-y-2" aria-live="polite">
 			{hasFatalErrors ? (
 				<Badge variant="danger">
-					<WarningCircleIcon data-icon="inline-start" />
+					<Icon name="error" size={16} data-icon="inline-start" />
 					<Trans>Fatal error</Trans>
 				</Badge>
 			) : isPending ? (
 				<Badge variant="outline">{mode === "legacy" ? <Trans>Checking draft</Trans> : <Trans>Checking</Trans>}</Badge>
 			) : hasRecoverableErrors ? (
 				<Badge variant="warn">
-					<WarningCircleIcon data-icon="inline-start" />
+					<Icon name="error" size={16} data-icon="inline-start" />
 					{mode === "legacy" ? <Trans>Ready to activate with errors</Trans> : <Trans>Valid with errors</Trans>}
 				</Badge>
 			) : warnings.length > 0 ? (
 				<Badge variant="warn">
-					<WarningIcon data-icon="inline-start" />
+					<Icon name="warning" size={16} data-icon="inline-start" />
 					{mode === "legacy" ? <Trans>Ready to activate with warnings</Trans> : <Trans>Valid with warnings</Trans>}
 				</Badge>
 			) : (
@@ -44,7 +44,7 @@ export function StylesheetStatus({ mode, status, diagnostics }: StylesheetStatus
 
 			{hasFatalErrors && (
 				<Alert variant="error">
-					<WarningCircleIcon />
+					<Icon name="error" size={16} />
 					<AlertTitle>
 						<Trans>Stylesheet has fatal errors</Trans>
 					</AlertTitle>
@@ -56,7 +56,7 @@ export function StylesheetStatus({ mode, status, diagnostics }: StylesheetStatus
 
 			{hasRecoverableErrors && (
 				<Alert>
-					<WarningCircleIcon />
+					<Icon name="error" size={16} />
 					<AlertTitle>
 						<Trans>Some styles were ignored</Trans>
 					</AlertTitle>

apps/web/src/features/resume/stylesheet/toolbar.tsx

@@ -1,13 +1,6 @@
 import { t } from "@lingui/core/macro";
-import {
-	ArrowsInIcon,
-	ArrowsOutIcon,
-	ArrowUUpLeftIcon,
-	ArrowUUpRightIcon,
-	CopyIcon,
-	MagicWandIcon,
-} from "@phosphor-icons/react";
 import { Button } from "@reactive-resume/ui/components/button";
+import { Icon } from "@reactive-resume/ui/components/icon";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@reactive-resume/ui/components/tooltip";
 import { copySourceToClipboard } from "./editor-extensions";
 
@@ -59,19 +52,23 @@ export function StylesheetToolbar({
 	return (
 		<div className="flex flex-wrap items-center gap-1" role="toolbar" aria-label={t`Stylesheet editor`}>
 			<ToolbarButton label={t`Undo stylesheet edit`} disabled={disabled || !canUndo} onClick={onUndo}>
-				<ArrowUUpLeftIcon data-icon="inline-start" />
+				<Icon name="undo" size={16} data-icon="inline-start" />
 			</ToolbarButton>
 			<ToolbarButton label={t`Redo stylesheet edit`} disabled={disabled || !canRedo} onClick={onRedo}>
-				<ArrowUUpRightIcon data-icon="inline-start" />
+				<Icon name="redo" size={16} data-icon="inline-start" />
 			</ToolbarButton>
 			<ToolbarButton label={t`Copy stylesheet`} onClick={() => void copySourceToClipboard(source)}>
-				<CopyIcon data-icon="inline-start" />
+				<Icon name="content_copy" size={16} data-icon="inline-start" />
 			</ToolbarButton>
 			<ToolbarButton label={t`Format stylesheet`} disabled={disabled} onClick={onFormat}>
-				<MagicWandIcon data-icon="inline-start" />
+				<Icon name="auto_fix_high" size={16} data-icon="inline-start" />
 			</ToolbarButton>
 			<ToolbarButton label={focused ? t`Exit focus mode` : t`Open focus mode`} onClick={onFocusToggle}>
-				{focused ? <ArrowsInIcon data-icon="inline-start" /> : <ArrowsOutIcon data-icon="inline-start" />}
+				{focused ? (
+					<Icon name="close_fullscreen" size={16} data-icon="inline-start" />
+				) : (
+					<Icon name="open_in_full" size={16} data-icon="inline-start" />
+				)}
 			</ToolbarButton>
 		</div>
 	);

apps/web/src/features/user/dropdown-menu.tsx

@@ -2,7 +2,6 @@ import type { AuthSession } from "@reactive-resume/auth/types";
 import { t } from "@lingui/core/macro";
 import { useLingui } from "@lingui/react";
 import { Trans } from "@lingui/react/macro";
-import { PaletteIcon, SignOutIcon, TranslateIcon } from "@phosphor-icons/react";
 import { useRouter } from "@tanstack/react-router";
 import {
 	DropdownMenu,
@@ -81,7 +80,7 @@ export function UserDropdownMenu({ children }: Props) {
 				<DropdownMenuGroup>
 					<DropdownMenuSub>
 						<DropdownMenuSubTrigger>
-							<TranslateIcon />
+							<Icon name="translate" size={16} />
 							<Trans comment="Menu item that opens language selection submenu">Language</Trans>
 						</DropdownMenuSubTrigger>
 						<DropdownMenuSubContent className="max-h-[400px] overflow-y-auto">
@@ -97,7 +96,7 @@ export function UserDropdownMenu({ children }: Props) {
 
 					<DropdownMenuSub>
 						<DropdownMenuSubTrigger>
-							<PaletteIcon />
+							<Icon name="palette" size={16} />
 							<Trans comment="Menu item that opens appearance theme selection submenu">Theme</Trans>
 						</DropdownMenuSubTrigger>
 						<DropdownMenuSubContent>
@@ -119,7 +118,7 @@ export function UserDropdownMenu({ children }: Props) {
 				<DropdownMenuSeparator />
 
 				<DropdownMenuItem onClick={handleLogout}>
-					<SignOutIcon />
+					<Icon name="logout" size={16} />
 					<Trans comment="User menu action to sign out of current account">Sign out</Trans>
 				</DropdownMenuItem>
 			</DropdownMenuContent>

apps/web/src/libs/tanstack-form.test.tsx

@@ -2,17 +2,11 @@
 
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { beforeAll, describe, expect, it, vi } from "vitest";
+import { beforeAll, describe, expect, it } from "vitest";
 import { i18n } from "@lingui/core";
 import { I18nProvider } from "@lingui/react";
 import { useAppForm } from "./tanstack-form";
 
-vi.mock("@/components/input/rich-input", () => ({
-	RichInput: ({ value, onChange }: { value: string; onChange: (value: string) => void }) => (
-		<textarea aria-label="Description value" value={value} onChange={(event) => onChange(event.target.value)} />
-	),
-}));
-
 beforeAll(() => {
 	i18n.loadAndActivate({ locale: "en", messages: {} });
 });
@@ -20,7 +14,6 @@ beforeAll(() => {
 function TestForm() {
 	const form = useAppForm({
 		defaultValues: {
-			description: "Initial description",
 			website: { url: "https://example.com", label: "Example", inlineLink: false },
 		},
 	});
@@ -33,13 +26,6 @@ function TestForm() {
 			>
 				{(field) => <field.WebsiteField label="Website" hideLabelButton formItemClassName="website-field" />}
 			</form.AppField>
-
-			<form.AppField
-				name="description"
-				validators={{ onChange: ({ value }) => (value ? undefined : "Description is required") }}
-			>
-				{(field) => <field.RichTextField label="Description" formItemClassName="description-field" />}
-			</form.AppField>
 		</I18nProvider>
 	);
 }
@@ -50,9 +36,7 @@ describe("registered resume fields", () => {
 		const { container } = render(<TestForm />);
 
 		expect(screen.getByText("Website")).toBeInTheDocument();
-		expect(screen.getByText("Description")).toBeInTheDocument();
 		expect(container.querySelector(".website-field")).toBeInTheDocument();
-		expect(container.querySelector(".description-field")).toBeInTheDocument();
 		const website = screen.getByRole("textbox", { name: "Website" });
 		expect(website).toHaveValue("example.com");
 		expect(screen.getByLabelText("Website")).toBe(website);
@@ -61,9 +45,7 @@ describe("registered resume fields", () => {
 		expect(website).toHaveFocus();
 
 		await user.clear(website);
-		await user.clear(screen.getByLabelText("Description value"));
 
 		expect(screen.getByText("Website is required")).toBeInTheDocument();
-		expect(screen.getByText("Description is required")).toBeInTheDocument();
 	});
 });

apps/web/src/libs/tanstack-form.tsx

@@ -4,7 +4,6 @@ import { createFormHook, createFormHookContexts } from "@tanstack/react-form";
 import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from "@reactive-resume/ui/components/form";
 import { Input } from "@reactive-resume/ui/components/input";
 import { InputGroupInput } from "@reactive-resume/ui/components/input-group";
-import { RichInput } from "@/components/input/rich-input";
 import { URLInput } from "@/components/input/url-input";
 
 type FieldFrameProps = {
@@ -34,11 +33,6 @@ type WebsiteFieldProps = {
 	hideLabelButton: boolean;
 };
 
-type RichTextFieldProps = {
-	label: React.ReactNode;
-	formItemClassName?: string;
-};
-
 const { fieldContext, formContext, useFieldContext } = createFormHookContexts();
 
 function TextField({ label, description, formItemClassName, ...props }: TextFieldProps) {
@@ -138,21 +132,8 @@ function WebsiteField({ label, formItemClassName, hideLabelButton }: WebsiteFiel
 	);
 }
 
-function RichTextField({ label, formItemClassName }: RichTextFieldProps) {
-	const field = useFieldContext<string>();
-	const hasError = field.state.meta.isTouched && field.state.meta.errors.length > 0;
-
-	return (
-		<FormItem hasError={hasError} className={formItemClassName}>
-			<FormLabel>{label}</FormLabel>
-			<FormControl render={<RichInput value={field.state.value} onChange={(value) => field.handleChange(value)} />} />
-			<FormMessage errors={field.state.meta.errors} />
-		</FormItem>
-	);
-}
-
 export const { useAppForm, withForm } = createFormHook({
-	fieldComponents: { InputGroupTextField, NumberField, RichTextField, TextField, WebsiteField },
+	fieldComponents: { InputGroupTextField, NumberField, TextField, WebsiteField },
 	fieldContext,
 	formComponents: {},
 	formContext,

apps/web/src/routes/builder/$resumeId/-sidebar/right/sections/information.tsx

@@ -1,6 +1,6 @@
 import { Trans } from "@lingui/react/macro";
-import { HandHeartIcon } from "@phosphor-icons/react";
 import { Button } from "@reactive-resume/ui/components/button";
+import { Icon } from "@reactive-resume/ui/components/icon";
 import { SectionBase } from "../shared/section-base";
 
 export function InformationSectionBuilder() {
@@ -31,7 +31,7 @@ export function InformationSectionBuilder() {
 					className="mt-2 whitespace-normal px-4! text-xs"
 					render={
 						<a href="http://opencollective.com/reactive-resume" target="_blank" rel="noopener noreferrer">
-							<HandHeartIcon />
+							<Icon name="volunteer_activism" size={16} />
 							<span className="truncate">
 								<Trans>Donate to Reactive Resume</Trans>
 							</span>

apps/web/src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx

@@ -14,15 +14,6 @@ import { arrayMove, SortableContext, useSortable, verticalListSortingStrategy }
 import { CSS } from "@dnd-kit/utilities";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
-import {
-	ArrowBendUpRightIcon,
-	DotsSixVerticalIcon,
-	DotsThreeVerticalIcon,
-	FileIcon,
-	PlusCircleIcon,
-	PlusIcon,
-	TrashIcon,
-} from "@phosphor-icons/react";
 import { useCallback, useId, useState } from "react";
 import { match } from "ts-pattern";
 import { templateLayouts } from "@reactive-resume/schema/templates";
@@ -38,6 +29,7 @@ import {
 	DropdownMenuSubTrigger,
 	DropdownMenuTrigger,
 } from "@reactive-resume/ui/components/dropdown-menu";
+import { Icon } from "@reactive-resume/ui/components/icon";
 import { Switch } from "@reactive-resume/ui/components/switch";
 import { cn } from "@reactive-resume/utils/style";
 import { useCurrentResume, useUpdateResumeData } from "@/features/resume/builder/draft";
@@ -266,7 +258,7 @@ export function LayoutPages() {
 				))}
 
 				<Button variant="secondary" className="self-end" onClick={handleAddPage}>
-					<PlusIcon />
+					<Icon name="add" size={16} />
 					<Trans>Add Page</Trans>
 				</Button>
 			</div>
@@ -326,7 +318,7 @@ function PageContainer({
 							onClick={() => onDelete(pageIndex)}
 							className="size-auto gap-x-2.5 justify-self-end p-0!"
 						>
-							<TrashIcon />
+							<Icon name="delete" size={16} />
 							<Trans>Delete Page</Trans>
 						</Button>
 					)}
@@ -475,7 +467,7 @@ function MoveToSubmenu({ id, pageIndex, columnId }: MoveToSubmenuProps) {
 	return (
 		<DropdownMenuSub>
 			<DropdownMenuSubTrigger>
-				<ArrowBendUpRightIcon />
+				<Icon name="redo" size={16} />
 				<Trans>Move to</Trans>
 			</DropdownMenuSubTrigger>
 
@@ -487,7 +479,7 @@ function MoveToSubmenu({ id, pageIndex, columnId }: MoveToSubmenuProps) {
 					return (
 						<DropdownMenuSub key={`page-${targetPageIndex}`}>
 							<DropdownMenuSubTrigger>
-								<FileIcon />
+								<Icon name="draft" size={16} />
 								<Trans>Page {targetPageIndex + 1}</Trans>
 							</DropdownMenuSubTrigger>
 
@@ -515,7 +507,7 @@ function MoveToSubmenu({ id, pageIndex, columnId }: MoveToSubmenuProps) {
 				<DropdownMenuSeparator />
 
 				<DropdownMenuItem onClick={moveToNewPage}>
-					<PlusCircleIcon />
+					<Icon name="add_circle" size={16} />
 					<Trans>New Page</Trans>
 				</DropdownMenuItem>
 			</DropdownMenuSubContent>
@@ -628,7 +620,7 @@ function LayoutItemContent({
 			)}
 			{...rest}
 		>
-			<DotsSixVerticalIcon className="opacity-40 transition-opacity group-hover/item:opacity-100" />
+			<Icon name="drag_indicator" size={16} className="opacity-40 transition-opacity group-hover/item:opacity-100" />
 			<span className="min-w-0 flex-1 truncate">{title}</span>
 
 			{/* The drag overlay renders without a location; only real rows get the menu. */}
@@ -639,7 +631,7 @@ function LayoutItemContent({
 						onPointerDown={(event) => event.stopPropagation()}
 						className="flex cursor-context-menu items-center rounded p-0.5 opacity-40 transition-opacity hover:bg-sunken/40 focus:outline-none focus-visible:ring-1 group-hover/item:opacity-100"
 					>
-						<DotsThreeVerticalIcon />
+						<Icon name="more_vert" size={16} />
 					</DropdownMenuTrigger>
 
 					<DropdownMenuContent align="end">

packages/ui/src/icons/material-symbols-rounded.json

@@ -3,15 +3,19 @@
 		"account_circle",
 		"add",
 		"add_a_photo",
+		"add_circle",
 		"arrow_back",
 		"arrow_downward",
 		"arrow_forward",
 		"arrow_upward",
 		"attach_file",
 		"auto_awesome",
+		"auto_fix_high",
 		"bolt",
 		"bookmark",
+		"calendar_add_on",
 		"calendar_month",
+		"calendar_today",
 		"call",
 		"chat",
 		"check",
@@ -22,8 +26,10 @@
 		"chevron_right",
 		"circle",
 		"close",
+		"close_fullscreen",
 		"cloud_done",
 		"cloud_off",
+		"code",
 		"compress",
 		"content_copy",
 		"content_cut",
@@ -35,6 +41,7 @@
 		"description",
 		"desktop_windows",
 		"download",
+		"draft",
 		"drag_indicator",
 		"edit",
 		"edit_square",
@@ -43,21 +50,41 @@
 		"expand_less",
 		"expand_more",
 		"fact_check",
+		"fingerprint",
+		"format_align_center",
+		"format_align_justify",
+		"format_align_left",
+		"format_align_right",
 		"format_bold",
 		"format_clear",
+		"format_h1",
+		"format_h2",
+		"format_h3",
+		"format_h4",
+		"format_h5",
+		"format_h6",
+		"format_indent_decrease",
+		"format_indent_increase",
 		"format_italic",
 		"format_list_bulleted",
 		"format_list_numbered",
+		"format_paragraph",
 		"format_size",
+		"format_strikethrough",
+		"format_underlined",
 		"grid_view",
 		"history",
+		"home",
+		"horizontal_rule",
 		"hourglass_empty",
 		"hub",
 		"import_export",
 		"info",
+		"ink_highlighter",
 		"insights",
 		"ios_share",
 		"key",
+		"keyboard_return",
 		"language",
 		"left_panel_close",
 		"left_panel_open",
@@ -70,14 +97,17 @@
 		"logout",
 		"mail",
 		"menu",
+		"menu_book",
 		"more_horiz",
 		"more_vert",
 		"motion_mode",
 		"note_add",
 		"notes",
+		"open_in_full",
 		"open_in_new",
 		"palette",
 		"passkey",
+		"password",
 		"picture_as_pdf",
 		"print",
 		"qr_code_2",
@@ -105,7 +135,9 @@
 		"trending_up",
 		"tune",
 		"undo",
+		"upload",
 		"upload_file",
+		"verified",
 		"vertical_align_center",
 		"vertical_split",
 		"view_agenda",
@@ -113,8 +145,11 @@
 		"view_list",
 		"visibility",
 		"visibility_off",
+		"volunteer_activism",
 		"warning",
 		"wifi_off",
-		"work"
+		"work",
+		"zoom_in",
+		"zoom_out"
 	]
 }

packages/ui/src/icons/names.ts

@@ -8,15 +8,19 @@ export const iconNames = [
 	"account_circle",
 	"add",
 	"add_a_photo",
+	"add_circle",
 	"arrow_back",
 	"arrow_downward",
 	"arrow_forward",
 	"arrow_upward",
 	"attach_file",
 	"auto_awesome",
+	"auto_fix_high",
 	"bolt",
 	"bookmark",
+	"calendar_add_on",
 	"calendar_month",
+	"calendar_today",
 	"call",
 	"chat",
 	"check",
@@ -27,8 +31,10 @@ export const iconNames = [
 	"chevron_right",
 	"circle",
 	"close",
+	"close_fullscreen",
 	"cloud_done",
 	"cloud_off",
+	"code",
 	"compress",
 	"content_copy",
 	"content_cut",
@@ -40,6 +46,7 @@ export const iconNames = [
 	"description",
 	"desktop_windows",
 	"download",
+	"draft",
 	"drag_indicator",
 	"edit",
 	"edit_square",
@@ -48,21 +55,41 @@ export const iconNames = [
 	"expand_less",
 	"expand_more",
 	"fact_check",
+	"fingerprint",
+	"format_align_center",
+	"format_align_justify",
+	"format_align_left",
+	"format_align_right",
 	"format_bold",
 	"format_clear",
+	"format_h1",
+	"format_h2",
+	"format_h3",
+	"format_h4",
+	"format_h5",
+	"format_h6",
+	"format_indent_decrease",
+	"format_indent_increase",
 	"format_italic",
 	"format_list_bulleted",
 	"format_list_numbered",
+	"format_paragraph",
 	"format_size",
+	"format_strikethrough",
+	"format_underlined",
 	"grid_view",
 	"history",
+	"home",
+	"horizontal_rule",
 	"hourglass_empty",
 	"hub",
 	"import_export",
 	"info",
+	"ink_highlighter",
 	"insights",
 	"ios_share",
 	"key",
+	"keyboard_return",
 	"language",
 	"left_panel_close",
 	"left_panel_open",
@@ -75,14 +102,17 @@ export const iconNames = [
 	"logout",
 	"mail",
 	"menu",
+	"menu_book",
 	"more_horiz",
 	"more_vert",
 	"motion_mode",
 	"note_add",
 	"notes",
+	"open_in_full",
 	"open_in_new",
 	"palette",
 	"passkey",
+	"password",
 	"picture_as_pdf",
 	"print",
 	"qr_code_2",
@@ -110,7 +140,9 @@ export const iconNames = [
 	"trending_up",
 	"tune",
 	"undo",
+	"upload",
 	"upload_file",
+	"verified",
 	"vertical_align_center",
 	"vertical_split",
 	"view_agenda",
@@ -118,9 +150,12 @@ export const iconNames = [
 	"view_list",
 	"visibility",
 	"visibility_off",
+	"volunteer_activism",
 	"warning",
 	"wifi_off",
 	"work",
+	"zoom_in",
+	"zoom_out",
 ] as const;
 
 export type IconName = (typeof iconNames)[number];