From 36d967ecfd1874a550f7c0f6b5afba16fbda25af Mon Sep 17 00:00:00 2001
From: Sergei Garin <sergei.garin@enso.org>
Date: Mon, 3 Feb 2025 15:24:50 +0300
Subject: [PATCH] New icon component (#12091)

This PR adds support for icons generated from figma and deprecates the imports from `#/assets/` folder

Closes: https://github.com/enso-org/enso/issues/12062

---
Note: This PR ***does not*** migrate any icons. It only deprecates the legacy approach. Migrations will be done in future PRs.
---


Please refer to Storybook for visual review. Also this PR adds a canvas with all icons.
---
 .github/workflows/gui-checks.yml              |   5 +
 .github/workflows/storybook.yml               |   3 +
 app/gui/env.d.ts                              |  11 ++
 app/gui/scripts/generateIconMetadata.mjs      |   2 +-
 .../AriaComponents/Button/Button.stories.tsx  |   4 +-
 .../AriaComponents/Button/Button.tsx          |  16 ++-
 .../AriaComponents/Button/CloseButton.tsx     |   9 +-
 .../AriaComponents/Button/CopyButton.tsx      |   5 +-
 .../components/AriaComponents/Button/types.ts |  10 +-
 .../AriaComponents/Dialog/Close.tsx           |  20 ++-
 .../AriaComponents/Dialog/Dialog.tsx          |   1 +
 .../AriaComponents/Dialog/DialogDismiss.tsx   |  17 ++-
 .../AriaComponents/Form/components/Reset.tsx  |   5 +-
 .../AriaComponents/Form/components/Submit.tsx |  13 +-
 .../AriaComponents/Menu/MenuItem.tsx          |  18 +--
 .../components/AriaComponents/types.ts        |  43 ++++++-
 .../components/Breadcrumbs/BreadcrumbItem.tsx |  21 +---
 .../Breadcrumbs/Breadcrumbs.stories.tsx       |  13 +-
 .../components/Breadcrumbs/Breadcrumbs.tsx    |   9 +-
 .../components/Icon/Icon.stories.tsx          |  74 ++++++-----
 .../src/dashboard/components/Icon/Icon.tsx    | 117 ++++++++++++++----
 .../src/dashboard/components/Icon/index.ts    |   4 +-
 .../components/Paywall/PaywallAlert.tsx       |   9 +-
 .../Paywall/PaywallDialogButton.tsx           |  13 +-
 .../components/Paywall/UpgradeButton.tsx      |  13 +-
 .../Paywall/components/PaywallButton.tsx      |   6 +-
 app/gui/src/dashboard/components/SvgIcon.tsx  |  33 -----
 app/gui/src/dashboard/components/SvgMask.tsx  |   8 +-
 .../components/styled/SidebarTabButton.tsx    |   2 +-
 eslint.config.mjs                             |   2 +-
 package.json                                  |   2 +-
 31 files changed, 315 insertions(+), 193 deletions(-)
 delete mode 100644 app/gui/src/dashboard/components/SvgIcon.tsx

diff --git a/.github/workflows/gui-checks.yml b/.github/workflows/gui-checks.yml
index 1a114b3f4f7b..accd40d7648d 100644
--- a/.github/workflows/gui-checks.yml
+++ b/.github/workflows/gui-checks.yml
@@ -15,6 +15,11 @@ permissions:
   statuses: write # Write access to commit statuses
   checks: write
 
+env:
+  # Workaround for https://github.com/nodejs/corepack/issues/612
+  # See: https://github.com/nodejs/corepack/blob/main/README.md#environment-variables
+  COREPACK_DEFAULT_TO_LATEST: 0
+
 jobs:
   lint:
     name: 👮 Lint GUI
diff --git a/.github/workflows/storybook.yml b/.github/workflows/storybook.yml
index 1a7dec273de7..bb9bfa61ba51 100644
--- a/.github/workflows/storybook.yml
+++ b/.github/workflows/storybook.yml
@@ -16,6 +16,9 @@ permissions:
   statuses: write # Write access to commit statuses
 
 env:
+  # Workaround for https://github.com/nodejs/corepack/issues/612
+  # See: https://github.com/nodejs/corepack/blob/main/README.md#environment-variables
+  COREPACK_DEFAULT_TO_LATEST: 0
   ENSO_BUILD_SKIP_VERSION_CHECK: "true"
   PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
 
diff --git a/app/gui/env.d.ts b/app/gui/env.d.ts
index 9dfeb5ffa61f..0a84bf999156 100644
--- a/app/gui/env.d.ts
+++ b/app/gui/env.d.ts
@@ -199,3 +199,14 @@ declare global {
     (message: string, projectId?: string | null, metadata?: object | null): void
   }
 }
