chore: tighten .vscode IDE and typescript configuration (#24537)

This branch tightens import hygiene and editor guidance to reduce
accidental use of legacy or discouraged patterns.
It also updates consumers too, by propagating the new `lucide-react`
import convention across the existing UI surfaces that reference those
icons.

- Updated `.vscode/settings.json` to prefer non-relative imports and
improve TypeScript auto-import behavior.
- Re-enabled and expanded Biome restricted-import enforcement in
`biome.jsonc` for migration guardrails.
- Added/used `lucide-react` `-Icon` naming conventions for clarity and
consistency.
- Updated consumers too across components, modules, and pages so the new
import rules are applied end-to-end.

.vscode/settings.json

@@ -62,5 +62,21 @@
 	"[markdown]": {
 		"editor.defaultFormatter": "DavidAnson.vscode-markdownlint"
 	},
-	"biome.lsp.bin": "site/node_modules/.bin/biome"
+	"biome.lsp.bin": "site/node_modules/.bin/biome",
+
+	// Prefer type only imports.
+	"typescript.preferences.preferTypeOnlyAutoImports": true,
+	// Prefer aliased/non-relative imports (e.g. "#/...") over "../../...".
+	"typescript.preferences.importModuleSpecifier": "non-relative",
+	"javascript.preferences.importModuleSpecifier": "non-relative",
+	// We discourage people from various older libraries that
+	// are no longer recommended/being migrated from.
+	"typescript.preferences.autoImportSpecifierExcludeRegexes": [
+		// discourage people from using MUI components
+		"^@mui(?:/.*)?$",
+		// discourage people from using Emotion CSS
+		"^@emotion(?:/.*)?$",
+		// we prefer people use `lodash/foo` over `lodash`
+		"^lodash$"
+	]
 }

biome.jsonc

@@ -51,8 +51,8 @@
 								"message": "React 19 no longer requires forwardRef. Use ref as a prop instead.",
 								"importNames": ["forwardRef"]
 							},
-							// "@mui/material/Alert": "Use components/Alert/Alert instead.",
-							// "@mui/material/AlertTitle": "Use components/Alert/Alert instead.",
+							"@mui/material/Alert": "Use components/Alert/Alert instead.",
+							"@mui/material/AlertTitle": "Use components/Alert/Alert instead.",
 							// "@mui/material/Autocomplete": "Use shadcn/ui Combobox instead.",
 							"@mui/material/Avatar": "Use components/Avatar/Avatar instead.",
 							"@mui/material/Box": "Use a <div> with Tailwind classes instead.",
@@ -61,7 +61,7 @@
 							// "@mui/material/CardActionArea": "Use shadcn/ui Card component instead.",
 							// "@mui/material/CardContent": "Use shadcn/ui Card component instead.",
 							// "@mui/material/Checkbox": "Use shadcn/ui Checkbox component instead.",
-							// "@mui/material/Chip": "Use components/Badge or Tailwind styles instead.",
+							"@mui/material/Chip": "Use components/Badge or Tailwind styles instead.",
 							// "@mui/material/CircularProgress": "Use components/Spinner/Spinner instead.",
 							// "@mui/material/Collapse": "Use shadcn/ui Collapsible instead.",
 							// "@mui/material/CssBaseline": "Use Tailwind CSS base styles instead.",
@@ -74,48 +74,48 @@
 							// "@mui/material/Drawer": "Use shadcn/ui Sheet component instead.",
 							// "@mui/material/FormControl": "Use native form elements with Tailwind instead.",
 							// "@mui/material/FormControlLabel": "Use shadcn/ui Label with form components instead.",
-							// "@mui/material/FormGroup": "Use a <div> with Tailwind classes instead.",
+							"@mui/material/FormGroup": "Use a <div> with Tailwind classes instead.",
 							// "@mui/material/FormHelperText": "Use a <p> with Tailwind classes instead.",
-							// "@mui/material/FormLabel": "Use shadcn/ui Label component instead.",
-							// "@mui/material/Grid": "Use Tailwind grid utilities instead.",
-							// "@mui/material/IconButton": "Use components/Button/Button with variant='icon' instead.",
+							"@mui/material/FormLabel": "Use shadcn/ui Label component instead.",
+							"@mui/material/Grid": "Use Tailwind grid utilities instead.",
+							"@mui/material/IconButton": "Use components/Button/Button with variant='icon' instead.",
 							// "@mui/material/InputAdornment": "Use Tailwind positioning in input wrapper instead.",
 							// "@mui/material/InputBase": "Use shadcn/ui Input component instead.",
-							// "@mui/material/LinearProgress": "Use a progress bar with Tailwind instead.",
+							"@mui/material/LinearProgress": "Use a progress bar with Tailwind instead.",
 							// "@mui/material/Link": "Use React Router Link or native <a> tags instead.",
 							// "@mui/material/List": "Use native <ul> with Tailwind instead.",
 							// "@mui/material/ListItem": "Use native <li> with Tailwind instead.",
-							// "@mui/material/ListItemIcon": "Use lucide-react icons in list items instead.",
+							"@mui/material/ListItemIcon": "Use lucide-react icons in list items instead.",
 							// "@mui/material/ListItemText": "Use native elements with Tailwind instead.",
 							// "@mui/material/Menu": "Use shadcn/ui DropdownMenu instead.",
 							// "@mui/material/MenuItem": "Use shadcn/ui DropdownMenu components instead.",
 							// "@mui/material/MenuList": "Use shadcn/ui DropdownMenu components instead.",
-							// "@mui/material/Paper": "Use a <div> with Tailwind shadow/border classes instead.",
+							"@mui/material/Paper": "Use a <div> with Tailwind shadow/border classes instead.",
 							"@mui/material/Popover": "Use components/Popover/Popover instead.",
 							// "@mui/material/Radio": "Use shadcn/ui RadioGroup instead.",
 							// "@mui/material/RadioGroup": "Use shadcn/ui RadioGroup instead.",
 							// "@mui/material/Select": "Use shadcn/ui Select component instead.",
-							// "@mui/material/Skeleton": "Use shadcn/ui Skeleton component instead.",
+							"@mui/material/Skeleton": "Use shadcn/ui Skeleton component instead.",
 							// "@mui/material/Snackbar": "Use components/GlobalSnackbar instead.",
 							// "@mui/material/Stack": "Use Tailwind flex utilities instead (e.g., <div className='flex flex-col gap-4'>).",
 							// "@mui/material/styles": "Use Tailwind CSS instead.",
 							// "@mui/material/SvgIcon": "Use lucide-react icons instead.",
-							// "@mui/material/Switch": "Use shadcn/ui Switch component instead.",
+							"@mui/material/Switch": "Use shadcn/ui Switch component instead.",
 							"@mui/material/Table": "Import from components/Table/Table instead.",
-							// "@mui/material/TableRow": "Import from components/Table/Table instead.",
+							"@mui/material/TableRow": "Import from components/Table/Table instead.",
 							// "@mui/material/TextField": "Use shadcn/ui Input component instead.",
 							// "@mui/material/ToggleButton": "Use shadcn/ui Toggle or custom component instead.",
 							// "@mui/material/ToggleButtonGroup": "Use shadcn/ui Toggle or custom component instead.",
 							"@mui/material/Tooltip": "Use components/Tooltip/Tooltip instead.",
 							"@mui/material/Typography": "Use native HTML elements instead. Eg: <span>, <p>, <h1>, etc.",
-							// "@mui/material/useMediaQuery": "Use Tailwind responsive classes or custom hook instead.",
+							"@mui/material/useMediaQuery": "Use Tailwind responsive classes or custom hook instead.",
 							// "@mui/system": "Use Tailwind CSS instead.",
-							// "@mui/utils": "Use native alternatives or utility libraries instead.",
+							"@mui/utils": "Use native alternatives or utility libraries instead.",
 							// "@emotion/css": "Use Tailwind CSS instead.",
 							// "@emotion/react": "Use Tailwind CSS instead.",
 							"@emotion/styled": "Use Tailwind CSS instead.",
 							// "@emotion/cache": "Use Tailwind CSS instead.",
