From a0cad80e9258ad4fba163c2895ba049a418a9aa2 Mon Sep 17 00:00:00 2001
From: Greg Douglas <GWShark0@gmail.com>
Date: Tue, 7 Apr 2026 17:16:45 -0400
Subject: [PATCH 1/3] Add non-breaking *Icon aliases for static icon exports

---
 packages/core/src/components/icon/icon.mdx    |  2 +-
 packages/icons/scripts/componentsIndex.ts.hbs |  2 ++
 packages/icons/scripts/index.ts.hbs           |  2 ++
 packages/icons/src/generatedIcons.test.tsx    | 19 ++++++++++++++++++-
 packages/icons/src/loading-icons.mdx          |  8 ++++++--
 5 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/components/icon/icon.mdx b/packages/core/src/components/icon/icon.mdx
index e0cc445af3e..ad1326bdeb8 100644
--- a/packages/core/src/components/icon/icon.mdx
+++ b/packages/core/src/components/icon/icon.mdx
@@ -131,7 +131,7 @@ function Example() {
 
 The `<Icon>` component loads icon paths via dynamic module imports by default. An alternative API
 is available in the **@blueprintjs/icons** package which provides static imports of each icon as
-a React component. The example below uses the `<Calendar>` component.
+a React component. The example below uses the `<CalendarIcon>` component.
 
 Note that some `<Icon>` props are not yet supported for these components, such as `intent`.
 
diff --git a/packages/icons/scripts/componentsIndex.ts.hbs b/packages/icons/scripts/componentsIndex.ts.hbs
index b09e416c8ff..e612ba94a41 100644
--- a/packages/icons/scripts/componentsIndex.ts.hbs
+++ b/packages/icons/scripts/componentsIndex.ts.hbs
@@ -14,5 +14,7 @@
  */
 
 {{#each iconNames}}
+export { {{pascalCase this}} as {{pascalCase this}}Icon } from "./{{this}}";
+/** @deprecated use `{{pascalCase this}}Icon` instead. */
 export { {{pascalCase this}} } from "./{{this}}";
 {{/each}}
diff --git a/packages/icons/scripts/index.ts.hbs b/packages/icons/scripts/index.ts.hbs
index 4286ae11dd4..5579f5757af 100644
--- a/packages/icons/scripts/index.ts.hbs
+++ b/packages/icons/scripts/index.ts.hbs
@@ -17,5 +17,7 @@
 export * from "../index";
 
 {{#each iconNames}}
+export { {{pascalCase this}} as {{pascalCase this}}Icon } from "./components/{{this}}";
+/** @deprecated use `{{pascalCase this}}Icon` instead. */
 export { {{pascalCase this}} } from "./components/{{this}}";
 {{/each}}
diff --git a/packages/icons/src/generatedIcons.test.tsx b/packages/icons/src/generatedIcons.test.tsx
index 729a0d4c935..deb6e9fac0a 100644
--- a/packages/icons/src/generatedIcons.test.tsx
+++ b/packages/icons/src/generatedIcons.test.tsx
@@ -5,7 +5,7 @@
 import { render } from "@testing-library/react";
 import { describe, it } from "vitest";
 
-import { Add } from "./generated/components";
+import { Add, AddIcon } from "./generated/components";
 
 describe("<Add> icon component", () => {
     it("allows attaching an event handler", () => {
@@ -23,3 +23,20 @@ describe("<Add> icon component", () => {
         );
     });
 });
+
+describe("<AddIcon> alias component", () => {
+    it("allows attaching an event handler", () => {
+        const handleClick: React.MouseEventHandler<HTMLSpanElement> = () => undefined;
+        render(<AddIcon onClick={handleClick} />);
+    });
+
+    it("disallows child elements", () => {
+        const handleClick: React.MouseEventHandler<HTMLSpanElement> = () => undefined;
+        render(
+            <AddIcon onClick={handleClick}>
+                {/* @ts-expect-error */}
+                <path />
+            </AddIcon>,
+        );
+    });
+});
diff --git a/packages/icons/src/loading-icons.mdx b/packages/icons/src/loading-icons.mdx
index da96f4a15a5..8e47f32973b 100644
--- a/packages/icons/src/loading-icons.mdx
+++ b/packages/icons/src/loading-icons.mdx
@@ -21,13 +21,13 @@ from the icons package.
 
 ```tsx
 import { Button } from "@blueprintjs/core";
-import { Download } from "@blueprintjs/icons";
+import { DownloadIcon } from "@blueprintjs/icons";
 import * as React from "react";
 import * as ReactDOM from "react-dom/client";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 
-root.render(<Button text="Download" icon={<Download size={16} />} />);
+root.render(<Button text="Download" icon={<DownloadIcon size={16} />} />);
 ```
 
 This approach has benefits and tradeoffs:
@@ -36,6 +36,10 @@ This approach has benefits and tradeoffs:
 - You do have to explicitly import each icon you use as an ES import.
 - You do have to take care to specify the correct icon size (if it is not the default 16px size) depending on the usage context.
 
+> `@blueprintjs/icons` now prefers static component names with an `Icon` suffix (for example `DownloadIcon`).
+> Legacy unsuffixed exports (for example `Download`) remain available temporarily for backward compatibility, but are
+> deprecated and planned for removal in the next major release.
+
 ## Using dynamic imports
 
 Blueprint's icon props APIs _also_ accept a type-safe icon name string literal. This approach has some benefits:

From 3e8c90e6222ee445b86717812541d48b2e818995 Mon Sep 17 00:00:00 2001
From: Greg Douglas <GWShark0@gmail.com>
Date: Tue, 7 Apr 2026 21:05:10 -0400
Subject: [PATCH 2/3] Move *Icon into icon modules for reliable `@deprecated`

---
 packages/icons/scripts/componentsIndex.ts.hbs |  4 +---
 packages/icons/scripts/iconComponent.tsx.hbs  | 12 ++++++++---
 packages/icons/scripts/index.ts.hbs           |  4 +---
 packages/icons/src/generatedIcons.test.tsx    | 21 ++-----------------
 4 files changed, 13 insertions(+), 28 deletions(-)

diff --git a/packages/icons/scripts/componentsIndex.ts.hbs b/packages/icons/scripts/componentsIndex.ts.hbs
index e612ba94a41..7788fe8b257 100644
--- a/packages/icons/scripts/componentsIndex.ts.hbs
+++ b/packages/icons/scripts/componentsIndex.ts.hbs
@@ -14,7 +14,5 @@
  */
 
 {{#each iconNames}}
-export { {{pascalCase this}} as {{pascalCase this}}Icon } from "./{{this}}";
-/** @deprecated use `{{pascalCase this}}Icon` instead. */
-export { {{pascalCase this}} } from "./{{this}}";
+export { {{pascalCase this}}Icon, {{pascalCase this}} } from "./{{this}}";
 {{/each}}
diff --git a/packages/icons/scripts/iconComponent.tsx.hbs b/packages/icons/scripts/iconComponent.tsx.hbs
index d2806f1d9d8..278dba008bc 100644
--- a/packages/icons/scripts/iconComponent.tsx.hbs
+++ b/packages/icons/scripts/iconComponent.tsx.hbs
@@ -18,7 +18,7 @@ import type { SVGIconProps } from "../../svgIconProps";
 import { IconSize } from "../../iconTypes";
 import { SVGIconContainer } from "../../svgIconContainer";
 
-export const {{pascalCase iconName}}: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+export const {{pascalCase iconName}}Icon: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
     const isLarge = (props.size ?? IconSize.STANDARD) >= IconSize.LARGE;
     const pixelGridSize = isLarge ? IconSize.LARGE : IconSize.STANDARD;
     const translation = `${-1 * pixelGridSize / {{pathScaleFactor}} / 2}`;
@@ -34,5 +34,11 @@ export const {{pascalCase iconName}}: React.FC<SVGIconProps> = React.forwardRef<
         </SVGIconContainer>
    );
 });
-{{pascalCase iconName}}.displayName = `Blueprint6.Icon.{{pascalCase iconName}}`;
-export default {{pascalCase iconName}};
+{{pascalCase iconName}}Icon.displayName = `Blueprint6.Icon.{{pascalCase iconName}}Icon`;
+
+/**
+ * @deprecated Use {@link {{pascalCase iconName}}Icon} instead.
+ */
+export const {{pascalCase iconName}}: typeof {{pascalCase iconName}}Icon = {{pascalCase iconName}}Icon;
+
+export default {{pascalCase iconName}}Icon;
diff --git a/packages/icons/scripts/index.ts.hbs b/packages/icons/scripts/index.ts.hbs
index 5579f5757af..bcacb62b4c8 100644
--- a/packages/icons/scripts/index.ts.hbs
+++ b/packages/icons/scripts/index.ts.hbs
@@ -17,7 +17,5 @@
 export * from "../index";
 
 {{#each iconNames}}
-export { {{pascalCase this}} as {{pascalCase this}}Icon } from "./components/{{this}}";
-/** @deprecated use `{{pascalCase this}}Icon` instead. */
-export { {{pascalCase this}} } from "./components/{{this}}";
+export { {{pascalCase this}}Icon, {{pascalCase this}} } from "./components/{{this}}";
 {{/each}}
diff --git a/packages/icons/src/generatedIcons.test.tsx b/packages/icons/src/generatedIcons.test.tsx
index deb6e9fac0a..fd9cdaa91bf 100644
--- a/packages/icons/src/generatedIcons.test.tsx
+++ b/packages/icons/src/generatedIcons.test.tsx
@@ -5,26 +5,9 @@
 import { render } from "@testing-library/react";
 import { describe, it } from "vitest";
 
-import { Add, AddIcon } from "./generated/components";
+import { AddIcon } from "./generated/components";
 
-describe("<Add> icon component", () => {
-    it("allows attaching an event handler", () => {
-        const handleClick: React.MouseEventHandler<HTMLSpanElement> = () => undefined;
-        render(<Add onClick={handleClick} />);
-    });
-
-    it("disallows child elements", () => {
-        const handleClick: React.MouseEventHandler<HTMLSpanElement> = () => undefined;
-        render(
-            <Add onClick={handleClick}>
-                {/* @ts-expect-error */}
-                <path />
-            </Add>,
-        );
-    });
-});
-
-describe("<AddIcon> alias component", () => {
+describe("<AddIcon> icon component", () => {
     it("allows attaching an event handler", () => {
         const handleClick: React.MouseEventHandler<HTMLSpanElement> = () => undefined;
         render(<AddIcon onClick={handleClick} />);

From 52a11c8283793050d9967fb03533ec080faec731 Mon Sep 17 00:00:00 2001
From: Greg Douglas <GWShark0@gmail.com>
Date: Tue, 7 Apr 2026 21:05:48 -0400
Subject: [PATCH 3/3] Migrate static icon usage to *Icon across packages

---
 .../core/src/components/callout/callout.tsx   | 17 +++++---
 .../core/src/components/dialog/dialog.tsx     |  4 +-
 .../core/src/components/drawer/drawer.tsx     |  4 +-
 .../src/components/forms/numericInput.tsx     |  6 +--
 .../src/components/hotkeys/keyComboTag.tsx    | 42 +++++++++----------
 .../src/components/html-select/htmlSelect.tsx |  6 +--
 .../core/src/components/menu/menuItem.tsx     |  6 +--
 .../core/src/components/section/section.tsx   |  4 +-
 .../src/components/tag/tagRemoveButton.tsx    |  4 +-
 packages/core/src/components/toast/toast.tsx  |  4 +-
 .../core/src/components/tree/treeNode.tsx     |  4 +-
 .../react-day-picker/datePickerCaption.tsx    |  6 +--
 .../react-day-picker/datePickerNavIcons.tsx   |  6 +--
 .../src/common/dateFnsLocaleSelect.tsx        |  4 +-
 .../src/common/formattedDateRange.tsx         |  4 +-
 .../iconGeneratedComponentExample.tsx         |  4 +-
 .../src/components/documentation.tsx          |  4 +-
 .../docs-theme/src/components/navigator.tsx   |  4 +-
 packages/docs-theme/src/tags/heading.tsx      |  4 +-
 packages/docs-theme/src/tags/reactExample.tsx |  4 +-
 .../components/multi-select/multiSelect.tsx   |  4 +-
 .../select/src/components/omnibar/omnibar.tsx |  4 +-
 .../select/src/components/select/select.tsx   |  6 +--
 .../src/cell/formats/truncatedFormat.tsx      |  6 +--
 packages/table/src/headers/header.tsx         |  4 +-
 25 files changed, 86 insertions(+), 79 deletions(-)

diff --git a/packages/core/src/components/callout/callout.tsx b/packages/core/src/components/callout/callout.tsx
index 3402749bd32..dbc51e5d50b 100644
--- a/packages/core/src/components/callout/callout.tsx
+++ b/packages/core/src/components/callout/callout.tsx
@@ -16,7 +16,14 @@
 
 import classNames from "classnames";
 
-import { Error, type IconName, InfoSign, type SVGIconProps, Tick, WarningSign } from "@blueprintjs/icons";
+import {
+    ErrorIcon,
+    type IconName,
+    InfoSignIcon,
+    type SVGIconProps,
+    TickIcon,
+    WarningSignIcon,
+} from "@blueprintjs/icons";
 
 import {
     Classes,
@@ -118,13 +125,13 @@ const renderIcon = (icon?: CalloutProps["icon"], intent?: Intent): IconName | Ma
     // 3. icon specified by intent prop
     switch (intent) {
         case Intent.DANGER:
-            return <Error {...iconProps} />;
+            return <ErrorIcon {...iconProps} />;
         case Intent.PRIMARY:
-            return <InfoSign {...iconProps} />;
+            return <InfoSignIcon {...iconProps} />;
         case Intent.WARNING:
-            return <WarningSign {...iconProps} />;
+            return <WarningSignIcon {...iconProps} />;
         case Intent.SUCCESS:
-            return <Tick {...iconProps} />;
+            return <TickIcon {...iconProps} />;
         default:
             return undefined;
     }
diff --git a/packages/core/src/components/dialog/dialog.tsx b/packages/core/src/components/dialog/dialog.tsx
index 6557c67177f..00c8dd12154 100644
--- a/packages/core/src/components/dialog/dialog.tsx
+++ b/packages/core/src/components/dialog/dialog.tsx
@@ -17,7 +17,7 @@
 import classNames from "classnames";
 import { useMemo, useRef } from "react";
 
-import { type IconName, IconSize, SmallCross } from "@blueprintjs/icons";
+import { type IconName, IconSize, SmallCrossIcon } from "@blueprintjs/icons";
 
 import { Classes, DISPLAYNAME_PREFIX, type MaybeElement, mergeRefs, type Props } from "../../common";
 import * as Errors from "../../common/errors";
@@ -175,7 +175,7 @@ export const Dialog: React.FC<DialogProps> & { displayName?: string } = props =>
                                 <Button
                                     aria-label="Close"
                                     className={Classes.DIALOG_CLOSE_BUTTON}
-                                    icon={<SmallCross size={IconSize.STANDARD} />}
+                                    icon={<SmallCrossIcon size={IconSize.STANDARD} />}
                                     onClick={onClose}
                                     variant="minimal"
                                 />
diff --git a/packages/core/src/components/drawer/drawer.tsx b/packages/core/src/components/drawer/drawer.tsx
index a4b2652b966..7de296ce390 100644
--- a/packages/core/src/components/drawer/drawer.tsx
+++ b/packages/core/src/components/drawer/drawer.tsx
@@ -16,7 +16,7 @@
 
 import classNames from "classnames";
 
-import { type IconName, IconSize, SmallCross } from "@blueprintjs/icons";
+import { type IconName, IconSize, SmallCrossIcon } from "@blueprintjs/icons";
 
 import { AbstractPureComponent, Classes, type Props } from "../../common";
 import * as Errors from "../../common/errors";
@@ -167,7 +167,7 @@ export class Drawer extends AbstractPureComponent<DrawerProps> {
                 <Button
                     aria-label="Close"
                     className={Classes.DIALOG_CLOSE_BUTTON}
-                    icon={<SmallCross size={IconSize.LARGE} />}
+                    icon={<SmallCrossIcon size={IconSize.LARGE} />}
                     onClick={this.props.onClose}
                     variant="minimal"
                 />
diff --git a/packages/core/src/components/forms/numericInput.tsx b/packages/core/src/components/forms/numericInput.tsx
index 99b3363a81f..217fd365d62 100644
--- a/packages/core/src/components/forms/numericInput.tsx
+++ b/packages/core/src/components/forms/numericInput.tsx
@@ -16,7 +16,7 @@
 
 import classNames from "classnames";
 
-import { ChevronDown, ChevronUp } from "@blueprintjs/icons";
+import { ChevronDownIcon, ChevronUpIcon } from "@blueprintjs/icons";
 
 import {
     AbstractPureComponent,
@@ -439,7 +439,7 @@ export class NumericInput extends AbstractPureComponent<
                     aria-label="increment"
                     aria-controls={this.numericInputId}
                     disabled={disabled || isIncrementDisabled}
-                    icon={<ChevronUp />}
+                    icon={<ChevronUpIcon />}
                     intent={intent}
                     {...this.incrementButtonHandlers}
                 />
@@ -447,7 +447,7 @@ export class NumericInput extends AbstractPureComponent<
                     aria-label="decrement"
                     aria-controls={this.numericInputId}
                     disabled={disabled || isDecrementDisabled}
-                    icon={<ChevronDown />}
+                    icon={<ChevronDownIcon />}
                     intent={intent}
                     {...this.decrementButtonHandlers}
                 />
diff --git a/packages/core/src/components/hotkeys/keyComboTag.tsx b/packages/core/src/components/hotkeys/keyComboTag.tsx
index 57880a48d07..f1b43426729 100644
--- a/packages/core/src/components/hotkeys/keyComboTag.tsx
+++ b/packages/core/src/components/hotkeys/keyComboTag.tsx
@@ -18,16 +18,16 @@ import classNames from "classnames";
 import { Fragment, memo, useCallback } from "react";
 
 import {
-    ArrowDown,
-    ArrowLeft,
-    ArrowRight,
-    ArrowUp,
-    KeyCommand,
-    KeyControl,
-    KeyDelete,
-    KeyEnter,
-    KeyOption,
-    KeyShift,
+    ArrowDownIcon,
+    ArrowLeftIcon,
+    ArrowRightIcon,
+    ArrowUpIcon,
+    KeyCommandIcon,
+    KeyControlIcon,
+    KeyDeleteIcon,
+    KeyEnterIcon,
+    KeyOptionIcon,
+    KeyShiftIcon,
 } from "@blueprintjs/icons";
 
 import { Classes, DISPLAYNAME_PREFIX, type Props } from "../../common";
@@ -36,17 +36,17 @@ import { Icon } from "../icon/icon";
 import { isMac, normalizeKeyCombo } from "./hotkeyParser";
 
 const KEY_ICONS: Record<string, { icon: React.JSX.Element; iconTitle: string; isMacOnly?: boolean }> = {
-    alt: { icon: <KeyOption />, iconTitle: "Alt/Option key", isMacOnly: true },
-    arrowdown: { icon: <ArrowDown />, iconTitle: "Down key" },
-    arrowleft: { icon: <ArrowLeft />, iconTitle: "Left key" },
-    arrowright: { icon: <ArrowRight />, iconTitle: "Right key" },
-    arrowup: { icon: <ArrowUp />, iconTitle: "Up key" },
-    cmd: { icon: <KeyCommand />, iconTitle: "Command key", isMacOnly: true },
-    ctrl: { icon: <KeyControl />, iconTitle: "Control key", isMacOnly: true },
-    delete: { icon: <KeyDelete />, iconTitle: "Delete key" },
-    enter: { icon: <KeyEnter />, iconTitle: "Enter key" },
-    meta: { icon: <KeyCommand />, iconTitle: "Command key", isMacOnly: true },
-    shift: { icon: <KeyShift />, iconTitle: "Shift key", isMacOnly: true },
+    alt: { icon: <KeyOptionIcon />, iconTitle: "Alt/Option key", isMacOnly: true },
+    arrowdown: { icon: <ArrowDownIcon />, iconTitle: "Down key" },
+    arrowleft: { icon: <ArrowLeftIcon />, iconTitle: "Left key" },
+    arrowright: { icon: <ArrowRightIcon />, iconTitle: "Right key" },
+    arrowup: { icon: <ArrowUpIcon />, iconTitle: "Up key" },
+    cmd: { icon: <KeyCommandIcon />, iconTitle: "Command key", isMacOnly: true },
+    ctrl: { icon: <KeyControlIcon />, iconTitle: "Control key", isMacOnly: true },
+    delete: { icon: <KeyDeleteIcon />, iconTitle: "Delete key" },
+    enter: { icon: <KeyEnterIcon />, iconTitle: "Enter key" },
+    meta: { icon: <KeyCommandIcon />, iconTitle: "Command key", isMacOnly: true },
+    shift: { icon: <KeyShiftIcon />, iconTitle: "Shift key", isMacOnly: true },
 };
 
 /** Reverse table of some CONFIG_ALIASES fields, for display by KeyComboTag */
diff --git a/packages/core/src/components/html-select/htmlSelect.tsx b/packages/core/src/components/html-select/htmlSelect.tsx
index 4f708dbe890..8543818e822 100644
--- a/packages/core/src/components/html-select/htmlSelect.tsx
+++ b/packages/core/src/components/html-select/htmlSelect.tsx
@@ -17,7 +17,7 @@
 import classNames from "classnames";
 import { forwardRef } from "react";
 
-import { CaretDown, DoubleCaretVertical, type IconName, type SVGIconProps } from "@blueprintjs/icons";
+import { CaretDownIcon, DoubleCaretVerticalIcon, type IconName, type SVGIconProps } from "@blueprintjs/icons";
 
 import { DISABLED, FILL, HTML_SELECT, LARGE, MINIMAL } from "../../common/classes";
 import { DISPLAYNAME_PREFIX, type OptionProps } from "../../common/props";
@@ -109,9 +109,9 @@ export const HTMLSelect: React.FC<HTMLSelectProps> = forwardRef((props, ref) =>
     const iconTitle = "Open dropdown";
     const endIcon =
         iconName === "double-caret-vertical" ? (
-            <DoubleCaretVertical title={iconTitle} {...iconProps} />
+            <DoubleCaretVerticalIcon title={iconTitle} {...iconProps} />
         ) : (
-            <CaretDown title={iconTitle} {...iconProps} />
+            <CaretDownIcon title={iconTitle} {...iconProps} />
         );
 
     const optionChildren = options.map(option => {
diff --git a/packages/core/src/components/menu/menuItem.tsx b/packages/core/src/components/menu/menuItem.tsx
index cfdd05fccab..e4a8d4cff4a 100644
--- a/packages/core/src/components/menu/menuItem.tsx
+++ b/packages/core/src/components/menu/menuItem.tsx
@@ -17,7 +17,7 @@
 import classNames from "classnames";
 import { createElement, forwardRef } from "react";
 
-import { CaretRight, SmallTick } from "@blueprintjs/icons";
+import { CaretRightIcon, SmallTickIcon } from "@blueprintjs/icons";
 
 import { Classes } from "../../common";
 import { type ActionProps, DISPLAYNAME_PREFIX, removeNonHTMLProps } from "../../common/props";
@@ -262,7 +262,7 @@ export const MenuItem: React.FC<MenuItemProps> = forwardRef<HTMLLIElement, MenuI
             ...(disabled ? DISABLED_PROPS : {}),
             className: anchorClasses,
         },
-        isSelected ? <SmallTick className={Classes.MENU_ITEM_SELECTED_ICON} /> : undefined,
+        isSelected ? <SmallTickIcon className={Classes.MENU_ITEM_SELECTED_ICON} /> : undefined,
         hasIcon ? (
             // wrap icon in a <span> in case `icon` is a custom element rather than a built-in icon identifier,
             // so that we always render this class and hide it from a screen reader
@@ -274,7 +274,7 @@ export const MenuItem: React.FC<MenuItemProps> = forwardRef<HTMLLIElement, MenuI
             {text}
         </Text>,
         maybeLabel,
-        hasSubmenu ? <CaretRight className={Classes.MENU_SUBMENU_ICON} title="Open sub menu" /> : undefined,
+        hasSubmenu ? <CaretRightIcon className={Classes.MENU_SUBMENU_ICON} title="Open sub menu" /> : undefined,
     );
 
     const liClasses = classNames({ [Classes.MENU_SUBMENU]: hasSubmenu });
diff --git a/packages/core/src/components/section/section.tsx b/packages/core/src/components/section/section.tsx
index 55482db81c7..fef7b04b097 100644
--- a/packages/core/src/components/section/section.tsx
+++ b/packages/core/src/components/section/section.tsx
@@ -17,7 +17,7 @@
 import classNames from "classnames";
 import { createElement, forwardRef, useCallback, useState } from "react";
 
-import { ChevronDown, ChevronUp, type IconName } from "@blueprintjs/icons";
+import { ChevronDownIcon, ChevronUpIcon, type IconName } from "@blueprintjs/icons";
 
 import { Classes, Elevation, Utils } from "../../common";
 import { DISPLAYNAME_PREFIX, type HTMLDivProps, type MaybeElement, type Props } from "../../common/props";
@@ -214,7 +214,7 @@ export const Section: React.FC<SectionProps> = forwardRef((props, ref) => {
                                     onKeyDown={clickElementOnKeyPress(["Enter", " "])}
                                     className={classNames(Classes.TEXT_MUTED, Classes.SECTION_HEADER_COLLAPSE_CARET)}
                                 >
-                                    {isCollapsed ? <ChevronDown /> : <ChevronUp />}
+                                    {isCollapsed ? <ChevronDownIcon /> : <ChevronUpIcon />}
                                 </span>
                             )}
                         </div>
diff --git a/packages/core/src/components/tag/tagRemoveButton.tsx b/packages/core/src/components/tag/tagRemoveButton.tsx
index a439b0e100e..88eed4c7eac 100644
--- a/packages/core/src/components/tag/tagRemoveButton.tsx
+++ b/packages/core/src/components/tag/tagRemoveButton.tsx
@@ -16,7 +16,7 @@
 
 import { useCallback } from "react";
 
-import { IconSize, SmallCross } from "@blueprintjs/icons";
+import { IconSize, SmallCrossIcon } from "@blueprintjs/icons";
 
 import { Classes, DISPLAYNAME_PREFIX } from "../../common";
 
@@ -43,7 +43,7 @@ export const TagRemoveButton = (props: TagRemoveButtonProps) => {
             onClick={handleRemoveClick}
             tabIndex={tabIndex}
         >
-            <SmallCross size={isLarge ? IconSize.LARGE : IconSize.STANDARD} />
+            <SmallCrossIcon size={isLarge ? IconSize.LARGE : IconSize.STANDARD} />
         </button>
     );
 };
diff --git a/packages/core/src/components/toast/toast.tsx b/packages/core/src/components/toast/toast.tsx
index fb3742de948..8e1fed74616 100644
--- a/packages/core/src/components/toast/toast.tsx
+++ b/packages/core/src/components/toast/toast.tsx
@@ -17,7 +17,7 @@
 import classNames from "classnames";
 import { forwardRef, useCallback, useEffect, useState } from "react";
 
-import { Cross } from "@blueprintjs/icons";
+import { CrossIcon } from "@blueprintjs/icons";
 
 import { Classes } from "../../common";
 import { DISPLAYNAME_PREFIX } from "../../common/props";
@@ -99,7 +99,7 @@ export const Toast = forwardRef<HTMLDivElement, ToastProps>((props, ref) => {
             </span>
             <ButtonGroup variant="minimal">
                 {action && <AnchorButton {...action} intent={undefined} onClick={handleActionClick} />}
-                {isCloseButtonShown && <Button aria-label="Close" icon={<Cross />} onClick={handleCloseClick} />}
+                {isCloseButtonShown && <Button aria-label="Close" icon={<CrossIcon />} onClick={handleCloseClick} />}
             </ButtonGroup>
         </div>
     );
diff --git a/packages/core/src/components/tree/treeNode.tsx b/packages/core/src/components/tree/treeNode.tsx
index 004958d5140..7cc7c151e76 100644
--- a/packages/core/src/components/tree/treeNode.tsx
+++ b/packages/core/src/components/tree/treeNode.tsx
@@ -17,7 +17,7 @@
 import classNames from "classnames";
 import { Children, Component } from "react";
 
-import { ChevronRight } from "@blueprintjs/icons";
+import { ChevronRightIcon } from "@blueprintjs/icons";
 
 import { Classes, DISPLAYNAME_PREFIX } from "../../common";
 import { Collapse } from "../collapse/collapse";
@@ -104,7 +104,7 @@ export class TreeNode<T = {}> extends Component<TreeNodeProps<T>> {
                 isExpanded ? Classes.TREE_NODE_CARET_OPEN : Classes.TREE_NODE_CARET_CLOSED,
             );
             return (
-                <ChevronRight
+                <ChevronRightIcon
                     title={isExpanded ? "Collapse group" : "Expand group"}
                     className={caretClasses}
                     onClick={disabled === true ? undefined : this.handleCaretClick}
diff --git a/packages/datetime/src/components/react-day-picker/datePickerCaption.tsx b/packages/datetime/src/components/react-day-picker/datePickerCaption.tsx
index 97b75ed999b..de75f67feec 100644
--- a/packages/datetime/src/components/react-day-picker/datePickerCaption.tsx
+++ b/packages/datetime/src/components/react-day-picker/datePickerCaption.tsx
@@ -20,7 +20,7 @@ import { CaptionLabel, type CaptionProps, useDayPicker, useNavigation } from "re
 import innerText from "react-innertext";
 
 import { Button, DISPLAYNAME_PREFIX, HTMLSelect, type OptionProps } from "@blueprintjs/core";
-import { ChevronLeft, ChevronRight } from "@blueprintjs/icons";
+import { ChevronLeftIcon, ChevronRightIcon } from "@blueprintjs/icons";
 
 import { DateUtils, Months } from "../../common";
 import { DatePickerCaptionClasses as CaptionClasses, ReactDayPickerClasses } from "../../common/classes";
@@ -64,7 +64,7 @@ export const DatePickerCaption = (props: CaptionProps) => {
                 CaptionClasses.DATEPICKER3_NAV_BUTTON_PREVIOUS,
             )}
             disabled={!previousMonth}
-            icon={<ChevronLeft />}
+            icon={<ChevronLeftIcon />}
             onClick={handlePreviousClick}
             variant="minimal"
         />
@@ -74,7 +74,7 @@ export const DatePickerCaption = (props: CaptionProps) => {
             aria-label={labels.labelNext(nextMonth, { locale })}
             className={classNames(CaptionClasses.DATEPICKER3_NAV_BUTTON, CaptionClasses.DATEPICKER3_NAV_BUTTON_NEXT)}
             disabled={!nextMonth}
-            icon={<ChevronRight />}
+            icon={<ChevronRightIcon />}
             onClick={handleNextClick}
             variant="minimal"
         />
diff --git a/packages/datetime/src/components/react-day-picker/datePickerNavIcons.tsx b/packages/datetime/src/components/react-day-picker/datePickerNavIcons.tsx
index 80d71c16d77..bc0917ae9a7 100644
--- a/packages/datetime/src/components/react-day-picker/datePickerNavIcons.tsx
+++ b/packages/datetime/src/components/react-day-picker/datePickerNavIcons.tsx
@@ -16,12 +16,12 @@
 
 import type { StyledComponent } from "react-day-picker";
 
-import { ChevronLeft, ChevronRight } from "@blueprintjs/icons";
+import { ChevronLeftIcon, ChevronRightIcon } from "@blueprintjs/icons";
 
 export function IconLeft({ children, ...props }: StyledComponent) {
-    return <ChevronLeft {...props} />;
+    return <ChevronLeftIcon {...props} />;
 }
 
 export function IconRight({ children, ...props }: StyledComponent) {
-    return <ChevronRight {...props} />;
+    return <ChevronRightIcon {...props} />;
 }
diff --git a/packages/docs-app/src/common/dateFnsLocaleSelect.tsx b/packages/docs-app/src/common/dateFnsLocaleSelect.tsx
index 197c7a4ffeb..43df49926a3 100644
--- a/packages/docs-app/src/common/dateFnsLocaleSelect.tsx
+++ b/packages/docs-app/src/common/dateFnsLocaleSelect.tsx
@@ -17,7 +17,7 @@
 import { useCallback } from "react";
 
 import { Button, MenuItem } from "@blueprintjs/core";
-import { CaretDown } from "@blueprintjs/icons";
+import { CaretDownIcon } from "@blueprintjs/icons";
 import { type ItemRenderer, Select, type SelectPopoverProps } from "@blueprintjs/select";
 
 export type CommonDateFnsLocale = "de" | "en-US" | "es" | "fr" | "hi" | "it" | "zh-CN";
@@ -69,7 +69,7 @@ export const DateFnsLocaleSelect: React.FC<DateFnsLocaleSelectProps> = props =>
             onItemSelect={props.onChange}
             popoverProps={{ minimal: true, placement: "bottom-end", ...props.popoverProps }}
         >
-            <Button alignText="start" fill={true} endIcon={<CaretDown />} text={props.value} />
+            <Button alignText="start" fill={true} endIcon={<CaretDownIcon />} text={props.value} />
         </Select>
     );
 };
diff --git a/packages/docs-app/src/common/formattedDateRange.tsx b/packages/docs-app/src/common/formattedDateRange.tsx
index 3b236550d36..e4ee30b330e 100644
--- a/packages/docs-app/src/common/formattedDateRange.tsx
+++ b/packages/docs-app/src/common/formattedDateRange.tsx
@@ -16,7 +16,7 @@
 
 import { Tag } from "@blueprintjs/core";
 import type { DateRange } from "@blueprintjs/datetime";
-import { ArrowRight } from "@blueprintjs/icons";
+import { ArrowRightIcon } from "@blueprintjs/icons";
 
 import { FormattedDateTag } from "./formattedDateTag";
 
@@ -35,7 +35,7 @@ export const FormattedDateRange: React.FC<FormattedDateRangeProps> = ({ range, s
     return (
         <div className="docs-date-range">
             <FormattedDateTag date={start} showTime={showTime} />
-            <ArrowRight />
+            <ArrowRightIcon />
             <FormattedDateTag date={end} showTime={showTime} />
         </div>
     );
diff --git a/packages/docs-app/src/examples/core-examples/iconGeneratedComponentExample.tsx b/packages/docs-app/src/examples/core-examples/iconGeneratedComponentExample.tsx
index 7cd93e3366e..78f2fdcac75 100644
--- a/packages/docs-app/src/examples/core-examples/iconGeneratedComponentExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/iconGeneratedComponentExample.tsx
@@ -18,7 +18,7 @@ import { useState } from "react";
 
 import { H5, Label, Slider } from "@blueprintjs/core";
 import { Example, type ExampleProps } from "@blueprintjs/docs-theme";
-import { Calendar, IconSize } from "@blueprintjs/icons";
+import { CalendarIcon, IconSize } from "@blueprintjs/icons";
 
 const MAX_ICON_SIZE = 100;
 
@@ -45,7 +45,7 @@ export const IconGeneratedComponentExample: React.FC<ExampleProps> = props => {
 
     return (
         <Example options={options} {...props}>
-            <Calendar size={iconSize} />
+            <CalendarIcon size={iconSize} />
         </Example>
     );
 };
diff --git a/packages/docs-theme/src/components/documentation.tsx b/packages/docs-theme/src/components/documentation.tsx
index 6e079c6fa14..5d53a66f2b6 100644
--- a/packages/docs-theme/src/components/documentation.tsx
+++ b/packages/docs-theme/src/components/documentation.tsx
@@ -26,7 +26,7 @@ import classNames from "classnames";
 import { PureComponent } from "react";
 
 import { Classes, Drawer, FocusStyleManager, HotkeysTarget, type Props } from "@blueprintjs/core";
-import { Search } from "@blueprintjs/icons";
+import { SearchIcon } from "@blueprintjs/icons";
 
 import {
     type DocsData,
@@ -216,7 +216,7 @@ export class Documentation extends PureComponent<DocumentationProps, Documentati
                                     {this.props.header}
                                     <div className="docs-nav-divider" />
                                     <NavButton
-                                        icon={<Search />}
+                                        icon={<SearchIcon />}
                                         hotkey="shift + s"
                                         text="Search..."
                                         onClick={this.handleOpenNavigator}
diff --git a/packages/docs-theme/src/components/navigator.tsx b/packages/docs-theme/src/components/navigator.tsx
index a52f80e33d4..9c06e207537 100644
--- a/packages/docs-theme/src/components/navigator.tsx
+++ b/packages/docs-theme/src/components/navigator.tsx
@@ -20,7 +20,7 @@ import { filter } from "fuzzaldrin-plus";
 import { PureComponent } from "react";
 
 import { Classes, MenuItem } from "@blueprintjs/core";
-import { CaretRight } from "@blueprintjs/icons";
+import { CaretRightIcon } from "@blueprintjs/icons";
 import { type ItemListPredicate, type ItemRenderer, Omnibar } from "@blueprintjs/select";
 
 import { eachLayoutNode } from "../common/documentalistUtils";
@@ -105,7 +105,7 @@ export class Navigator extends PureComponent<NavigatorProps> {
 
         // insert caret-right between each path element
         const pathElements = section.path.reduce<React.ReactNode[]>((elems, el) => {
-            elems.push(el, <CaretRight key={el} />);
+            elems.push(el, <CaretRightIcon key={el} />);
             return elems;
         }, []);
         pathElements.pop();
diff --git a/packages/docs-theme/src/tags/heading.tsx b/packages/docs-theme/src/tags/heading.tsx
index 7ca66b28d7a..44186401bff 100644
--- a/packages/docs-theme/src/tags/heading.tsx
+++ b/packages/docs-theme/src/tags/heading.tsx
@@ -19,7 +19,7 @@ import classNames from "classnames";
 import { createElement } from "react";
 
 import { Classes } from "@blueprintjs/core";
-import { Link } from "@blueprintjs/icons";
+import { LinkIcon } from "@blueprintjs/icons";
 
 import { COMPONENT_DISPLAY_NAMESPACE } from "../common";
 
@@ -33,7 +33,7 @@ export const Heading: React.FC<Tag> = props => {
     const children = [
         <a className="docs-anchor" data-route={route} key="anchor" aria-hidden={true} tabIndex={-1} />,
         <a className="docs-anchor-link" href={"#" + route} key="link" aria-hidden={true} tabIndex={-1}>
-            <Link />
+            <LinkIcon />
         </a>,
         value,
     ];
diff --git a/packages/docs-theme/src/tags/reactExample.tsx b/packages/docs-theme/src/tags/reactExample.tsx
index b81eb9d46b7..ca8454cace0 100644
--- a/packages/docs-theme/src/tags/reactExample.tsx
+++ b/packages/docs-theme/src/tags/reactExample.tsx
@@ -17,7 +17,7 @@
 import type { Tag } from "@documentalist/client";
 
 import { AnchorButton, Intent } from "@blueprintjs/core";
-import { Code } from "@blueprintjs/icons";
+import { CodeIcon } from "@blueprintjs/icons";
 
 import type { ExampleProps } from "../components/example";
 
@@ -56,7 +56,7 @@ export class ReactExampleTagRenderer {
                     className="docs-example-view-source"
                     fill={true}
                     href={example.sourceUrl}
-                    icon={<Code />}
+                    icon={<CodeIcon />}
                     intent={Intent.PRIMARY}
                     target="_blank"
                     text="View source on GitHub"
diff --git a/packages/select/src/components/multi-select/multiSelect.tsx b/packages/select/src/components/multi-select/multiSelect.tsx
index 44168ff00f9..651f697bb1c 100644
--- a/packages/select/src/components/multi-select/multiSelect.tsx
+++ b/packages/select/src/components/multi-select/multiSelect.tsx
@@ -34,7 +34,7 @@ import {
     type TagInputProps,
     Utils,
 } from "@blueprintjs/core";
-import { Cross } from "@blueprintjs/icons";
+import { CrossIcon } from "@blueprintjs/icons";
 
 import { Classes, type ListItemsProps, type SelectPopoverProps } from "../../common";
 import { QueryList, type QueryListRendererProps } from "../query-list/queryList";
@@ -314,7 +314,7 @@ export class MultiSelect<T> extends AbstractPureComponent<MultiSelectProps<T>, M
                 <Button
                     aria-label="Clear selected items"
                     disabled={disabled}
-                    icon={<Cross />}
+                    icon={<CrossIcon />}
                     onClick={this.handleClearButtonClick}
                     title="Clear selected items"
                     variant="minimal"
diff --git a/packages/select/src/components/omnibar/omnibar.tsx b/packages/select/src/components/omnibar/omnibar.tsx
index 65cbc2cf3fa..f7fa14c9101 100644
--- a/packages/select/src/components/omnibar/omnibar.tsx
+++ b/packages/select/src/components/omnibar/omnibar.tsx
@@ -18,7 +18,7 @@ import classNames from "classnames";
 import { PureComponent } from "react";
 
 import { DISPLAYNAME_PREFIX, InputGroup, type InputGroupProps, Overlay2, type OverlayProps } from "@blueprintjs/core";
-import { Search } from "@blueprintjs/icons";
+import { SearchIcon } from "@blueprintjs/icons";
 
 import { Classes, type ListItemsProps } from "../../common";
 import { QueryList, type QueryListRendererProps } from "../query-list/queryList";
@@ -99,7 +99,7 @@ export class Omnibar<T> extends PureComponent<OmnibarProps<T>> {
                 <div className={classNames(Classes.OMNIBAR, listProps.className)} {...handlers}>
                     <InputGroup
                         autoFocus={true}
-                        leftIcon={<Search />}
+                        leftIcon={<SearchIcon />}
                         placeholder="Search..."
                         size="large"
                         {...inputProps}
diff --git a/packages/select/src/components/select/select.tsx b/packages/select/src/components/select/select.tsx
index d38399df00e..f2ebe7621e9 100644
--- a/packages/select/src/components/select/select.tsx
+++ b/packages/select/src/components/select/select.tsx
@@ -32,7 +32,7 @@ import {
     setRef,
     Utils,
 } from "@blueprintjs/core";
-import { Cross, Search } from "@blueprintjs/icons";
+import { CrossIcon, SearchIcon } from "@blueprintjs/icons";
 
 import { Classes, type ListItemsProps, type SelectPopoverProps } from "../../common";
 import { QueryList, type QueryListRendererProps } from "../query-list/queryList";
@@ -179,7 +179,7 @@ export class Select<T> extends AbstractPureComponent<SelectProps<T>, SelectState
                 aria-activedescendant={listProps.activeItemId}
                 aria-autocomplete="list"
                 aria-expanded={this.state.isOpen}
-                leftIcon={<Search />}
+                leftIcon={<SearchIcon />}
                 placeholder={placeholder}
                 rightElement={this.maybeRenderClearButton(listProps.query)}
                 role="combobox"
@@ -266,7 +266,7 @@ export class Select<T> extends AbstractPureComponent<SelectProps<T>, SelectState
         return query.length > 0 ? (
             <Button
                 aria-label="Clear filter query"
-                icon={<Cross />}
+                icon={<CrossIcon />}
                 onClick={this.resetQuery}
                 title="Clear filter query"
                 variant="minimal"
diff --git a/packages/table/src/cell/formats/truncatedFormat.tsx b/packages/table/src/cell/formats/truncatedFormat.tsx
index 4f013461c9d..f96257d7765 100644
--- a/packages/table/src/cell/formats/truncatedFormat.tsx
+++ b/packages/table/src/cell/formats/truncatedFormat.tsx
@@ -18,7 +18,7 @@ import classNames from "classnames";
 import { PureComponent } from "react";
 
 import { DISPLAYNAME_PREFIX, Popover, type Props } from "@blueprintjs/core";
-import { More } from "@blueprintjs/icons";
+import { MoreIcon } from "@blueprintjs/icons";
 
 import * as Classes from "../../common/classes";
 import { Utils } from "../../common/utils";
@@ -240,7 +240,7 @@ export class TruncatedFormat extends PureComponent<TruncatedFormatProps, Truncat
                     placement="bottom"
                     rootBoundary="document"
                 >
-                    <More />
+                    <MoreIcon />
                 </Popover>
             );
         } else {
@@ -248,7 +248,7 @@ export class TruncatedFormat extends PureComponent<TruncatedFormatProps, Truncat
             return (
                 // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
                 <span className={Classes.TABLE_TRUNCATED_POPOVER_TARGET} onClick={this.handlePopoverOpen}>
-                    <More />
+                    <MoreIcon />
                 </span>
             );
         }
diff --git a/packages/table/src/headers/header.tsx b/packages/table/src/headers/header.tsx
index 6311daf36b7..ced86fdf75e 100644
--- a/packages/table/src/headers/header.tsx
+++ b/packages/table/src/headers/header.tsx
@@ -18,7 +18,7 @@ import classNames from "classnames";
 import { cloneElement, Component, createRef } from "react";
 
 import { Utils as CoreUtils } from "@blueprintjs/core";
-import { DragHandleVertical } from "@blueprintjs/icons";
+import { DragHandleVerticalIcon } from "@blueprintjs/icons";
 
 import type { Grid } from "../common";
 import type { FocusedRegion, FocusMode } from "../common/cellTypes";
@@ -439,7 +439,7 @@ export class Header extends Component<InternalHeaderProps, HeaderState> {
                       <div
                           className={classNames(Classes.TABLE_REORDER_HANDLE, CLASSNAME_EXCLUDED_FROM_TEXT_MEASUREMENT)}
                       >
-                          <DragHandleVertical title="Press down to drag" />
+                          <DragHandleVerticalIcon title="Press down to drag" />
                       </div>
                   </div>,
                   false,