[icons] Add opt-in next-gen static icon components

.storybook/main.ts

@@ -38,6 +38,7 @@ const storybookConfig: StorybookConfig = {
                     { find: "@blueprintjs/core/lib", replacement: resolve(rootDir, "packages/core/lib") },
                     { find: "@blueprintjs/core", replacement: resolve(rootDir, "packages/core/src") },
                     { find: "@blueprintjs/datetime", replacement: resolve(rootDir, "packages/datetime") },
+                    { find: "@blueprintjs/icons/next", replacement: resolve(rootDir, "packages/icons/next") },
                     { find: "@blueprintjs/icons", replacement: resolve(rootDir, "packages/icons") },
                     { find: "@blueprintjs/labs", replacement: resolve(rootDir, "packages/labs") },
                     { find: "@blueprintjs/select", replacement: resolve(rootDir, "packages/select") },

.storybook/tsconfig.json

@@ -8,13 +8,7 @@
         "moduleResolution": "bundler",
         "skipLibCheck": true,
         "paths": {
-            "@storybook-common": ["./common"],
-            "@blueprintjs/core": ["../packages/core/src"],
-            "@blueprintjs/datetime": ["../packages/datetime/src"],
-            "@blueprintjs/icons": ["../packages/icons/src"],
-            "@blueprintjs/labs": ["../packages/labs/src"],
-            "@blueprintjs/select": ["../packages/select/src"],
-            "@blueprintjs/table": ["../packages/table/src"]
+            "@storybook-common": ["./common"]
         }
     },
     "include": ["../packages/*/src/**/*", "./**/*"],

packages/core/src/components/alert/AlertNextIcons.stories.tsx

@@ -0,0 +1,63 @@
+/* !
+ * (c) Copyright 2026 Palantir Technologies Inc. All rights reserved.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { storybookLayoutDecorator, StoryLabel } from "@storybook-common";
+import { useCallback, useState } from "react";
+
+import { WarningSign } from "@blueprintjs/icons";
+import { WarningSignIcon } from "@blueprintjs/icons/next";
+
+import { Intent } from "../../common";
+import { Button } from "../button/buttons";
+import { IconNext } from "../icon-next/iconNext";
+
+import { Alert } from "./alert";
+
+const meta: Meta<typeof Alert> = {
+    title: "Next Icons/Alert",
+    component: Alert,
+    decorators: [storybookLayoutDecorator],
+    parameters: {
+        layout: "centered",
+    },
+} satisfies Meta<typeof Alert>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function AlertDemo({ iconProp, label }: { iconProp: React.ComponentProps<typeof Alert>["icon"]; label: string }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const open = useCallback(() => setIsOpen(true), []);
+    const close = useCallback(() => setIsOpen(false), []);
+
+    return (
+        <div>
+            <StoryLabel title={label} />
+            <Button text={`Open (${label})`} intent={Intent.WARNING} onClick={open} />
+            <Alert
+                isOpen={isOpen}
+                onClose={close}
+                icon={iconProp}
+                intent={Intent.WARNING}
+                confirmButtonText="OK"
+                cancelButtonText="Cancel"
+            >
+                Alert with a {label} icon.
+            </Alert>
+        </div>
+    );
+}
+
+export const IconComparison: Story = {
+    name: "Icon API Comparison",
+    render: () => (
+        <div style={{ display: "flex", gap: 24 }}>
+            <AlertDemo iconProp="warning-sign" label="String" />
+            <AlertDemo iconProp={<WarningSign size={40} />} label="Static" />
+            <AlertDemo iconProp={<WarningSignIcon size={40} />} label="Next" />
+            <AlertDemo iconProp={<IconNext icon="warning-sign" size={40} />} label="Dynamic" />
+        </div>
+    ),
+};

packages/core/src/components/alert/_alert.scss

@@ -11,7 +11,8 @@
 .#{$ns}-alert-body {
   display: flex;
 
-  .#{$ns}-icon {
+  > .#{$ns}-icon {
+    display: flex;
     font-size: $pt-icon-size-large * 2;
     margin-right: $pt-spacing * 5;
     margin-top: 0;

packages/core/src/components/alert/alert.tsx

@@ -199,7 +199,11 @@ export const Alert: React.FC<AlertProps> = props => {
             onClose={handleCancel}
         >
             <div className={Classes.ALERT_BODY}>
-                <Icon icon={icon} size={40} intent={intent} />
+                {typeof icon === "string" ? (
+                    <Icon icon={icon} size={40} intent={intent} />
+                ) : icon != null ? (
+                    <span className={classNames(Classes.ICON, Classes.intentClass(intent))}>{icon}</span>
+                ) : null}
                 <div className={Classes.ALERT_CONTENTS}>{children}</div>
             </div>
             <div className={Classes.ALERT_FOOTER}>

packages/core/src/components/breadcrumbs/BreadcrumbsNextIcons.stories.tsx

@@ -0,0 +1,73 @@
+/* !
+ * (c) Copyright 2026 Palantir Technologies Inc. All rights reserved.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { storybookLayoutDecorator, StoryLabel } from "@storybook-common";
+
+import { Document, FolderClose, Home } from "@blueprintjs/icons";
+import { DocumentIcon, FolderCloseIcon, HomeIcon } from "@blueprintjs/icons/next";
+
+import { IconNext } from "../icon-next/iconNext";
+
+import { Breadcrumbs } from "./breadcrumbs";
+
+const meta: Meta<typeof Breadcrumbs> = {
+    title: "Next Icons/Breadcrumbs",
+    component: Breadcrumbs,
+    decorators: [storybookLayoutDecorator],
+    parameters: {
+        layout: "centered",
+    },
+} satisfies Meta<typeof Breadcrumbs>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const IconComparison: Story = {
+    name: "Icon API Comparison",
+    render: () => (
+        <div style={{ display: "flex", flexDirection: "column", gap: 24, width: 400 }}>
+            <div>
+                <StoryLabel title="Dynamic string icon" />
+                <Breadcrumbs
+                    items={[
+                        { icon: "home", text: "Home" },
+                        { icon: "folder-close", text: "Projects" },
+                        { icon: "document", text: "Report.pdf" },
+                    ]}
+                />
+            </div>
+            <div>
+                <StoryLabel title="Current static icon" />
+                <Breadcrumbs
+                    items={[
+                        { icon: <Home />, text: "Home" },
+                        { icon: <FolderClose />, text: "Projects" },
+                        { icon: <Document />, text: "Report.pdf" },
+                    ]}
+                />
+            </div>
+            <div>
+                <StoryLabel title="Next static icon" />
+                <Breadcrumbs
+                    items={[
+                        { icon: <HomeIcon />, text: "Home" },
+                        { icon: <FolderCloseIcon />, text: "Projects" },
+                        { icon: <DocumentIcon />, text: "Report.pdf" },
+                    ]}
+                />
+            </div>
+            <div>
+                <StoryLabel title="Dynamic next icon" />
+                <Breadcrumbs
+                    items={[
+                        { icon: <IconNext icon="home" />, text: "Home" },
+                        { icon: <IconNext icon="folder-close" />, text: "Projects" },
+                        { icon: <IconNext icon="document" />, text: "Report.pdf" },
+                    ]}
+                />
+            </div>
+        </div>
+    ),
+};