-							// "components/Stack/Stack": "Use Tailwind flex utilities instead (e.g., <div className='flex flex-col gap-4'>).",
+							// "#/components/Stack/Stack": "Use Tailwind flex utilities instead (e.g., <div className='flex flex-col gap-4'>).",
 							"lodash": "Use lodash/<name> instead."
 						}
 					}

site/src/@types/lucide-react.d.ts

@@ -0,0 +1,3 @@
+declare module "lucide-react" {
+	export * from "lucide-react/dist/lucide-react.suffixed";
+}

site/src/components/AnimatedIcons/ChevronDown.tsx

@@ -1,4 +1,4 @@
-import { ChevronDown as LucideChevronDown } from "lucide-react";
+import { ChevronDownIcon as LucideChevronDown } from "lucide-react";
 import { cn } from "#/utils/cn";
 
 interface ChevronDownIconProps

site/src/components/Autocomplete/Autocomplete.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Check } from "lucide-react";
+import { CheckIcon } from "lucide-react";
 import { useState } from "react";
 import { expect, fn, screen, userEvent, waitFor, within } from "storybook/test";
 import { Avatar } from "#/components/Avatar/Avatar";
@@ -319,7 +319,7 @@ export const WithCustomRenderOption: Story = {
 								subtitle={user.email}
 								src={user.avatar_url}
 							/>
-							{isSelected && <Check className="size-4 shrink-0" />}
+							{isSelected && <CheckIcon className="size-4 shrink-0" />}
 						</div>
 					)}
 				/>
@@ -363,7 +363,7 @@ export const WithStartAdornment: Story = {
 								subtitle={user.email}
 								src={user.avatar_url}
 							/>
-							{isSelected && <Check className="size-4 shrink-0" />}
+							{isSelected && <CheckIcon className="size-4 shrink-0" />}
 						</div>
 					)}
 				/>

site/src/components/Autocomplete/Autocomplete.tsx

@@ -1,4 +1,4 @@
-import { Check, X } from "lucide-react";
+import { CheckIcon, XIcon } from "lucide-react";
 import {
 	type KeyboardEvent,
 	type ReactNode,
@@ -184,7 +184,7 @@ export function Autocomplete<TOption>({
 								className="flex items-center justify-center size-5 rounded hover:bg-surface-secondary transition-colors cursor-pointer"
 								aria-label="Clear selection"
 							>
-								<X className="size-4 text-content-secondary hover:text-content-primary" />
+								<XIcon className="size-4 text-content-secondary hover:text-content-primary" />
 							</span>
 						)}
 						<span className="flex items-center justify-center size-5">
@@ -234,7 +234,9 @@ export function Autocomplete<TOption>({
 												) : (
 													<>
 														<span className="flex-1">{optionLabel}</span>
-														{selected && <Check className="size-4 shrink-0" />}
+														{selected && (
+															<CheckIcon className="size-4 shrink-0" />
+														)}
 													</>
 												)}
 											</CommandItem>

site/src/components/Badge/Badge.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Database, Settings, TriangleAlert } from "lucide-react";
+import { DatabaseIcon, SettingsIcon, TriangleAlertIcon } from "lucide-react";
 import { Badges } from "#/components/Badges/Badges";
 import { Badge } from "./Badge";
 