+
+// Add additional types for svg imports from `#/assets/*.svg`
+declare module 'vite/client' {
+  declare module '#/assets/*.svg' {
+    /**
+     * @deprecated Prefer defined keys over importing from `#/assets/*.svg
+     */
+    const src: string
+    export default src
+  }
+}
diff --git a/app/gui/scripts/generateIconMetadata.mjs b/app/gui/scripts/generateIconMetadata.mjs
index 242b2c76f8fd..e93936267f65 100644
--- a/app/gui/scripts/generateIconMetadata.mjs
+++ b/app/gui/scripts/generateIconMetadata.mjs
@@ -15,7 +15,7 @@ await fs.writeFile(
 // Please run \`bazel run //:write_all\` to regenerate this file whenever \`icons.svg\` is changed.
 
 /** All icon names present in icons.svg. */
-const iconNames = [
+export const iconNames = [
 ${iconNames?.map((name) => `  '${name}',`).join('\n')}
 ] as const
 
diff --git a/app/gui/src/dashboard/components/AriaComponents/Button/Button.stories.tsx b/app/gui/src/dashboard/components/AriaComponents/Button/Button.stories.tsx
index 6eec46bd6c40..801eafa992be 100644
--- a/app/gui/src/dashboard/components/AriaComponents/Button/Button.stories.tsx
+++ b/app/gui/src/dashboard/components/AriaComponents/Button/Button.stories.tsx
@@ -9,7 +9,7 @@ import { expect, userEvent, within } from '@storybook/test'
 import { Button, type BaseButtonProps } from '.'
 import { Badge } from '../../Badge'
 
-type Story = StoryObj<BaseButtonProps<aria.ButtonRenderProps>>
+type Story = StoryObj<BaseButtonProps<string, aria.ButtonRenderProps>>
 
 const variants = [
   'primary',
@@ -40,7 +40,7 @@ export default {
     addonStart: { control: false },
     addonEnd: { control: false },
   },
-} as Meta<BaseButtonProps<aria.ButtonRenderProps>>
+} satisfies Meta<BaseButtonProps<string, aria.ButtonRenderProps>>
 
 export const Variants: Story = {
   render: () => (
diff --git a/app/gui/src/dashboard/components/AriaComponents/Button/Button.tsx b/app/gui/src/dashboard/components/AriaComponents/Button/Button.tsx
index 327ea8fd4791..cee8ed33c59b 100644
--- a/app/gui/src/dashboard/components/AriaComponents/Button/Button.tsx
+++ b/app/gui/src/dashboard/components/AriaComponents/Button/Button.tsx
@@ -10,11 +10,10 @@ import {
 } from 'react'
 
 import * as aria from '#/components/aria'
-import { StatelessSpinner } from '#/components/StatelessSpinner'
-import SvgMask from '#/components/SvgMask'
-
 import { useVisualTooltip } from '#/components/AriaComponents/Text'
 import { Tooltip, TooltipTrigger } from '#/components/AriaComponents/Tooltip'
+import { Icon as IconComponent } from '#/components/Icon'
+import { StatelessSpinner } from '#/components/StatelessSpinner'
 import { useEventCallback } from '#/hooks/eventCallbackHooks'
 import { forwardRef } from '#/utilities/react'
 import { ButtonGroup, ButtonGroupJoin } from './ButtonGroup'
@@ -28,7 +27,10 @@ const ICON_LOADER_DELAY = 150
 // Manually casting types to make TS infer the final type correctly (e.g. RenderProps in icon)
 // eslint-disable-next-line no-restricted-syntax
 export const Button = memo(
-  forwardRef(function Button(props: ButtonProps, ref: ForwardedRef<HTMLButtonElement>) {
+  forwardRef(function Button<IconType extends string>(
+    props: ButtonProps<IconType>,
+    ref: ForwardedRef<HTMLButtonElement>,
+  ) {
     props = useMergedButtonStyles(props)
     const {
       className,
@@ -252,7 +254,9 @@ export const Button = memo(
       </TooltipTrigger>
     )
   }),
-) as unknown as ((props: ButtonProps & { ref?: ForwardedRef<HTMLButtonElement> }) => ReactNode) & {
+) as unknown as (<IconType extends string>(
+  props: ButtonProps<IconType> & { ref?: ForwardedRef<HTMLButtonElement> },
+) => ReactNode) & {
   // eslint-disable-next-line @typescript-eslint/naming-convention
   Group: typeof ButtonGroup
   // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -382,7 +386,7 @@ const Icon = memo(function Icon(props: IconProps) {
 
   const actualIcon = (() => {
     return typeof icon === 'string' ?
-        <SvgMask src={icon} className={styles.icon()} />
+        <IconComponent className={styles.icon()}>{icon}</IconComponent>
       : <span className={styles.icon()}>{icon}</span>
   })()
 
diff --git a/app/gui/src/dashboard/components/AriaComponents/Button/CloseButton.tsx b/app/gui/src/dashboard/components/AriaComponents/Button/CloseButton.tsx
index 120d13d2dbe5..265ae955eca5 100644
--- a/app/gui/src/dashboard/components/AriaComponents/Button/CloseButton.tsx
+++ b/app/gui/src/dashboard/components/AriaComponents/Button/CloseButton.tsx
@@ -8,10 +8,15 @@ import { Button } from './Button'
 import type { ButtonProps } from './types'
 
 /** Props for a {@link CloseButton}. */
-export type CloseButtonProps = Omit<ButtonProps, 'children' | 'rounding' | 'size' | 'variant'>
+export type CloseButtonProps<IconType extends string> = Omit<
+  ButtonProps<IconType>,
+  'children' | 'rounding' | 'size' | 'variant'
+>
 
 /** A styled button with a close icon that appears on hover. */
-export const CloseButton = memo(function CloseButton(props: CloseButtonProps) {
+export const CloseButton = memo(function CloseButton<IconType extends string>(
+  props: CloseButtonProps<IconType>,
+) {
   const { getText } = useText()
 
   const {
diff --git a/app/gui/src/dashboard/components/AriaComponents/Button/CopyButton.tsx b/app/gui/src/dashboard/components/AriaComponents/Button/CopyButton.tsx
index e2567b6837a7..5a5f57801211 100644
--- a/app/gui/src/dashboard/components/AriaComponents/Button/CopyButton.tsx
+++ b/app/gui/src/dashboard/components/AriaComponents/Button/CopyButton.tsx
@@ -17,7 +17,8 @@ import type { ButtonProps } from './types'
 // ==================
 
 /** Props for a {@link CopyButton}. */
-export interface CopyButtonProps extends Omit<ButtonProps, 'icon' | 'loading' | 'onPress'> {
+export interface CopyButtonProps<IconType extends string>
+  extends Omit<ButtonProps<IconType>, 'icon' | 'loading' | 'onPress'> {
   /** The text to copy to the clipboard. */
   readonly copyText: string
   /**
@@ -38,7 +39,7 @@ export interface CopyButtonProps extends Omit<ButtonProps, 'icon' | 'loading' |
 }
 
 /** A button that copies text to the clipboard. */
-export function CopyButton(props: CopyButtonProps) {
+export function CopyButton<IconType extends string>(props: CopyButtonProps<IconType>) {
   const {
     variant = 'icon',
     copyIcon = CopyIcon,
diff --git a/app/gui/src/dashboard/components/AriaComponents/Button/types.ts b/app/gui/src/dashboard/components/AriaComponents/Button/types.ts
index 797a6f5957c0..72a1a7c5761b 100644
--- a/app/gui/src/dashboard/components/AriaComponents/Button/types.ts
+++ b/app/gui/src/dashboard/components/AriaComponents/Button/types.ts
@@ -42,11 +42,11 @@ export interface LinkRenderProps extends aria.LinkRenderProps {
 }
 
 /** Props for a Button. */
-export type ButtonProps =
-  | (BaseButtonProps<ButtonRenderProps> &
+export type ButtonProps<IconType extends string = string> =
+  | (BaseButtonProps<IconType, ButtonRenderProps> &
       Omit<aria.ButtonProps, 'children' | 'isPending' | 'onPress'> &
       PropsWithoutHref)
-  | (BaseButtonProps<LinkRenderProps> &
+  | (BaseButtonProps<IconType, LinkRenderProps> &
       Omit<aria.LinkProps, 'children' | 'onPress'> &
       PropsWithHref)
 
@@ -61,7 +61,7 @@ interface PropsWithoutHref {
 }
 
 /** Base props for a button. */
-export interface BaseButtonProps<Render>
+export interface BaseButtonProps<IconType extends string, Render>
   extends Omit<ButtonVariants, 'iconOnly' | 'isJoined' | 'position'>,
     TestIdProps {
   /** If `true`, the loader will not be shown. */
@@ -70,7 +70,7 @@ export interface BaseButtonProps<Render>
   readonly tooltip?: ReactElement | string | false | null
   readonly tooltipPlacement?: aria.Placement
   /** The icon to display in the button */
-  readonly icon?: IconProp<Render>
+  readonly icon?: IconProp<IconType, Render>
   /** When `true`, icon will be shown only when hovered. */
   readonly showIconOnHover?: boolean
   /**
diff --git a/app/gui/src/dashboard/components/AriaComponents/Dialog/Close.tsx b/app/gui/src/dashboard/components/AriaComponents/Dialog/Close.tsx
index f49ea796f9c8..61eaad4d3c3e 100644
--- a/app/gui/src/dashboard/components/AriaComponents/Dialog/Close.tsx
+++ b/app/gui/src/dashboard/components/AriaComponents/Dialog/Close.tsx
@@ -4,25 +4,23 @@
  * Close button for a dialog.
  */
 
-import invariant from 'tiny-invariant'
-
 import { useEventCallback } from '#/hooks/eventCallbackHooks'
 import { type ButtonProps, Button } from '../Button'
 import * as dialogProvider from './DialogProvider'
 
 /** Props for {@link Close} component. */
-export type CloseProps = ButtonProps
+export type CloseProps<IconType extends string> = ButtonProps<IconType>
 
 /** Close button for a dialog. */
-export function Close(props: CloseProps) {
-  const dialogContext = dialogProvider.useDialogContext()
-
-  invariant(dialogContext, 'Close must be used inside a DialogProvider')
+export function Close<IconType extends string>(props: CloseProps<IconType>) {
+  const dialogContext = dialogProvider.useDialogStrictContext()
 
-  const onPressCallback = useEventCallback<NonNullable<ButtonProps['onPress']>>((event) => {
-    dialogContext.close()
-    return props.onPress?.(event)
-  })
+  const onPressCallback = useEventCallback<NonNullable<ButtonProps<IconType>['onPress']>>(
+    (event) => {
+      dialogContext.close()
+      return props.onPress?.(event)
+    },
+  )
 
   return <Button {...props} onPress={onPressCallback} />
 }
diff --git a/app/gui/src/dashboard/components/AriaComponents/Dialog/Dialog.tsx b/app/gui/src/dashboard/components/AriaComponents/Dialog/Dialog.tsx
index eec56479bde2..8828c764a723 100644
--- a/app/gui/src/dashboard/components/AriaComponents/Dialog/Dialog.tsx
+++ b/app/gui/src/dashboard/components/AriaComponents/Dialog/Dialog.tsx
@@ -573,5 +573,6 @@ const DialogHeader = React.memo(function DialogHeader(props: DialogHeaderProps)
 })
 
 Dialog.Close = Close
+/** @deprecated Use {@link Dialog.Close} instead. */
 Dialog.Dismiss = DialogDismiss
 Dialog.Trigger = DialogTrigger
diff --git a/app/gui/src/dashboard/components/AriaComponents/Dialog/DialogDismiss.tsx b/app/gui/src/dashboard/components/AriaComponents/Dialog/DialogDismiss.tsx
index 4de948a203c5..4cb0c3e8029b 100644
--- a/app/gui/src/dashboard/components/AriaComponents/Dialog/DialogDismiss.tsx
+++ b/app/gui/src/dashboard/components/AriaComponents/Dialog/DialogDismiss.tsx
@@ -6,16 +6,21 @@ import { Button, type ButtonProps } from '../Button'
 import { useDialogContext } from './DialogProvider'
 
 /** Additional props for the Cancel component. */
-interface DialogDismissBaseProps {
-  readonly variant?: ButtonProps['variant']
+interface DialogDismissBaseProps<IconType extends string> {
+  readonly variant?: ButtonProps<IconType>['variant']
 }
 
 /** Props for a {@link DialogDismiss}. */
-export type DialogDismissProps = DialogDismissBaseProps &
-  Omit<ButtonProps, 'formnovalidate' | 'href' | 'variant'>
+export type DialogDismissProps<IconType extends string> = DialogDismissBaseProps<IconType> &
+  Omit<ButtonProps<IconType>, 'formnovalidate' | 'href' | 'variant'>
 
-/** Dismiss button for dialogs. */
-export function DialogDismiss(props: DialogDismissProps): JSX.Element {
+/**
+ * Dismiss button for dialogs.
+ * @deprecated Use {@link Close} instead.
+ */
+export function DialogDismiss<IconType extends string>(
+  props: DialogDismissProps<IconType>,
+): JSX.Element {
   const { getText } = useText()
 
   const { size = 'medium', ...buttonProps } = props
diff --git a/app/gui/src/dashboard/components/AriaComponents/Form/components/Reset.tsx b/app/gui/src/dashboard/components/AriaComponents/Form/components/Reset.tsx
index 3d7975c8732a..4a70952b91ce 100644
--- a/app/gui/src/dashboard/components/AriaComponents/Form/components/Reset.tsx
+++ b/app/gui/src/dashboard/components/AriaComponents/Form/components/Reset.tsx
@@ -7,7 +7,8 @@ import * as formContext from './FormProvider'
 import type * as types from './types'
 
 /** Props for the Reset component. */
-export interface ResetProps extends Omit<ButtonProps, 'href' | 'loading'> {
+export interface ResetProps<IconType extends string>
+  extends Omit<ButtonProps<IconType>, 'href' | 'loading'> {
   /**
    * Connects the reset button to a form.
    * If not provided, the button will use the nearest form context.
@@ -20,7 +21,7 @@ export interface ResetProps extends Omit<ButtonProps, 'href' | 'loading'> {
 }
 
 /** Reset button for forms. */
-export function Reset(props: ResetProps): React.JSX.Element {
+export function Reset<IconType extends string>(props: ResetProps<IconType>): React.JSX.Element {
   const { getText } = useText()
   const {
     variant = 'outline',
diff --git a/app/gui/src/dashboard/components/AriaComponents/Form/components/Submit.tsx b/app/gui/src/dashboard/components/AriaComponents/Form/components/Submit.tsx
index 2d7760215226..d1bbd416ff65 100644
--- a/app/gui/src/dashboard/components/AriaComponents/Form/components/Submit.tsx
+++ b/app/gui/src/dashboard/components/AriaComponents/Form/components/Submit.tsx
@@ -12,8 +12,8 @@ import { useFormContext } from './FormProvider'
 import type { FormInstance } from './types'
 
 /** Additional props for the Submit component. */
-interface SubmitButtonBaseProps {
-  readonly variant?: ButtonProps['variant']
+interface SubmitButtonBaseProps<IconType extends string> {
+  readonly variant?: ButtonProps<IconType>['variant']
   /**
    * Connects the submit button to a form.
    * If not provided, the button will use the nearest form context.
@@ -27,15 +27,18 @@ interface SubmitButtonBaseProps {
 }
 
 /** Props for the Submit component. */
-export type SubmitProps = Omit<ButtonProps, 'formnovalidate' | 'href' | 'variant'> &
-  SubmitButtonBaseProps
+export type SubmitProps<IconType extends string> = Omit<
+  ButtonProps<IconType>,
+  'formnovalidate' | 'href' | 'variant'
+> &
+  SubmitButtonBaseProps<IconType>
 
 /**
  * Submit button for forms.
  *
  * Manages the form state and displays a loading spinner when the form is submitting.
  */
-export function Submit(props: SubmitProps): JSX.Element {
+export function Submit<IconType extends string>(props: SubmitProps<IconType>): JSX.Element {
   const { getText } = useText()
 
   const {
diff --git a/app/gui/src/dashboard/components/AriaComponents/Menu/MenuItem.tsx b/app/gui/src/dashboard/components/AriaComponents/Menu/MenuItem.tsx
index 8c832c0b68fa..6687ebcaee24 100644
--- a/app/gui/src/dashboard/components/AriaComponents/Menu/MenuItem.tsx
+++ b/app/gui/src/dashboard/components/AriaComponents/Menu/MenuItem.tsx
@@ -47,7 +47,7 @@ export const MENU_ITEM_STYLES = tv({
 })
 
 /** Props for {@link MenuItem} */
-export type MenuItemProps<T extends object> = MenuItemBaseProps &
+export type MenuItemProps<T extends object, IconType extends string> = MenuItemBaseProps<IconType> &
   Omit<AriaMenuItemProps<T>, 'children'> &
   TestIdProps &
   VariantProps<typeof MENU_ITEM_STYLES> &
@@ -56,9 +56,9 @@ export type MenuItemProps<T extends object> = MenuItemBaseProps &
 /**
  * Base props for the menu item.
  */
-export interface MenuItemBaseProps {
+export interface MenuItemBaseProps<IconType extends string> {
   /** Icon to display before the menu item text. Can be a string (path to SVG), ReactElement, or a render function */
-  readonly icon?: IconProp<MenuItemRenderProps>
+  readonly icon?: IconProp<IconType, MenuItemRenderProps>
   /** Keyboard shortcut text to display */
   readonly shortcut?: string
   /** Additional class name */
@@ -87,7 +87,9 @@ export interface MenuItemCustomContentProps {
 /**
  * An item within a menu that represents a single action or option.
  */
-export const MenuItem = memo(function MenuItem<T extends object>(props: MenuItemProps<T>) {
+export const MenuItem = memo(function MenuItem<T extends object, IconType extends string>(
+  props: MenuItemProps<T, IconType>,
+) {
   const {
     icon,
     shortcut,
@@ -154,14 +156,16 @@ export const MenuItem = memo(function MenuItem<T extends object>(props: MenuItem
 })
 
 /** Props for {@link MenuItemIcon} */
-interface MenuItemIconProps extends MenuItemRenderProps {
-  readonly icon: MenuItemProps<object>['icon']
+interface MenuItemIconProps<IconType extends string> extends MenuItemRenderProps {
+  readonly icon: MenuItemProps<object, IconType>['icon']
   readonly className?: string
 }
 
 /** Renders the icon for the menu item */
 // eslint-disable-next-line no-restricted-syntax
-const MenuItemIcon = memo(function MenuItemIcon(props: MenuItemIconProps) {
+const MenuItemIcon = memo(function MenuItemIcon<IconType extends string>(
+  props: MenuItemIconProps<IconType>,
+) {
   const { icon, className, ...renderProps } = props
 
   return (
diff --git a/app/gui/src/dashboard/components/AriaComponents/types.ts b/app/gui/src/dashboard/components/AriaComponents/types.ts
index a30d8b533d2e..ed8b259c5761 100644
--- a/app/gui/src/dashboard/components/AriaComponents/types.ts
+++ b/app/gui/src/dashboard/components/AriaComponents/types.ts
@@ -1,5 +1,7 @@
 /** @file Common types for ARIA components. */
+import type { Icon as PossibleIcon } from '@/util/iconMetadata/iconName'
 import type { ReactElement } from 'react'
+
 import type * as reactAria from 'react-aria'
 
 /** Props for adding a test id to a component */
@@ -16,16 +18,49 @@ export interface TestIdProps {
 export type Placement = reactAria.Placement
 
 /**
- * Generic type for any icon
+ * Type for any icon
+ */
+export type IconProp<Icon extends string = string, Render = never> =
+  | IconPropSvgUse<Render>
+  | LegacyIconProp<Icon, Render>
+
+/**
+ * A type that represents the possible return values for a legacy icon.
  */
-export type IconProp<Render> =
+export type LegacyAvialableIconReturn<Icon extends string> =
+  | LegacyIcon<Icon>
   | ReactElement
-  | string
   | false
-  | ((render: Render) => ReactElement | string | false | null | undefined)
   | null
   | undefined
 
+/**
+ * A type that represents the possible return values for a legacy icon.
+ */
+export type AvailableIconReturn = ReactElement | SvgUseIcon | false | null | undefined
+
+/**
+ * Generic type for any icon
+ * @deprecated Prefer defined keys over importing from `#/assets/*.svg
+ */
+export type LegacyIconProp<Icon extends string, Render> =
+  | LegacyAvialableIconReturn<Icon>
+  | ((render: Render) => LegacyAvialableIconReturn<Icon>)
+
+/**
+ * Generic type for imported from figma icons
+ */
+export type IconPropSvgUse<Render> = AvailableIconReturn | ((render: Render) => AvailableIconReturn)
+
+/**
+ * @deprecated
+ */
+export type LegacyIcon<T extends string> = Exclude<T, PossibleIcon> & {}
+
+/**
+ * Type for any icon imported from figma
+ */
+export type SvgUseIcon = PossibleIcon
 /**
  * Generic type for any addon
  */
diff --git a/app/gui/src/dashboard/components/Breadcrumbs/BreadcrumbItem.tsx b/app/gui/src/dashboard/components/Breadcrumbs/BreadcrumbItem.tsx
index 7c93bc366519..275719a75199 100644
--- a/app/gui/src/dashboard/components/Breadcrumbs/BreadcrumbItem.tsx
+++ b/app/gui/src/dashboard/components/Breadcrumbs/BreadcrumbItem.tsx
@@ -8,7 +8,7 @@ import { createLeafComponent } from '@react-aria/collections'
 import { isValidElement } from 'react'
 import * as aria from 'react-aria-components'
 import { Button, Menu, Text, type Addon, type IconProp, type TestIdProps } from '../AriaComponents'
-import { Icon as IconComponent } from '../Icon'
+import { Icon as IconComponent, renderIcon } from '../Icon'
 
 export const BREADCRUMB_ITEM_STYLES = tv({
   base: 'flex items-center gap-2',
@@ -30,7 +30,7 @@ export const BREADCRUMB_ITEM_STYLES = tv({
 /**
  * Props for {@link BreadcrumbItem}
  */
-export interface BreadcrumbItemProps
+export interface BreadcrumbItemProps<IconType extends string>
   extends Omit<aria.BreadcrumbProps, 'id'>,
     Omit<aria.LinkProps, 'children' | 'className' | 'style'>,
     TestIdProps,
@@ -40,7 +40,7 @@ export interface BreadcrumbItemProps
   /** An optional suffix element to render after the breadcrumb content */
   readonly addonStart?: Addon<aria.BreadcrumbRenderProps>
   readonly addonEnd?: Addon<aria.BreadcrumbRenderProps>
-  readonly icon?: IconProp<aria.BreadcrumbRenderProps>
+  readonly icon?: IconProp<IconType, aria.BreadcrumbRenderProps>
   readonly isCurrent?: boolean
   readonly isDisabled?: boolean
 }
@@ -48,7 +48,7 @@ export interface BreadcrumbItemProps
 /**
  * A single breadcrumb item.
  */
-export function BreadcrumbItem(props: BreadcrumbItemProps) {
+export function BreadcrumbItem<IconType extends string>(props: BreadcrumbItemProps<IconType>) {
   const {
     children,
     id,
@@ -121,16 +121,7 @@ export function BreadcrumbItem(props: BreadcrumbItemProps) {
                 {typeof children === 'function' ? children(renderProps) : children}
               </span>
             </Text>
-          : <Button
-              {...linkProps}
-              {...itemProps}
-              icon={() => {
-                if (typeof icon === 'function') {
-                  return icon({ isCurrent, isDisabled })
-                }
-                return icon
-              }}
-            >
+          : <Button {...linkProps} {...itemProps} icon={renderIcon(icon, renderProps)}>
               <Text className={styles.link()} nowrap truncate="1" disableLineHeightCompensation>
                 {typeof children === 'function' ? children(renderProps) : children}
               </Text>
@@ -205,7 +196,7 @@ export const BreadcrumbCollapsedItem = createLeafComponent(
                 rel,
                 icon,
                 // eslint-disable-next-line no-restricted-syntax
-              } = breadcrumb.props as BreadcrumbItemProps
+              } = breadcrumb.props as BreadcrumbItemProps<string>
 
               if (breadcrumbChildren == null) {
                 return null
diff --git a/app/gui/src/dashboard/components/Breadcrumbs/Breadcrumbs.stories.tsx b/app/gui/src/dashboard/components/Breadcrumbs/Breadcrumbs.stories.tsx
index 560ba1a89caf..e078013b5af0 100644
--- a/app/gui/src/dashboard/components/Breadcrumbs/Breadcrumbs.stories.tsx
+++ b/app/gui/src/dashboard/components/Breadcrumbs/Breadcrumbs.stories.tsx
@@ -2,7 +2,6 @@
  * @file Stories for the Breadcrumbs component.
  */
 
-import Cloud from '#/assets/cloud.svg'
 import ArrowDown from '#/assets/expand_arrow.svg'
 import Folder from '#/assets/folder.svg'
 import Add from '#/assets/plus.svg'
@@ -381,12 +380,12 @@ export const WithCustomIcon: Story = {
     <div className="space-y-4">
       {/* Simple SVG icons */}
       <Breadcrumbs>
-        <Breadcrumbs.Item icon={Cloud}>Home</Breadcrumbs.Item>
-        <Breadcrumbs.Item icon={Folder}>Projects</Breadcrumbs.Item>
-        <Breadcrumbs.Item icon={Folder}>Team</Breadcrumbs.Item>
-        <Breadcrumbs.Item icon={Folder}>Documents</Breadcrumbs.Item>
-        <Breadcrumbs.Item icon={Folder}>Reports</Breadcrumbs.Item>
-        <Breadcrumbs.Item icon={Folder} isCurrent>
+        <Breadcrumbs.Item icon="cloud">Home</Breadcrumbs.Item>
+        <Breadcrumbs.Item icon="folder">Projects</Breadcrumbs.Item>
+        <Breadcrumbs.Item icon="folder">Team</Breadcrumbs.Item>
+        <Breadcrumbs.Item icon="folder">Documents</Breadcrumbs.Item>
+        <Breadcrumbs.Item icon="folder">Reports</Breadcrumbs.Item>
+        <Breadcrumbs.Item icon="folder" isCurrent>
           March 2025
         </Breadcrumbs.Item>
       </Breadcrumbs>
diff --git a/app/gui/src/dashboard/components/Breadcrumbs/Breadcrumbs.tsx b/app/gui/src/dashboard/components/Breadcrumbs/Breadcrumbs.tsx
index 72e1af353020..adab77f3b586 100644
--- a/app/gui/src/dashboard/components/Breadcrumbs/Breadcrumbs.tsx
+++ b/app/gui/src/dashboard/components/Breadcrumbs/Breadcrumbs.tsx
@@ -5,11 +5,11 @@
 import ArrowRight from '#/assets/expand_arrow_right.svg'
 import { tv, type VariantProps } from '#/utilities/tailwindVariants'
 import { createLeafComponent } from '@react-aria/collections'
-import { Fragment, type ForwardedRef, type ReactElement } from 'react'
+import { Fragment, type ReactElement } from 'react'
 import * as aria from 'react-aria-components'
 import flattenChildren from 'react-keyed-flatten-children'
 import { Button, type TestIdProps } from '../AriaComponents'
-import SvgMask from '../SvgMask'
+import { Icon } from '../Icon'
 import { BreadcrumbCollapsedItem, BreadcrumbItem } from './BreadcrumbItem'
 import { getItemsWithCollapsedItem, isCollapsedItem } from './utilities'
 
@@ -140,9 +140,10 @@ interface BreadcrumbSeparatorProps {
 // eslint-disable-next-line no-restricted-syntax
 const BreadcrumbSeparator = createLeafComponent(
   'BreadcrumbSeparator',
-  function BreadcrumbSeparator(props: BreadcrumbSeparatorProps, ref: ForwardedRef<HTMLDivElement>) {
+  function BreadcrumbSeparator(props: BreadcrumbSeparatorProps) {
     const { icon = ArrowRight, className } = props
-    return <SvgMask ref={ref} src={icon} className={className} />
+
+    return <Icon className={className}>{icon}</Icon>
   },
 )
 
diff --git a/app/gui/src/dashboard/components/Icon/Icon.stories.tsx b/app/gui/src/dashboard/components/Icon/Icon.stories.tsx
index 97f26fe15024..8de8584809ae 100644
--- a/app/gui/src/dashboard/components/Icon/Icon.stories.tsx
+++ b/app/gui/src/dashboard/components/Icon/Icon.stories.tsx
@@ -1,12 +1,10 @@
-import closeIcon from '#/assets/close.svg'
-import closeTabIcon from '#/assets/close_tab.svg'
-import cloudIcon from '#/assets/cloud.svg'
-import cloudToIcon from '#/assets/cloud_to.svg'
+import { iconNames } from '@/util/iconMetadata/iconName'
 import type { Meta, StoryObj } from '@storybook/react'
+import { Text } from '../AriaComponents/Text'
 import { Icon, type IconProps } from './Icon'
 
 const meta = {
-  title: 'Components/IconComponent',
+  title: 'Components/Icon',
   component: Icon,
   parameters: {
     layout: 'centered',
@@ -63,35 +61,24 @@ const RenderPropIcon = ({ color = '#000' }: RenderProps) => (
 export const Icons: Story = {
   render: () => (
     <div className="flex flex-col gap-8">
-      <div className="flex flex-col gap-2">
-        <div className="text-sm font-medium">Available Icons</div>
-        <div className="flex items-center gap-4">
-          <Icon>{closeIcon}</Icon>
-          <Icon>{cloudIcon}</Icon>
-          <Icon>{cloudToIcon}</Icon>
-          <Icon>{closeTabIcon}</Icon>
-        </div>
-      </div>
-
       <div className="flex flex-col gap-2">
         <div className="text-sm font-medium">Custom Icons</div>
         <div className="flex items-center gap-4">
           {sizes.map((size) => (
-            <Icon key={size} size={size}>
-              {CustomSvgIcon}
-            </Icon>
+            <Icon key={size} size={size} icon={CustomSvgIcon} />
           ))}
           {colors.map((color) => (
-            <Icon key={color} color={color}>
-              {CustomSvgIcon}
-            </Icon>
+            <Icon key={color} color={color} icon={CustomSvgIcon} />
           ))}
-          <Icon renderProps={{ color: 'blue' }}>
-            {(props) => <RenderPropIcon color={props.color} />}
-          </Icon>
-          <Icon color="accent" renderProps={{ color: 'red' }}>
-            {(props) => <RenderPropIcon color={props.color} />}
-          </Icon>
+          <Icon
+            renderProps={{ color: 'blue' }}
+            icon={(props) => <RenderPropIcon color={props.color} />}
+          />
+          <Icon
+            color="accent"
+            renderProps={{ color: 'red' }}
+            icon={(props) => <RenderPropIcon color={props.color} />}
+          />
         </div>
       </div>
 
@@ -99,9 +86,7 @@ export const Icons: Story = {
         <div className="text-sm font-medium">Sizes</div>
         <div className="flex items-center gap-4">
           {sizes.map((size) => (
-            <Icon key={size} size={size}>
-              {closeIcon}
-            </Icon>
+            <Icon key={size} size={size} icon="close" />
           ))}
         </div>
       </div>
@@ -109,17 +94,28 @@ export const Icons: Story = {
       <div className="flex flex-col gap-2">
         <div className="text-sm font-medium">Colors</div>
         <div className="flex items-center gap-4">
-          <Icon color="primary">{closeIcon}</Icon>
-          <Icon color="danger">{closeIcon}</Icon>
-          <Icon color="success">{closeIcon}</Icon>
-          <Icon color="accent">{closeIcon}</Icon>
-          <Icon color="muted">{closeIcon}</Icon>
-          <Icon color="disabled">{closeIcon}</Icon>
-          <Icon color="invert">{closeIcon}</Icon>
-          <Icon color="inherit">{closeIcon}</Icon>
-          <Icon color="current">{closeIcon}</Icon>
+          {colors.map((color) => (
+            <Icon key={color} color={color} icon="close" />
+          ))}
         </div>
       </div>
     </div>
   ),
 }
+
+export const AvailableIcons: Story = {
+  render: () => (
+    <div className="flex flex-col gap-2 pb-24">
+      <Text.Heading className="mb-3">Available Icons</Text.Heading>
+
+      <div className="grid grid-cols-9 items-center gap-4">
+        {iconNames.map((icon) => (
+          <div key={icon} className="flex flex-col items-center gap-2">
+            <Icon key={icon} icon={icon} />
+            <Text variant="caption">{icon}</Text>
+          </div>
+        ))}
+      </div>
+    </div>
+  ),
+}
diff --git a/app/gui/src/dashboard/components/Icon/Icon.tsx b/app/gui/src/dashboard/components/Icon/Icon.tsx
index 1d2d5e0c1462..c99dea4abba4 100644
--- a/app/gui/src/dashboard/components/Icon/Icon.tsx
+++ b/app/gui/src/dashboard/components/Icon/Icon.tsx
@@ -3,20 +3,52 @@
  *
  * Icon component that displays an icon based on different input.
  */
+import icons from '@/assets/icons.svg'
+import { isIconName, type Icon as PossibleIcon } from '@/util/iconMetadata/iconName'
+
 import { tv, type VariantProps } from '#/utilities/tailwindVariants'
 import { memo } from 'react'
-import type { IconProp as IconType, TestIdProps } from '../AriaComponents'
+import type {
+  AvailableIconReturn,
+  IconProp as IconType,
+  IconPropSvgUse as IconTypeSvgUse,
+  LegacyAvialableIconReturn,
+  LegacyIconProp as LegacyIconPropType,
+  TestIdProps,
+} from '../AriaComponents'
 import SvgMask from '../SvgMask'
 
 /**
  * Props for {@link Icon}.
  */
-export interface IconProps<Render = never> extends VariantProps<typeof ICON_STYLES>, TestIdProps {
-  readonly children: IconType<Render>
+export type IconProps<Render = never> = BaseIconProps<Render> &
+  (LegacyIconProps<string, Render> | SvgUseIconProps<Render>)
+
+/**
+ * Base props for all icon types.
+ */
+interface BaseIconProps<Render = never> extends VariantProps<typeof ICON_STYLES>, TestIdProps {
   readonly className?: string | undefined
   readonly renderProps?: Render
 }
 
+/**
+ * @deprecated Prefer defined keys over importing from `#/assets/*.svg
+ */
+export interface LegacyIconProps<Icon extends string, Render = never>
+  extends BaseIconProps<Render> {
+  readonly children: LegacyIconPropType<Icon, Render>
+  readonly icon?: never
+}
+
+/**
+ * Generic type for imported from figma icons
+ */
+export interface SvgUseIconProps<Render = never> {
+  readonly children?: never
+  readonly icon: IconTypeSvgUse<Render>
+}
+
 export const ICON_STYLES = tv({
   base: 'flex-none aspect-square [&>svg]:stroke-current [&>svg]:w-full [&>svg]:h-full',
   variants: {
@@ -55,15 +87,7 @@ export const ICON_STYLES = tv({
  */
 // eslint-disable-next-line no-restricted-syntax
 export const Icon = memo(function Icon<Render = never>(props: IconProps<Render>) {
-  const {
-    children,
-    className,
-    variants = ICON_STYLES,
-    size,
-    testId,
-    renderProps = {},
-    color,
-  } = props
+  const { className, variants = ICON_STYLES, size, testId, renderProps = {}, color } = props
 
   const styles = variants({
     size,
@@ -71,20 +95,69 @@ export const Icon = memo(function Icon<Render = never>(props: IconProps<Render>)
     color,
   })
 
-  const actualIcon = (() => {
+  const getIconJsx = (ic: IconType<string, Render>) => {
     // eslint-disable-next-line no-restricted-syntax
-    const icon = typeof children === 'function' ? children(renderProps as Render) : children
+    const renderedIcon = typeof ic === 'function' ? ic(renderProps as Render) : ic
 
-    if (icon == null) {
+    if (renderedIcon == null || renderedIcon === false) {
       return null
     }
 
-    return typeof icon === 'string' ?
-        <SvgMask src={icon} className={styles} testId={testId} />
-      : <span className={styles} data-testid={testId}>
-          {icon}
-        </span>
-  })()
+    if (typeof renderedIcon === 'string') {
+      if (isIconName(renderedIcon)) {
+        return <SvgUse icon={renderedIcon} testId={testId} className={styles} />
+      }
+
+      return <SvgMask src={renderedIcon} className={styles} testId={testId} />
+    }
 
-  return <>{actualIcon}</>
+    return (
+      <span className={styles} data-testid={testId}>
+        {renderedIcon}
+      </span>
+    )
+  }
+
+  if ('children' in props) {
+    return <>{getIconJsx(props.children)}</>
+  }
+
+  return <>{getIconJsx(props.icon)}</>
 }) as <Render = never>(props: IconProps<Render>) => React.JSX.Element
+
+/**
+ * Props for {@link SvgUse}.
+ */
+export interface SvgUseProps extends TestIdProps {
+  readonly icon: PossibleIcon
+  readonly className?: string | undefined
+}
+
+/**
+ * A component that displays an SVG from the icons bundle file.
+ * Please refer to Figma for the list of available icons.
+ */
+export function SvgUse(props: SvgUseProps) {
+  const { icon, testId = 'svg-use', className } = props
+
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 16 16"
+      preserveAspectRatio="xMidYMid slice"
+      data-testid={testId}
+    >
+      <use href={icon.includes(':') ? icon : `${icons}#${icon}`} data-icon={icon} />
+    </svg>
+  )
+}
+
+/**
+ * Utility function to render an icon based on the icon type and render props.
+ */
+export function renderIcon<Icon extends string, Render>(
+  icon: IconType<Icon, Render>,
+  renderProps: Render,
+): AvailableIconReturn | LegacyAvialableIconReturn<Icon> {
+  return typeof icon === 'function' ? icon(renderProps) : icon
+}
diff --git a/app/gui/src/dashboard/components/Icon/index.ts b/app/gui/src/dashboard/components/Icon/index.ts
index 2a903c88059e..bdf1ec744e47 100644
--- a/app/gui/src/dashboard/components/Icon/index.ts
+++ b/app/gui/src/dashboard/components/Icon/index.ts
@@ -1,2 +1,2 @@
-export { Icon } from './Icon'
-export type { IconProps } from './Icon'
+export { ICON_STYLES, Icon, SvgUse, renderIcon } from './Icon'
+export type { IconProps, SvgUseProps } from './Icon'
diff --git a/app/gui/src/dashboard/components/Paywall/PaywallAlert.tsx b/app/gui/src/dashboard/components/Paywall/PaywallAlert.tsx
index ffaaa7339bf9..255473efa056 100644
--- a/app/gui/src/dashboard/components/Paywall/PaywallAlert.tsx
+++ b/app/gui/src/dashboard/components/Paywall/PaywallAlert.tsx
@@ -17,15 +17,18 @@ import * as paywall from '#/components/Paywall'
 import SvgMask from '#/components/SvgMask'
 
 /** Props for {@link PaywallAlert}. */
-export interface PaywallAlertProps extends Omit<ariaComponents.AlertProps, 'children'> {
+export interface PaywallAlertProps<IconType extends string>
+  extends Omit<ariaComponents.AlertProps, 'children'> {
   readonly feature: billingHooks.PaywallFeatureName
   readonly label: string
   readonly showUpgradeButton?: boolean
-  readonly upgradeButtonProps?: Omit<paywall.UpgradeButtonProps, 'feature'>
+  readonly upgradeButtonProps?: Omit<paywall.UpgradeButtonProps<IconType>, 'feature'>
 }
 
 /** A paywall alert. */
-export function PaywallAlert(props: PaywallAlertProps) {
+export function PaywallAlert<IconType extends string>(
+  props: PaywallAlertProps<IconType>,
+): React.JSX.Element {
   const {
     label,
     showUpgradeButton = true,
diff --git a/app/gui/src/dashboard/components/Paywall/PaywallDialogButton.tsx b/app/gui/src/dashboard/components/Paywall/PaywallDialogButton.tsx
index c8c993f810d3..dfe9e146fe29 100644
--- a/app/gui/src/dashboard/components/Paywall/PaywallDialogButton.tsx
+++ b/app/gui/src/dashboard/components/Paywall/PaywallDialogButton.tsx
@@ -12,13 +12,16 @@ import * as components from './components'
 import * as paywallDialog from './PaywallDialog'
 
 /** Props for a {@link PaywallDialogButton}. */
-export type PaywallDialogButtonProps = components.PaywallButtonProps & {
-  readonly dialogProps?: paywallDialog.PaywallDialogProps
-  readonly dialogTriggerProps?: ariaComponents.DialogTriggerProps
-}
+export type PaywallDialogButtonProps<IconType extends string> =
+  components.PaywallButtonProps<IconType> & {
+    readonly dialogProps?: paywallDialog.PaywallDialogProps
+    readonly dialogTriggerProps?: ariaComponents.DialogTriggerProps
+  }
 
 /** A button that opens a paywall dialog when clicked */
-export function PaywallDialogButton(props: PaywallDialogButtonProps) {
+export function PaywallDialogButton<IconType extends string>(
+  props: PaywallDialogButtonProps<IconType>,
+): React.JSX.Element {
   const { feature, dialogProps, dialogTriggerProps, ...buttonProps } = props
 
   return (
diff --git a/app/gui/src/dashboard/components/Paywall/UpgradeButton.tsx b/app/gui/src/dashboard/components/Paywall/UpgradeButton.tsx
index bb52788b0200..1c45b230cb67 100644
--- a/app/gui/src/dashboard/components/Paywall/UpgradeButton.tsx
+++ b/app/gui/src/dashboard/components/Paywall/UpgradeButton.tsx
@@ -14,13 +14,18 @@ import * as textProvider from '#/providers/TextProvider'
 import * as ariaComponents from '#/components/AriaComponents'
 
 /** Props for an {@link UpgradeButton}. */
-export type UpgradeButtonProps = Omit<ariaComponents.ButtonProps, 'variant'> & {
+export type UpgradeButtonProps<IconType extends string = string> = Omit<
+  ariaComponents.ButtonProps<IconType>,
+  'variant'
+> & {
   readonly feature: billingHooks.PaywallFeatureName
-  readonly variant?: ariaComponents.ButtonProps['variant']
+  readonly variant?: ariaComponents.ButtonProps<IconType>['variant']
 }
 
 /** A button that links to the upgrade page. */
-export function UpgradeButton(props: UpgradeButtonProps) {
+export function UpgradeButton<IconType extends string>(
+  props: UpgradeButtonProps<IconType>,
+): React.JSX.Element {
   const {
     feature,
     variant,
@@ -60,7 +65,7 @@ export function UpgradeButton(props: UpgradeButtonProps) {
 
 const VARIANT_BY_LEVEL: Record<
   billingHooks.PaywallLevelName,
-  ariaComponents.ButtonProps['variant']
+  ariaComponents.ButtonProps<string>['variant']
 > = {
   free: 'primary',
   enterprise: 'primary',
diff --git a/app/gui/src/dashboard/components/Paywall/components/PaywallButton.tsx b/app/gui/src/dashboard/components/Paywall/components/PaywallButton.tsx
index cc361767a090..21a6b1462bf6 100644
--- a/app/gui/src/dashboard/components/Paywall/components/PaywallButton.tsx
+++ b/app/gui/src/dashboard/components/Paywall/components/PaywallButton.tsx
@@ -14,14 +14,16 @@ import * as textProvider from '#/providers/TextProvider'
 import * as ariaComponents from '#/components/AriaComponents'
 
 /** Props for {@link PaywallButton}. */
-export type PaywallButtonProps = ariaComponents.ButtonProps & {
+export type PaywallButtonProps<IconType extends string> = ariaComponents.ButtonProps<IconType> & {
   readonly feature: billingHooks.PaywallFeatureName
   readonly iconOnly?: boolean
   readonly showIcon?: boolean
 }
 
 /** A styled button that shows that a feature is behind a paywall */
-export function PaywallButton(props: PaywallButtonProps) {
+export function PaywallButton<IconType extends string>(
+  props: PaywallButtonProps<IconType>,
+): React.JSX.Element {
   const { feature, iconOnly = false, showIcon = true, children, ...buttonProps } = props
 
   const { getText } = textProvider.useText()
diff --git a/app/gui/src/dashboard/components/SvgIcon.tsx b/app/gui/src/dashboard/components/SvgIcon.tsx
deleted file mode 100644
index f18b2919e8f6..000000000000
--- a/app/gui/src/dashboard/components/SvgIcon.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-/** @file Styled wrapper around SVG images. */
-import * as React from 'react'
-
-import SvgMask from '#/components/SvgMask'
-
-import * as tailwindMerge from '#/utilities/tailwindMerge'
-
-// ===============
-// === SvgIcon ===
-// ===============
-
-/** Props for a {@link SvgIcon}. */
-export interface SvgIconProps {
-  readonly src: string
-  readonly className?: string
-  readonly onClick?: React.MouseEventHandler<HTMLDivElement>
-}
-
-/** A fixed-size container for a SVG image. */
-export default function SvgIcon(props: SvgIconProps) {
-  const { src, className, onClick } = props
-  return (
-    <div
-      className={tailwindMerge.twMerge(
-        'absolute left-0 top-0 inline-flex h-full w-auth-icon-container items-center justify-center text-gray-400',
-        className,
-      )}
-      onClick={onClick}
-    >
-      <SvgMask src={src} />
-    </div>
-  )
-}
diff --git a/app/gui/src/dashboard/components/SvgMask.tsx b/app/gui/src/dashboard/components/SvgMask.tsx
index a042817bf919..26af93ca817f 100644
--- a/app/gui/src/dashboard/components/SvgMask.tsx
+++ b/app/gui/src/dashboard/components/SvgMask.tsx
@@ -16,7 +16,10 @@ export interface SvgMaskProps extends TestIdProps {
   readonly className?: string | undefined
 }
 
-/** Use an SVG as a mask. This lets the SVG use the text color (`currentColor`). */
+/**
+ * Use an SVG as a mask. This lets the SVG use the text color (`currentColor`).
+ * @deprecated Prefer `<Icon />` or `<SvgUse />` instead.
+ */
 const SvgMask = React.forwardRef(function SvgMask(
   props: SvgMaskProps,
   ref: React.ForwardedRef<HTMLDivElement>,
@@ -59,4 +62,7 @@ const SvgMask = React.forwardRef(function SvgMask(
   )
 })
 
+/**
+ * @deprecated Prefer `<Icon />` or `<SvgUse />` instead.
+ */
 export default React.memo(SvgMask)
diff --git a/app/gui/src/dashboard/components/styled/SidebarTabButton.tsx b/app/gui/src/dashboard/components/styled/SidebarTabButton.tsx
index 8ede53ad16fb..0c551ea71682 100644
--- a/app/gui/src/dashboard/components/styled/SidebarTabButton.tsx
+++ b/app/gui/src/dashboard/components/styled/SidebarTabButton.tsx
@@ -22,7 +22,7 @@ export interface SidebarTabButtonProps {
   readonly isActive?: boolean
   readonly icon: string
   readonly label: string
-  readonly onPress: ButtonProps['onPress']
+  readonly onPress: ButtonProps<string>['onPress']
 }
 
 /** A styled button representing a tab on a sidebar. */
diff --git a/eslint.config.mjs b/eslint.config.mjs
index bf2633dd5751..a6418ae15d4c 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -37,7 +37,7 @@ const NAME = 'enso'
  * `node:process` is here because `process.on` does not exist on the namespace import.
  */
 const DEFAULT_IMPORT_ONLY_MODULES =
-  '@vitejs\\u002Fplugin-react|node:process|chalk|string-length|yargs|yargs\\u002Fyargs|sharp|to-ico|connect|morgan|serve-static|tiny-invariant|react-keyed-flatten-children|clsx|create-servers|electron-is-dev|fast-glob|esbuild-plugin-.+|opener|tailwindcss.*|@modyfi\\u002Fvite-plugin-yaml|build-info|is-network-error|validator.+|.*[.]json$'
+  '@vitejs\\u002Fplugin-react|node:process|chalk|string-length|yargs|yargs\\u002Fyargs|sharp|to-ico|connect|morgan|serve-static|tiny-invariant|react-keyed-flatten-children|clsx|create-servers|electron-is-dev|fast-glob|esbuild-plugin-.+|opener|tailwindcss.*|@modyfi\\u002Fvite-plugin-yaml|build-info|is-network-error|validator.+|.*[.]json|.*[.]svg$'
 const RELATIVE_MODULES =
   'projectManager|server|configParser|authentication|config|debug|detect|fileAssociations|index|ipc|log|naming|paths|preload|projectManagement|security|urlAssociations|contentConfig|desktopEnvironment|#\\u002F.*'
 const ALLOWED_DEFAULT_IMPORT_MODULES = `${DEFAULT_IMPORT_ONLY_MODULES}|postcss|ajv\\u002Fdist\\u002F2020|${RELATIVE_MODULES}`
diff --git a/package.json b/package.json
index de4c86889bf2..f2229cfd9529 100644
--- a/package.json
+++ b/package.json
@@ -166,5 +166,5 @@
       }
     }
   },
-  "packageManager": "pnpm@10.0.0+sha512.b8fef5494bd3fe4cbd4edabd0745df2ee5be3e4b0b8b08fa643aa3e4c6702ccc0f00d68fa8a8c9858a735a0032485a44990ed2810526c875e416f001b17df12b"
+  "packageManager": "pnpm@10.1.0+sha1.ab7948c89104fdd3fc88b5b391fa4b73fd800631"
 }