@@ -14,15 +14,15 @@ export const Default: Story = {
 	render: () => (
 		<Badges>
 			<Badge size="xs">
-				<Database />
+				<DatabaseIcon />
 				Text
 			</Badge>
 			<Badge size="sm">
-				<Database />
+				<DatabaseIcon />
 				Text
 			</Badge>
 			<Badge size="md">
-				<Database />
+				<DatabaseIcon />
 				Text
 			</Badge>
 		</Badges>
@@ -34,14 +34,14 @@ export const Warning: Story = {
 		<Badges>
 			<Badge variant="warning" size="xs">
 				Warning
-				<TriangleAlert />
+				<TriangleAlertIcon />
 			</Badge>
 			<Badge variant="warning" size="sm">
-				<TriangleAlert />
+				<TriangleAlertIcon />
 				Warning
 			</Badge>
 			<Badge variant="warning" size="md">
-				<TriangleAlert />
+				<TriangleAlertIcon />
 				Warning
 			</Badge>
 		</Badges>
@@ -53,14 +53,14 @@ export const Destructive: Story = {
 		<Badges>
 			<Badge variant="destructive" size="xs">
 				Destructive
-				<TriangleAlert />
+				<TriangleAlertIcon />
 			</Badge>
 			<Badge variant="destructive" size="sm">
-				<TriangleAlert />
+				<TriangleAlertIcon />
 				Destructive
 			</Badge>
 			<Badge variant="destructive" size="md">
-				<TriangleAlert />
+				<TriangleAlertIcon />
 				Destructive
 			</Badge>
 		</Badges>
@@ -134,7 +134,7 @@ export const Magenta: Story = {
 export const SmallWithIcon: Story = {
 	render: () => (
 		<Badge variant="default" size="sm">
-			<Settings />
+			<SettingsIcon />
 			Preset
 		</Badge>
 	),
@@ -143,7 +143,7 @@ export const SmallWithIcon: Story = {
 export const MediumWithIcon: Story = {
 	render: () => (
 		<Badge variant="warning" size="md">
-			<TriangleAlert />
+			<TriangleAlertIcon />
 			Immutable
 		</Badge>
 	),

site/src/components/Breadcrumb/Breadcrumb.tsx

@@ -2,7 +2,7 @@
  * Copied from shadc/ui on 12/13/2024
  * @see {@link https://ui.shadcn.com/docs/components/breadcrumb}
  */
-import { MoreHorizontal } from "lucide-react";
+import { MoreHorizontalIcon } from "lucide-react";
 import { Slot } from "radix-ui";
 import { cn } from "#/utils/cn";
 
@@ -110,7 +110,7 @@ export const BreadcrumbEllipsis: React.FC<
 			className={cn("flex h-9 w-9 items-center justify-center", className)}
 			{...props}
 		>
-			<MoreHorizontal className="h-4 w-4" />
+			<MoreHorizontalIcon className="h-4 w-4" />
 			<span className="sr-only">More</span>
 		</span>
 	);

site/src/components/Checkbox/Checkbox.tsx

@@ -2,7 +2,7 @@
  * Copied from shadc/ui on 04/03/2025
  * @see {@link https://ui.shadcn.com/docs/components/checkbox}
  */
-import { Check, Minus } from "lucide-react";
+import { CheckIcon, MinusIcon } from "lucide-react";
 import { Checkbox as CheckboxPrimitive } from "radix-ui";
 import { cn } from "#/utils/cn";
 
@@ -44,10 +44,10 @@ export const Checkbox: React.FC<
 				)}
 			>
 				{(props.checked === true || props.defaultChecked === true) && (
-					<Check className="size-4" strokeWidth={2.5} />
+					<CheckIcon className="size-4" strokeWidth={2.5} />
 				)}
 				{props.checked === "indeterminate" && (
-					<Minus className="size-4" strokeWidth={2.5} />
+					<MinusIcon className="size-4" strokeWidth={2.5} />
 				)}
 			</CheckboxPrimitive.Indicator>
 		</CheckboxPrimitive.Root>

site/src/components/Collapsible/Collapsible.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { ChevronsUpDown } from "lucide-react";
+import { ChevronsUpDownIcon } from "lucide-react";
 import { Button } from "#/components/Button/Button";
 import {
 	Collapsible,
@@ -20,7 +20,7 @@ const meta: Meta<typeof Collapsible> = {
 					</h4>
 					<CollapsibleTrigger asChild>
 						<Button size="sm">
-							<ChevronsUpDown />
+							<ChevronsUpDownIcon />
 							<span className="sr-only">Toggle</span>
 						</Button>
 					</CollapsibleTrigger>

site/src/components/Command/Command.tsx

@@ -1,5 +1,5 @@
 import { Command as CommandPrimitive } from "cmdk";
-import { Search } from "lucide-react";
+import { SearchIcon } from "lucide-react";
 import { cn } from "#/utils/cn";
 
 export const Command: React.FC<
@@ -21,7 +21,7 @@ export const CommandInput: React.FC<
 > = ({ className, ...props }) => {
 	return (
 		<div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-			<Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+			<SearchIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
 			<CommandPrimitive.Input
 				className={cn(
 					`flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none border-none

site/src/components/DropdownMenu/DropdownMenu.tsx

@@ -5,7 +5,7 @@
  * This component was updated to match the styles from the Figma design:
  * @see {@link https://www.figma.com/design/WfqIgsTFXN2BscBSSyXWF8/Coder-kit?node-id=656-2354&t=CiGt5le3yJEwMH4M-0}
  */
-import { Check } from "lucide-react";
+import { CheckIcon } from "lucide-react";
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
 import { cn } from "#/utils/cn";
 import {
@@ -72,7 +72,7 @@ export const DropdownMenuRadioItem: React.FC<
 			{children}
 			<span className="absolute top-3.5 right-2 flex h-3.5 w-3.5 items-center justify-center">
 				<DropdownMenuPrimitive.ItemIndicator>
-					<Check className="h-4 w-4" />
+					<CheckIcon className="h-4 w-4" />
 				</DropdownMenuPrimitive.ItemIndicator>
 			</span>
 		</DropdownMenuPrimitive.RadioItem>

site/src/components/Filter/Filter.tsx

@@ -1,4 +1,4 @@
-import { ExternalLinkIcon, SlidersHorizontal } from "lucide-react";
+import { ExternalLinkIcon, SlidersHorizontalIcon } from "lucide-react";
 import {
 	type ComponentProps,
 	type FC,
@@ -274,7 +274,7 @@ const PresetMenu: FC<PresetMenuProps> = ({
 		<DropdownMenu>
 			<DropdownMenuTrigger asChild>
 				<Button variant="outline">
-					<SlidersHorizontal />
+					<SlidersHorizontalIcon />
 					Filters
 				</Button>
 			</DropdownMenuTrigger>

site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx

@@ -3,7 +3,7 @@
  * @see {@link https://shadcnui-expansions.typeart.cc/docs/multiple-selector}
  */
 import { Command as CommandPrimitive, useCommandState } from "cmdk";
-import { Info, X } from "lucide-react";
+import { InfoIcon, XIcon } from "lucide-react";
 import {
 	type ComponentPropsWithoutRef,
 	type KeyboardEvent,
@@ -526,7 +526,7 @@ export const MultiSelectCombobox: React.FC<MultiSelectComboboxProps> = ({
 										}}
 										onClick={() => handleUnselect(option)}
 									>
-										<X className="h-4 w-4 text-content-secondary hover:text-content-primary align-text-bottom" />
+										<XIcon className="h-4 w-4 text-content-secondary hover:text-content-primary align-text-bottom" />
 									</button>
 								</Badge>
 							);
@@ -593,7 +593,7 @@ export const MultiSelectCombobox: React.FC<MultiSelectComboboxProps> = ({
 									"hidden",
 							)}
 						>
-							<X className="h-5 w-5" />
+							<XIcon className="h-5 w-5" />
 						</button>
 						<ChevronDownIcon
 							open={open}
@@ -677,7 +677,7 @@ export const MultiSelectCombobox: React.FC<MultiSelectComboboxProps> = ({
 																<Tooltip>
 																	<TooltipTrigger asChild>
 																		<span className="flex items-center pointer-events-auto">
-																			<Info className="!w-3.5 !h-3.5 text-content-secondary" />
+																			<InfoIcon className="!w-3.5 !h-3.5 text-content-secondary" />
 																		</span>
 																	</TooltipTrigger>
 																	<TooltipContent side="right" sideOffset={10}>

site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx

@@ -1,4 +1,4 @@
-import { Check } from "lucide-react";
+import { CheckIcon } from "lucide-react";
 import { type FC, useState } from "react";
 import type { Organization } from "#/api/typesGenerated";
 import { ChevronDownIcon } from "#/components/AnimatedIcons/ChevronDown";
@@ -90,7 +90,7 @@ export const OrganizationAutocomplete: FC<OrganizationAutocompleteProps> = ({
 										{org.display_name || org.name}
 									</span>
 									{value?.id === org.id && (
-										<Check className="ml-auto size-icon-sm shrink-0" />
+										<CheckIcon className="ml-auto size-icon-sm shrink-0" />
 									)}
 								</CommandItem>
 							))}

site/src/components/RadioGroup/RadioGroup.tsx

@@ -2,7 +2,7 @@
  * Copied from shadc/ui on 04/04/2025
  * @see {@link https://ui.shadcn.com/docs/components/radio-group}
  */
-import { Circle } from "lucide-react";
+import { CircleIcon } from "lucide-react";
 import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
 import { cn } from "#/utils/cn";
 
@@ -33,7 +33,7 @@ export const RadioGroupItem: React.FC<
 			{...props}
 		>
 			<RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-				<Circle className="absolute h-2.5 w-2.5 fill-surface-invert-primary" />
+				<CircleIcon className="absolute h-2.5 w-2.5 fill-surface-invert-primary" />
 			</RadioGroupPrimitive.Indicator>
 		</RadioGroupPrimitive.Item>
 	);

site/src/components/Select/Select.tsx

@@ -3,9 +3,9 @@
  * @see {@link https://ui.shadcn.com/docs/components/select}
  */
 import {
-	Check,
-	ChevronUp,
-	ChevronDown as LucideChevronDown,
+	CheckIcon,
+	ChevronUpIcon,
+	ChevronDownIcon as LucideChevronDown,
 } from "lucide-react";
 import { Select as SelectPrimitive } from "radix-ui";
 import { ChevronDownIcon } from "#/components/AnimatedIcons/ChevronDown";
@@ -54,7 +54,7 @@ const SelectScrollUpButton: React.FC<
 		)}
 		{...props}
 	>
-		<ChevronUp className="size-icon-sm" />
+		<ChevronUpIcon className="size-icon-sm" />
 	</SelectPrimitive.ScrollUpButton>
 );
 
@@ -134,7 +134,7 @@ export const SelectItem: React.FC<
 	>
 		<span className="absolute right-2 top-1/2 -translate-y-1/2 flex items-center justify-center">
 			<SelectPrimitive.ItemIndicator className="size-icon-sm">
-				<Check className="size-icon-sm" />
+				<CheckIcon className="size-icon-sm" />
 			</SelectPrimitive.ItemIndicator>
 		</span>
 		<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>

site/src/components/TagInput/TagInput.tsx

@@ -1,4 +1,4 @@
-import { X } from "lucide-react";
+import { XIcon } from "lucide-react";
 import { type FC, useId, useMemo } from "react";
 import { Badge } from "#/components/Badge/Badge";
 import { Button } from "#/components/Button/Button";
@@ -43,7 +43,7 @@ export const TagInput: FC<TagInputProps> = ({
 							}}
 							aria-label={`Remove ${value}`}
 						>
-							<X className="size-3" />
+							<XIcon className="size-3" />
 						</Button>
 					</Badge>
 				))}

site/src/modules/management/DeploymentSidebarView.tsx

@@ -1,4 +1,4 @@
-import { ArrowUpRight } from "lucide-react";
+import { ArrowUpRightIcon } from "lucide-react";
 import type { FC } from "react";
 import type { BuildInfoResponse, Experiment } from "#/api/typesGenerated";
 import {
@@ -87,7 +87,7 @@ export const DeploymentSidebarView: FC<DeploymentSidebarViewProps> = ({
 				{permissions.viewAnyGroup && (
 					<SidebarNavItem href="/deployment/groups">
 						<Stack direction="row" alignItems="center" spacing={0.5}>
-							Groups {showOrganizations && <ArrowUpRight size={16} />}
+							Groups {showOrganizations && <ArrowUpRightIcon size={16} />}
 						</Stack>
 					</SidebarNavItem>
 				)}

site/src/modules/management/OrganizationSidebarView.tsx

@@ -1,4 +1,4 @@
-import { Check, Plus } from "lucide-react";
+import { CheckIcon, PlusIcon } from "lucide-react";
 import { type FC, useState } from "react";
 import { useNavigate } from "react-router";
 import type { Organization } from "#/api/typesGenerated";
@@ -110,7 +110,7 @@ export const OrganizationSidebarView: FC<
 												{organization?.display_name || organization?.name}
 											</span>
 											{activeOrganization?.name === organization.name && (
-												<Check className="ml-auto" />
+												<CheckIcon className="ml-auto" />
 											)}
 										</CommandItem>
 									))}
@@ -129,7 +129,7 @@ export const OrganizationSidebarView: FC<
 												}, 200);
 											}}
 										>
-											<Plus /> Create Organization
+											<PlusIcon /> Create Organization
 										</CommandItem>
 									</CommandGroup>
 								</>

site/src/modules/notifications/NotificationsInbox/InboxItem.tsx

@@ -1,4 +1,4 @@
-import { SquareCheckBig } from "lucide-react";
+import { SquareCheckBigIcon } from "lucide-react";
 import type { FC } from "react";
 import Markdown from "react-markdown";
 import { Link as RouterLink } from "react-router";
@@ -69,7 +69,7 @@ export const InboxItem: FC<InboxItemProps> = ({
 							variant="outline"
 							size="sm"
 						>
-							<SquareCheckBig />
+							<SquareCheckBigIcon />
 							mark as read
 						</Button>
 					</>

site/src/modules/resources/AgentApps/AgentApps.tsx

@@ -1,4 +1,4 @@
-import { Folder } from "lucide-react";
+import { FolderIcon } from "lucide-react";
 import type { FC } from "react";
 import type {
 	Workspace,
@@ -29,7 +29,7 @@ export const AgentApps: FC<AgentAppsProps> = ({
 		<DropdownMenu>
 			<DropdownMenuTrigger asChild>
 				<AgentButton>
-					<Folder />
+					<FolderIcon />
 					{section.group}
 				</AgentButton>
 			</DropdownMenuTrigger>

site/src/modules/resources/AgentDevcontainerCard.tsx

@@ -1,4 +1,4 @@
-import { Container, ExternalLinkIcon } from "lucide-react";
+import { ContainerIcon, ExternalLinkIcon } from "lucide-react";
 import type { FC } from "react";
 import { useMutation, useQueryClient } from "react-query";
 import { toast } from "sonner";
@@ -184,7 +184,7 @@ export const AgentDevcontainerCard: FC<AgentDevcontainerCardProps> = ({
 				bg-surface-primary px-2
 				text-xs text-content-secondary"
 			>
-				<Container size={12} className="mr-1.5" />
+				<ContainerIcon size={12} className="mr-1.5" />
 				{devcontainer.subagent_id ? (
 					<Tooltip>
 						<TooltipTrigger asChild>

site/src/modules/resources/AgentDevcontainerMoreActions.tsx

@@ -1,4 +1,4 @@
-import { EllipsisVertical } from "lucide-react";
+import { EllipsisVerticalIcon } from "lucide-react";
 import { type FC, useId, useState } from "react";
 import { Button } from "#/components/Button/Button";
 import { ConfirmDialog } from "#/components/Dialogs/ConfirmDialog/ConfirmDialog";
@@ -24,7 +24,7 @@ export const AgentDevcontainerMoreActions: FC<
 		<DropdownMenu open={open} onOpenChange={setOpen}>
 			<DropdownMenuTrigger asChild>
 				<Button size="icon-lg" variant="subtle" aria-controls={menuContentId}>
-					<EllipsisVertical aria-hidden="true" />
+					<EllipsisVerticalIcon aria-hidden="true" />
 					<span className="sr-only">Dev Container actions</span>
 				</Button>
 			</DropdownMenuTrigger>

site/src/modules/resources/PortForwardButton.tsx

@@ -13,7 +13,7 @@ import {
 	LockOpenIcon,
 	RadioIcon,
 	ShareIcon,
-	X as XIcon,
+	XIcon,
 } from "lucide-react";
 import { type FC, useState } from "react";
 import { useMutation, useQuery } from "react-query";

site/src/modules/users/AISeatCell.tsx

@@ -1,4 +1,4 @@
-import { CircleCheck, X } from "lucide-react";
+import { CircleCheckIcon, XIcon } from "lucide-react";
 import type { FC } from "react";
 import { TableCell } from "#/components/Table/Table";
 
@@ -10,12 +10,12 @@ export const AISeatCell: FC<AISeatCellProps> = ({ hasAISeat }) => {
 	return (
 		<TableCell>
 			{hasAISeat ? (
-				<CircleCheck
+				<CircleCheckIcon
 					className="size-5 text-content-success"
 					aria-label="Consuming AI seat"
 				/>
 			) : (
-				<X
+				<XIcon
 					className="size-5 text-content-disabled"
 					aria-label="Not consuming AI seat"
 				/>

site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx

@@ -1,12 +1,12 @@
 import {
-	CircleAlert,
-	Eye,
-	EyeOff,
-	Hourglass,
-	Info,
+	CircleAlertIcon,
+	EyeIcon,
+	EyeOffIcon,
+	HourglassIcon,
+	InfoIcon,
 	LinkIcon,
-	Settings,
-	TriangleAlert,
+	SettingsIcon,
+	TriangleAlertIcon,
 } from "lucide-react";
 import { type FC, useId, useRef, useState } from "react";
 import * as Yup from "yup";
@@ -142,7 +142,7 @@ const ParameterLabel: FC<ParameterLabelProps> = ({
 								<TooltipTrigger asChild>
 									<span className="flex items-center">
 										<Badge size="sm" variant="warning">
-											<TriangleAlert />
+											<TriangleAlertIcon />
 											Immutable
 										</Badge>
 									</span>
@@ -160,7 +160,7 @@ const ParameterLabel: FC<ParameterLabelProps> = ({
 								<TooltipTrigger asChild>
 									<span className="flex items-center">
 										<Badge size="sm" variant="green">
-											<Hourglass />
+											<HourglassIcon />
 											Ephemeral
 										</Badge>
 									</span>
@@ -178,7 +178,7 @@ const ParameterLabel: FC<ParameterLabelProps> = ({
 								<TooltipTrigger asChild>
 									<span className="flex items-center">
 										<Badge size="sm">
-											<Settings />
+											<SettingsIcon />
 											Preset
 										</Badge>
 									</span>
@@ -529,9 +529,9 @@ const MaskableInput: FC<MaskableInputProps> = ({
 					disabled={disabled}
 				>
 					{showMaskedInput ? (
-						<EyeOff className="h-4 w-4" />
+						<EyeOffIcon className="h-4 w-4" />
 					) : (
-						<Eye className="h-4 w-4" />
+						<EyeIcon className="h-4 w-4" />
 					)}
 				</Button>
 			)}
@@ -583,9 +583,9 @@ const MaskableTextArea: FC<MaskableInputProps> = ({
 					disabled={disabled}
 				>
 					{showMaskedInput ? (
-						<EyeOff className="h-4 w-4" />
+						<EyeOffIcon className="h-4 w-4" />
 					) : (
-						<Eye className="h-4 w-4" />
+						<EyeIcon className="h-4 w-4" />
 					)}
 				</Button>
 			)}
@@ -637,7 +637,7 @@ const OptionDisplay: FC<OptionDisplayProps> = ({ option }) => {
 				<TooltipProvider delayDuration={100}>
 					<Tooltip>
 						<TooltipTrigger asChild>
-							<Info className="w-3.5 h-3.5 text-content-secondary" />
+							<InfoIcon className="w-3.5 h-3.5 text-content-secondary" />
 						</TooltipTrigger>
 						<TooltipContent side="right" sideOffset={10}>
 							{option.description}
@@ -934,13 +934,13 @@ export const Diagnostics: FC<DiagnosticsProps> = ({ diagnostics }) => {
 				>
 					<div className="flex flex-row items-start">
 						{diagnostic.severity === "error" && (
-							<CircleAlert
+							<CircleAlertIcon
 								className="me-2 inline-flex shrink-0 text-content-destructive size-icon-sm"
 								aria-hidden="true"
 							/>
 						)}
 						{diagnostic.severity === "warning" && (
-							<TriangleAlert
+							<TriangleAlertIcon
 								className="me-2 inline-flex shrink-0 text-content-warning size-icon-sm"
 								aria-hidden="true"
 							/>

site/src/modules/workspaces/WorkspaceMoreActions/WorkspaceMoreActions.tsx

@@ -1,7 +1,7 @@
 import {
 	CopyIcon,
 	DownloadIcon,
-	EllipsisVertical,
+	EllipsisVerticalIcon,
 	HistoryIcon,
 	SettingsIcon,
 	SquareIcon,
@@ -134,7 +134,7 @@ export const WorkspaceMoreActions: FC<WorkspaceMoreActionsProps> = ({
 						aria-controls="workspace-options"
 						disabled={disabled}
 					>
-						<EllipsisVertical aria-hidden="true" />
+						<EllipsisVerticalIcon aria-hidden="true" />
 						<span className="sr-only">Workspace actions</span>
 					</Button>
 				</DropdownMenuTrigger>

site/src/modules/workspaces/WorkspaceSharingForm/UserOrGroupAutocomplete.tsx

@@ -1,4 +1,4 @@
-import { Check } from "lucide-react";
+import { CheckIcon } from "lucide-react";
 import { type FC, useState } from "react";
 import { keepPreviousData, useQuery } from "react-query";
 import { groupsByOrganization } from "#/api/queries/groups";
@@ -122,7 +122,7 @@ export const UserOrGroupAutocomplete: FC<UserOrGroupAutocompleteProps> = ({
 						subtitle={isGroup(option) ? getGroupSubtitle(option) : option.email}
 						src={option.avatar_url}
 					/>
-					{isSelected && <Check className="size-4 shrink-0" />}
+					{isSelected && <CheckIcon className="size-4 shrink-0" />}
 				</div>
 			)}
 			open={open}

site/src/modules/workspaces/WorkspaceSharingForm/WorkspaceSharingForm.tsx

@@ -1,4 +1,4 @@
-import { EllipsisVertical, UserPlusIcon } from "lucide-react";
+import { EllipsisVerticalIcon, UserPlusIcon } from "lucide-react";
 import type { FC, ReactNode } from "react";
 import { useQuery } from "react-query";
 import { workspaceSharingSettings } from "#/api/queries/organizations";
@@ -279,7 +279,7 @@ export const WorkspaceSharingForm: FC<WorkspaceSharingFormProps> = ({
 												variant="subtle"
 												aria-label="Open menu"
 											>
-												<EllipsisVertical aria-hidden="true" />
+												<EllipsisVerticalIcon aria-hidden="true" />
 												<span className="sr-only">Open menu</span>
 											</Button>
 										</DropdownMenuTrigger>
@@ -327,7 +327,7 @@ export const WorkspaceSharingForm: FC<WorkspaceSharingFormProps> = ({
 												variant="subtle"
 												aria-label="Open menu"
 											>
-												<EllipsisVertical aria-hidden="true" />
+												<EllipsisVerticalIcon aria-hidden="true" />
 												<span className="sr-only">Open menu</span>
 											</Button>
 										</DropdownMenuTrigger>

site/src/pages/AgentsPage/components/AgentChatInput.tsx

@@ -1,6 +1,5 @@
 import {
 	ArrowUpIcon,
-	Check,
 	CheckIcon,
 	ChevronRightIcon,
 	ImageIcon,
@@ -9,7 +8,7 @@ import {
 	PencilIcon,
 	PlusIcon,
 	ServerIcon,
-	Square,
+	SquareIcon,
 	XIcon,
 } from "lucide-react";
 import type React from "react";
@@ -820,7 +819,7 @@ export const AgentChatInput: FC<AgentChatInputProps> = ({
 										<PencilIcon className="size-3.5 shrink-0" />
 										<span>Plan first</span>
 										{planModeEnabled && (
-											<Check className="ml-auto size-icon-sm shrink-0" />
+											<CheckIcon className="ml-auto size-icon-sm shrink-0" />
 										)}
 									</button>
 								)}
@@ -874,7 +873,7 @@ export const AgentChatInput: FC<AgentChatInputProps> = ({
 															>
 																{workspace.name}
 																{selectedWorkspaceId === workspace.id && (
-																	<Check className="ml-auto size-icon-sm shrink-0" />
+																	<CheckIcon className="ml-auto size-icon-sm shrink-0" />
 																)}
 															</CommandItem>
 														))}
@@ -1079,7 +1078,7 @@ export const AgentChatInput: FC<AgentChatInputProps> = ({
 								onClick={onInterrupt}
 								disabled={isInterruptPending}
 							>
-								<Square className="fill-current" />
+								<SquareIcon className="fill-current" />
 								<span className="sr-only">Stop</span>
 							</Button>
 						)}

site/src/pages/AgentsPage/components/ChatElements/CompactOrgSelector.tsx

@@ -1,4 +1,4 @@
-import { Check } from "lucide-react";
+import { CheckIcon } from "lucide-react";
 import { type FC, useState } from "react";
 import type { Organization } from "#/api/typesGenerated";
 import { ChevronDownIcon } from "#/components/AnimatedIcons/ChevronDown";
@@ -113,7 +113,7 @@ export const CompactOrgSelector: FC<CompactOrgSelectorProps> = ({
 										{org.display_name || org.name}
 									</span>
 									{value?.id === org.id && (
-										<Check className="ml-auto size-icon-sm shrink-0" />
+										<CheckIcon className="ml-auto size-icon-sm shrink-0" />
 									)}
 								</CommandItem>
 							))}

site/src/pages/AgentsPage/components/LimitsTab/GroupLimitsSection.tsx

@@ -1,4 +1,4 @@
-import { Check } from "lucide-react";
+import { CheckIcon } from "lucide-react";
 import { type FC, useId, useState } from "react";
 import { Link } from "react-router";
 import { getErrorMessage } from "#/api/errors";
@@ -238,7 +238,9 @@ export const GroupLimitsSection: FC<GroupLimitsSectionProps> = ({
 														src={option.avatar_url}
 														imgFallbackText={option.name}
 													/>
-													{isSelected && <Check className="size-4 shrink-0" />}
+													{isSelected && (
+														<CheckIcon className="size-4 shrink-0" />
+													)}
 												</div>
 											)}
 											placeholder="Search groups..."

site/src/pages/CreateUserPage/CreateUserForm.tsx

@@ -1,5 +1,5 @@
 import { useFormik } from "formik";
-import { Check } from "lucide-react";
+import { CheckIcon } from "lucide-react";
 import { Select as SelectPrimitive } from "radix-ui";
 import { type FC, useState } from "react";
 import { useQuery } from "react-query";
@@ -269,7 +269,7 @@ export const CreateUserForm: FC<CreateUserFormProps> = ({
 										>
 											<span className="absolute right-2 top-2 flex items-center justify-center">
 												<SelectPrimitive.ItemIndicator>
-													<Check className="size-icon-sm" />
+													<CheckIcon className="size-icon-sm" />
 												</SelectPrimitive.ItemIndicator>
 											</span>
 											<div className="flex flex-col py-0.5">

site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx

@@ -1,5 +1,5 @@
 import { type FormikContextType, useFormik } from "formik";
-import { ArrowLeft, ExternalLinkIcon } from "lucide-react";
+import { ArrowLeftIcon, ExternalLinkIcon } from "lucide-react";
 import {
 	type FC,
 	useCallback,
@@ -381,7 +381,7 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
 					type="button"
 					className="flex items-center gap-2 bg-transparent border-none text-content-secondary hover:text-content-primary translate-y-12"
 				>
-					<ArrowLeft size={20} />
+					<ArrowLeftIcon size={20} />
 					Go back
 				</button>
 			</div>

site/src/pages/CreateWorkspacePage/ExternalAuthButton.tsx

@@ -1,4 +1,4 @@
-import { Check, Redo } from "lucide-react";
+import { CheckIcon, RedoIcon } from "lucide-react";
 import type { FC } from "react";
 import type { TemplateVersionExternalAuth } from "#/api/typesGenerated";
 import { Badge } from "#/components/Badge/Badge";
@@ -47,7 +47,7 @@ export const ExternalAuthButton: FC<ExternalAuthButtonProps> = ({
 			<span className="flex flex-row items-center gap-2">
 				{auth.authenticated ? (
 					<>
-						<Check className="w-4 h-4 text-content-success" />
+						<CheckIcon className="w-4 h-4 text-content-success" />
 						<p className="text-xs font-semibold text-content-secondary m-0">
 							Authenticated
 						</p>
@@ -75,7 +75,7 @@ export const ExternalAuthButton: FC<ExternalAuthButtonProps> = ({
 					<Tooltip>
 						<TooltipTrigger asChild>
 							<Button variant="outline" size="icon" onClick={onStartPolling}>
-								<Redo />
+								<RedoIcon />
 								<span className="sr-only">Refresh external auth</span>
 							</Button>
 						</TooltipTrigger>

site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AnnouncementBannerItem.tsx

@@ -1,6 +1,6 @@
 import type { Interpolation, Theme } from "@emotion/react";
 import Checkbox from "@mui/material/Checkbox";
-import { EllipsisVertical } from "lucide-react";
+import { EllipsisVerticalIcon } from "lucide-react";
 import type { FC } from "react";
 import type { BannerConfig } from "#/api/typesGenerated";
 import { Button } from "#/components/Button/Button";
@@ -51,7 +51,7 @@ export const AnnouncementBannerItem: FC<AnnouncementBannerItemProps> = ({
 				<DropdownMenu>
 					<DropdownMenuTrigger asChild>
 						<Button size="icon-lg" variant="subtle" aria-label="Open menu">
-							<EllipsisVertical aria-hidden="true" />
+							<EllipsisVerticalIcon aria-hidden="true" />
 							<span className="sr-only">Open menu</span>
 						</Button>
 					</DropdownMenuTrigger>

site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/ExportPolicyButton.tsx

@@ -1,5 +1,5 @@
 import { saveAs } from "file-saver";
-import { Download } from "lucide-react";
+import { DownloadIcon } from "lucide-react";
 import { type FC, useState } from "react";
 import { toast } from "sonner";
 import { getErrorDetail } from "#/api/errors";
@@ -43,7 +43,7 @@ export const ExportPolicyButton: FC<ExportPolicyButtonProps> = ({
 				}
 			}}
 		>
-			<Download />
+			<DownloadIcon />
 			Export Policy
 		</Button>
 	);

site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx

@@ -1,5 +1,5 @@
 import { useFormik } from "formik";
-import { Plus, Trash, TriangleAlert } from "lucide-react";
+import { PlusIcon, TrashIcon, TriangleAlertIcon } from "lucide-react";
 import { type FC, type KeyboardEventHandler, useId, useState } from "react";
 import * as Yup from "yup";
 import type {
@@ -327,7 +327,7 @@ export const IdpOrgSyncPageView: FC<IdpSyncPageViewProps> = ({
 									}}
 								>
 									<Spinner loading={form.isSubmitting}>
-										<Plus />
+										<PlusIcon />
 									</Spinner>
 									Add IdP organization
 								</Button>
@@ -455,7 +455,7 @@ const OrganizationRow: FC<OrganizationRowProps> = ({
 					{!exists && (
 						<Tooltip>
 							<TooltipTrigger asChild>
-								<TriangleAlert className="size-icon-xs cursor-pointer text-content-warning" />
+								<TriangleAlertIcon className="size-icon-xs cursor-pointer text-content-warning" />
 							</TooltipTrigger>
 							<TooltipContent
 								align="start"
@@ -482,7 +482,7 @@ const OrganizationRow: FC<OrganizationRowProps> = ({
 					aria-label="delete"
 					onClick={() => onDelete(idpOrg)}
 				>
-					<Trash />
+					<TrashIcon />
 					<span className="sr-only">Delete IdP mapping</span>
 				</Button>
 			</TableCell>

site/src/pages/DeploymentSettingsPage/OverviewPage/OverviewPageView.tsx

@@ -4,6 +4,7 @@ import type {
 	Experiment,
 	SerpentOption,
 } from "#/api/typesGenerated";
+import { Alert, AlertTitle } from "#/components/Alert/Alert";
 import { Link } from "#/components/Link/Link";
 import {
 	SettingsHeader,
@@ -14,7 +15,6 @@ import {
 import { Stack } from "#/components/Stack/Stack";
 import { useDeploymentOptions } from "#/utils/deployOptions";
 import { docs } from "#/utils/docs";
-import { Alert, AlertTitle } from "../../../components/Alert/Alert";
 import OptionsTable from "../OptionsTable";
 import { UserEngagementChart } from "./UserEngagementChart";
 

site/src/pages/DeploymentSettingsPage/PremiumPage/PremiumPageView.tsx

@@ -1,4 +1,9 @@
-import { Activity, Coins, Expand, SquareArrowOutUpRight } from "lucide-react";
+import {
+	ActivityIcon,
+	CoinsIcon,
+	ExpandIcon,
+	SquareArrowOutUpRightIcon,
+} from "lucide-react";
 import type { FC } from "react";
 import { Button } from "#/components/Button/Button";
 import { Link } from "#/components/Link/Link";
@@ -24,7 +29,7 @@ const EnterpriseVersion: FC = () => {
 				</div>
 				<Button asChild>
 					<a href="https://coder.com/contact/sales" className="no-underline">
-						<SquareArrowOutUpRight />
+						<SquareArrowOutUpRightIcon />
 						Contact sales
 					</a>
 				</Button>
@@ -93,7 +98,7 @@ const OSSVersion: FC = () => {
 				</div>
 				<Button asChild>
 					<a href="https://coder.com/contact/sales" className="no-underline">
-						<SquareArrowOutUpRight />
+						<SquareArrowOutUpRightIcon />
 						Contact sales
 					</a>
 				</Button>
@@ -102,7 +107,7 @@ const OSSVersion: FC = () => {
 			<section className="pb-10 max-w-xl text-sm text-content-secondary">
 				<h2 className="text-xl text-content-primary m-0">
 					<span className="flex flex-row items-center">
-						<Expand className="size-icon-sm text-content-secondary" />
+						<ExpandIcon className="size-icon-sm text-content-secondary" />
 						&nbsp; Deploy coder at scale
 					</span>
 				</h2>
@@ -147,7 +152,7 @@ const OSSVersion: FC = () => {
 			<section className="pb-10 max-w-xl text-sm text-content-secondary">
 				<h2 className="text-xl text-content-primary m-0">
 					<span className="flex flex-row items-center">
-						<Coins className="size-icon-sm text-content-secondary" />
+						<CoinsIcon className="size-icon-sm text-content-secondary" />
 						&nbsp; Control infrastructure costs
 					</span>
 				</h2>
@@ -192,7 +197,7 @@ const OSSVersion: FC = () => {
 			<section className="pb-5 max-w-xl text-sm text-content-secondary">
 				<h2 className="text-xl text-content-primary m-0">
 					<span className="flex flex-row items-center">
-						<Activity className="size-icon-sm text-content-secondary" />
+						<ActivityIcon className="size-icon-sm text-content-secondary" />
 						&nbsp; Govern workspace activity
 					</span>
 				</h2>

site/src/pages/GroupsPage/GroupMembersPage.tsx

@@ -1,5 +1,5 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import { EllipsisVertical, UserPlusIcon } from "lucide-react";
+import { EllipsisVerticalIcon, UserPlusIcon } from "lucide-react";
 import { type FC, useState } from "react";
 import { useMutation, useQueryClient } from "react-query";
 import { useOutletContext } from "react-router";
@@ -259,7 +259,7 @@ const GroupMemberRow: FC<GroupMemberRowProps> = ({
 					<DropdownMenu>
 						<DropdownMenuTrigger asChild>
 							<Button size="icon-lg" variant="subtle" aria-label="Open menu">
-								<EllipsisVertical aria-hidden="true" />
+								<EllipsisVerticalIcon aria-hidden="true" />
 								<span className="sr-only">Open menu</span>
 							</Button>
 						</DropdownMenuTrigger>

site/src/pages/OrganizationSettingsPage/CreateOrganizationPageView.tsx

@@ -1,6 +1,6 @@
 import TextField from "@mui/material/TextField";
 import { useFormik } from "formik";
-import { ArrowLeft } from "lucide-react";
+import { ArrowLeftIcon } from "lucide-react";
 import type { FC } from "react";
 import { Link, useNavigate } from "react-router";
 import * as Yup from "yup";
@@ -68,7 +68,7 @@ export const CreateOrganizationPageView: FC<
 					to="/organizations"
 					className="flex flex-row items-center gap-2 no-underline text-content-secondary hover:text-content-primary"
 				>
-					<ArrowLeft size={20} />
+					<ArrowLeftIcon size={20} />
 					Go Back
 				</Link>
 			</div>

site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPageView.tsx

@@ -1,4 +1,4 @@
-import { EllipsisVertical, PlusIcon } from "lucide-react";
+import { EllipsisVerticalIcon, PlusIcon } from "lucide-react";
 import type { FC } from "react";
 import { Link as RouterLink, useNavigate } from "react-router";
 import type { AssignableRoles, Role } from "#/api/typesGenerated";
@@ -218,7 +218,7 @@ const RoleRow: FC<RoleRowProps> = ({
 								variant="subtle"
 								aria-label="Open menu"
 							>
-								<EllipsisVertical aria-hidden="true" />
+								<EllipsisVerticalIcon aria-hidden="true" />
 								<span className="sr-only">Open menu</span>
 							</ShadcnButton>
 						</DropdownMenuTrigger>

site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpGroupSyncForm.tsx

@@ -1,5 +1,5 @@
 import { useFormik } from "formik";
-import { Plus, Trash, TriangleAlert } from "lucide-react";
+import { PlusIcon, TrashIcon, TriangleAlertIcon } from "lucide-react";
 import { type FC, type KeyboardEventHandler, useId, useState } from "react";
 import * as Yup from "yup";
 import type {
@@ -332,7 +332,7 @@ export const IdpGroupSyncForm: FC<IdpGroupSyncFormProps> = ({
 							}}
 						>
 							<Spinner loading={form.isSubmitting}>
-								<Plus />
+								<PlusIcon />
 							</Spinner>
 							Add IdP group
 						</Button>
@@ -408,7 +408,7 @@ const GroupRow: FC<GroupRowProps> = ({
 					{!exists && (
 						<Tooltip>
 							<TooltipTrigger asChild>
-								<TriangleAlert className="size-icon-xs cursor-pointer text-content-warning" />
+								<TriangleAlertIcon className="size-icon-xs cursor-pointer text-content-warning" />
 							</TooltipTrigger>
 							<TooltipContent
 								align="start"
@@ -437,7 +437,7 @@ const GroupRow: FC<GroupRowProps> = ({
 					aria-label="delete"
 					onClick={() => onDelete(idpGroup)}
 				>
-					<Trash />
+					<TrashIcon />
 					<span className="sr-only">Delete IdP mapping</span>
 				</Button>
 			</TableCell>

site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpRoleSyncForm.tsx

@@ -1,5 +1,5 @@
 import { useFormik } from "formik";
-import { Plus, Trash, TriangleAlert } from "lucide-react";
+import { PlusIcon, TrashIcon, TriangleAlertIcon } from "lucide-react";
 import { type FC, type KeyboardEventHandler, useId, useState } from "react";
 import * as Yup from "yup";
 import type {
@@ -276,7 +276,7 @@ export const IdpRoleSyncForm: FC<IdpRoleSyncFormProps> = ({
 							}}
 						>
 							<Spinner loading={form.isSubmitting}>
-								<Plus />
+								<PlusIcon />
 							</Spinner>
 							Add IdP role
 						</Button>
@@ -329,7 +329,7 @@ const RoleRow: FC<RoleRowProps> = ({
 					{!exists && (
 						<Tooltip>
 							<TooltipTrigger asChild>
-								<TriangleAlert className="size-icon-xs cursor-pointer text-content-warning" />
+								<TriangleAlertIcon className="size-icon-xs cursor-pointer text-content-warning" />
 							</TooltipTrigger>
 							<TooltipContent
 								align="start"
@@ -358,7 +358,7 @@ const RoleRow: FC<RoleRowProps> = ({
 					aria-label="delete"
 					onClick={() => onDelete(idpRole)}
 				>
-					<Trash />
+					<TrashIcon />
 					<span className="sr-only">Delete IdP mapping</span>
 				</Button>
 			</TableCell>

site/src/pages/OrganizationSettingsPage/OrganizationMembersPageView.tsx

@@ -1,4 +1,8 @@
-import { EllipsisVertical, TriangleAlert, UserPlusIcon } from "lucide-react";
+import {
+	EllipsisVerticalIcon,
+	TriangleAlertIcon,
+	UserPlusIcon,
+} from "lucide-react";
 import { type FC, useState } from "react";
 import { toast } from "sonner";
 import { getErrorDetail, getErrorMessage } from "#/api/errors";
@@ -106,7 +110,7 @@ export const OrganizationMembersPageView: FC<
 				</div>
 				{!canViewMembers && (
 					<div className="flex flex-row text-content-warning gap-2 items-center text-sm font-medium">
-						<TriangleAlert className="size-icon-sm" />
+						<TriangleAlertIcon className="size-icon-sm" />
 						<p>
 							You do not have permission to view members other than yourself.
 						</p>
@@ -189,7 +193,7 @@ export const OrganizationMembersPageView: FC<
 																variant="subtle"
 																aria-label="Open menu"
 															>
-																<EllipsisVertical aria-hidden="true" />
+																<EllipsisVerticalIcon aria-hidden="true" />
 																<span className="sr-only">Open menu</span>
 															</Button>
 														</DropdownMenuTrigger>

site/src/pages/TaskPage/TaskAppIframe.tsx

@@ -1,4 +1,8 @@
-import { EllipsisVertical, ExternalLinkIcon, HouseIcon } from "lucide-react";
+import {
+	EllipsisVerticalIcon,
+	ExternalLinkIcon,
+	HouseIcon,
+} from "lucide-react";
 import { type FC, type HTMLProps, useRef } from "react";
 import { Link as RouterLink } from "react-router";
 import type { Workspace } from "#/api/typesGenerated";
@@ -69,7 +73,7 @@ export const TaskAppIFrame: FC<TaskAppIFrameProps> = ({
 					<DropdownMenu>
 						<DropdownMenuTrigger asChild>
 							<Button size="icon" variant="subtle" aria-label="More options">
-								<EllipsisVertical aria-hidden="true" />
+								<EllipsisVerticalIcon aria-hidden="true" />
 								<span className="sr-only">More options</span>
 							</Button>
 						</DropdownMenuTrigger>

site/src/pages/TasksPage/TasksTable.tsx

@@ -1,4 +1,4 @@
-import { EllipsisVertical, RotateCcwIcon, TrashIcon } from "lucide-react";
+import { EllipsisVerticalIcon, RotateCcwIcon, TrashIcon } from "lucide-react";
 import { type FC, type ReactNode, useState } from "react";
 import { useMutation, useQueryClient } from "react-query";
 import { useNavigate } from "react-router";
@@ -294,7 +294,7 @@ const TaskRow: FC<TaskRowProps> = ({ task, checked, onCheckChange }) => {
 									variant="subtle"
 									onClick={(e) => e.stopPropagation()}
 								>
-									<EllipsisVertical aria-hidden="true" />
+									<EllipsisVerticalIcon aria-hidden="true" />
 									<span className="sr-only">Show task actions</span>
 								</Button>
 							</DropdownMenuTrigger>

site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx

@@ -1,6 +1,6 @@
 import chroma from "chroma-js";
 import {
-	CircleCheck as CircleCheckIcon,
+	CircleCheckIcon,
 	CircleXIcon,
 	SquareArrowOutUpRightIcon,
 } from "lucide-react";

site/src/pages/TemplatePage/TemplatePageHeader.tsx

@@ -2,7 +2,7 @@ import {
 	CopyIcon,
 	DownloadIcon,
 	EditIcon,
-	EllipsisVertical,
+	EllipsisVerticalIcon,
 	PlusIcon,
 	SettingsIcon,
 	TrashIcon,
@@ -102,7 +102,7 @@ const TemplateMenu: FC<TemplateMenuProps> = ({
 			<DropdownMenu>
 				<DropdownMenuTrigger asChild>
 					<ShadcnButton size="icon-lg" variant="subtle" aria-label="Open menu">
-						<EllipsisVertical aria-hidden="true" />
+						<EllipsisVerticalIcon aria-hidden="true" />
 						<span className="sr-only">Open menu</span>
 					</ShadcnButton>
 				</DropdownMenuTrigger>

site/src/pages/TemplatePage/TemplatePrebuildsPage/TemplatePrebuildsPage.tsx

@@ -1,4 +1,4 @@
-import { RefreshCw } from "lucide-react";
+import { RefreshCwIcon } from "lucide-react";
 import type { FC } from "react";
 import { useMutation } from "react-query";
 import { toast } from "sonner";
@@ -68,7 +68,7 @@ export const TemplatePrebuildsPageView: FC<TemplatePrebuildsPageViewProps> = ({
 						disabled={invalidateMutation.isPending}
 						className="gap-2"
 					>
-						<RefreshCw className="size-4" />
+						<RefreshCwIcon className="size-4" />
 						Invalidate now
 					</Button>
 				</div>

site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx

@@ -1,4 +1,4 @@
-import { EllipsisVertical, UserPlusIcon } from "lucide-react";
+import { EllipsisVerticalIcon, UserPlusIcon } from "lucide-react";
 import { type FC, useState } from "react";
 import type {
 	Group,
@@ -315,7 +315,7 @@ export const TemplatePermissionsPageView: FC<
 															variant="subtle"
 															aria-label="Open menu"
 														>
-															<EllipsisVertical aria-hidden="true" />
+															<EllipsisVerticalIcon aria-hidden="true" />
 															<span className="sr-only">Open menu</span>
 														</Button>
 													</DropdownMenuTrigger>
@@ -368,7 +368,7 @@ export const TemplatePermissionsPageView: FC<
 															variant="subtle"
 															aria-label="Open menu"
 														>
-															<EllipsisVertical aria-hidden="true" />
+															<EllipsisVerticalIcon aria-hidden="true" />
 															<span className="sr-only">Open menu</span>
 														</Button>
 													</DropdownMenuTrigger>

site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/UserOrGroupAutocomplete.tsx

@@ -1,4 +1,4 @@
-import { Check } from "lucide-react";
+import { CheckIcon } from "lucide-react";
 import { type FC, useState } from "react";
 import { keepPreviousData, useQuery } from "react-query";
 import { templaceACLAvailable } from "#/api/queries/templates";
@@ -78,7 +78,7 @@ export const UserOrGroupAutocomplete: FC<UserOrGroupAutocompleteProps> = ({
 						subtitle={isGroup(option) ? getGroupSubtitle(option) : option.email}
 						src={option.avatar_url}
 					/>
-					{isSelected && <Check className="size-4 shrink-0" />}
+					{isSelected && <CheckIcon className="size-4 shrink-0" />}
 				</div>
 			)}
 			open={open}

site/src/pages/TemplatesPage/TemplatesFilter.tsx

@@ -12,12 +12,12 @@ import {
 	SelectFilter,
 	type SelectFilterOption,
 } from "#/components/Filter/SelectFilter";
-import { useDashboard } from "#/modules/dashboard/useDashboard";
 import {
 	DEFAULT_USER_FILTER_WIDTH,
 	type UserFilterMenu,
 	UserMenu,
-} from "../../components/Filter/UserFilter";
+} from "#/components/Filter/UserFilter";
+import { useDashboard } from "#/modules/dashboard/useDashboard";
 
 interface TemplatesFilterProps {
 	filter: UseFilterResult;

site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx

@@ -1,5 +1,5 @@
 import { useTheme } from "@emotion/react";
-import { EllipsisVertical, RefreshCcwIcon } from "lucide-react";
+import { EllipsisVerticalIcon, RefreshCcwIcon } from "lucide-react";
 import { type FC, useCallback, useEffect, useState } from "react";
 import { useQuery } from "react-query";
 import { externalAuthProvider } from "#/api/queries/externalAuth";
@@ -178,7 +178,7 @@ const ExternalAuthRow: FC<ExternalAuthRowProps> = ({
 				<DropdownMenu>
 					<DropdownMenuTrigger asChild>
 						<Button size="icon-lg" variant="subtle" aria-label="Open menu">
-							<EllipsisVertical aria-hidden="true" />
+							<EllipsisVerticalIcon aria-hidden="true" />
 							<span className="sr-only">Open menu</span>
 						</Button>
 					</DropdownMenuTrigger>

site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx

@@ -1,6 +1,6 @@
 import Link from "@mui/material/Link";
 import TextField from "@mui/material/TextField";
-import { CircleCheck as CircleCheckIcon, KeyIcon } from "lucide-react";
+import { CircleCheckIcon, KeyIcon } from "lucide-react";
 import { type FC, useState } from "react";
 import { useMutation } from "react-query";
 import { API } from "#/api/api";

site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx

@@ -2,7 +2,7 @@ import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 import {
 	BanIcon,
-	EllipsisVertical,
+	EllipsisVerticalIcon,
 	KeyIcon,
 	ShieldIcon,
 	TrashIcon,
@@ -207,7 +207,7 @@ export const UsersTableBody: FC<UsersTableBodyProps> = ({
 											variant="subtle"
 											aria-label="Open menu"
 										>
-											<EllipsisVertical aria-hidden="true" />
+											<EllipsisVerticalIcon aria-hidden="true" />
 											<span className="sr-only">Open menu</span>
 										</Button>
 									</DropdownMenuTrigger>

site/src/pages/WorkspacePage/WorkspaceTopbar.tsx

@@ -1,6 +1,6 @@
 import type { Interpolation, Theme } from "@emotion/react";
 import Link from "@mui/material/Link";
-import { ChevronLeftIcon, CircleDollarSign, TrashIcon } from "lucide-react";
+import { ChevronLeftIcon, CircleDollarSignIcon, TrashIcon } from "lucide-react";
 import type { FC } from "react";
 import { useQuery } from "react-query";
 import { Link as RouterLink } from "react-router";
@@ -174,7 +174,7 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
 					>
 						<TopbarData>
 							<TopbarIcon>
-								<CircleDollarSign
+								<CircleDollarSignIcon
 									className="size-icon-sm"
 									aria-label="Daily usage"
 								/>

site/src/pages/WorkspaceSettingsPage/Sidebar.tsx

@@ -2,7 +2,7 @@ import {
 	SettingsIcon as GeneralIcon,
 	CodeIcon as ParameterIcon,
 	TimerIcon as ScheduleIcon,
-	Users as SharingIcon,
+	UsersIcon as SharingIcon,
 } from "lucide-react";
 import { Avatar } from "#/components/Avatar/Avatar";
 import {

site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageExperimental.tsx

@@ -1,4 +1,4 @@
-import { CircleHelp } from "lucide-react";
+import { CircleHelpIcon } from "lucide-react";
 import type { FC } from "react";
 import { useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
 import { useMutation, useQuery } from "react-query";
@@ -254,7 +254,7 @@ const WorkspaceParametersPageExperimental: FC = () => {
 						<TooltipProvider delayDuration={100}>
 							<Tooltip>
 								<TooltipTrigger asChild>
-									<CircleHelp className="size-icon-xs text-content-secondary" />
+									<CircleHelpIcon className="size-icon-xs text-content-secondary" />
 								</TooltipTrigger>
 								<TooltipContent className="max-w-xs text-sm">
 									Dynamic Parameters enhances Coder's existing parameter system

site/src/pages/WorkspacesPage/BatchUpdateModalForm.tsx

@@ -1,4 +1,4 @@
-import { TriangleAlert } from "lucide-react";
+import { TriangleAlertIcon } from "lucide-react";
 import { Label, Slot } from "radix-ui";
 import {
 	type FC,
@@ -184,7 +184,7 @@ const RunningWorkspacesWarning: FC<RunningWorkspacesWarningProps> = ({
 			className="rounded-md border-border-warning border border-solid p-4"
 		>
 			<h4 className="m-0 font-semibold flex flex-row items-center gap-2 text-content-primary">
-				<TriangleAlert className="text-content-warning" size={16} />
+				<TriangleAlertIcon className="text-content-warning" size={16} />
 				Running workspaces detected
 			</h4>
 

site/src/pages/WorkspacesPage/WorkspacesTable.tsx

@@ -1,7 +1,7 @@
 import {
 	BanIcon,
 	CloudIcon,
-	EllipsisVertical,
+	EllipsisVerticalIcon,
 	ExternalLinkIcon,
 	FileIcon,
 	PlayIcon,
@@ -370,7 +370,7 @@ const TableLoader: FC = () => {
 					<div className="flex gap-1 justify-end">
 						<Skeleton className="h-10 w-10" />
 						<Button size="icon-lg" variant="subtle" disabled>
-							<EllipsisVertical aria-hidden="true" />
+							<EllipsisVerticalIcon aria-hidden="true" />
 						</Button>
 					</div>
 				</TableCell>