@keboola/design 1.2.0 → 1.3.0

package/src/components/Modal/ModalIcon.tsx

@@ -1,13 +1,26 @@
 import { useState } from 'react';
-import type { ComponentProps } from 'react';
+import type { ReactNode } from 'react';
 
 import { cn } from '../../utils';
+import { isFAIconValue } from '../../utils/legacyIcon';
 import { Icon } from '../Icon';
 
 type NamedColor = 'orange' | 'blue' | 'red' | 'green' | 'gray' | 'violet';
 
-type IconProps = Omit<ComponentProps<typeof Icon>, 'className'> & {
+type IconProps = {
   color: NamedColor | (string & {});
+  /**
+   * Pass a Lucide icon node. Legacy FontAwesome `"name"` / `[prefix, name]`
+   * string values are still accepted during the C2 deprecation window and
+   * rendered via the legacy `<Icon>` wrapper.
+   */
+  icon: ReactNode;
+  /**
+   * @deprecated FA-icon `spin` pass-through kept only for the legacy
+   * `<Modal.Icon icon="spinner" spin />` callsite during the kbc-ui sweep.
+   * New code should render an animated Lucide loader as the `icon` node.
+   */
+  spin?: boolean;
   iconUrl?: never;
   iconAlt?: never;
 };
@@ -17,13 +30,24 @@ type ImageProps = {
   iconUrl: string;
   iconAlt?: string;
   icon?: never;
+  spin?: never;
 };
 
+/**
+ * Discriminated props for `Modal.Icon` — either an `icon` slot (a Lucide icon)
+ * with a categorical `color`, or a remote `iconUrl` (renders an `<img>`).
+ * The two shapes are mutually exclusive.
+ */
 type Props = IconProps | ImageProps;
 
 const NAMED_COLORS = new Set<string>(['orange', 'blue', 'red', 'green', 'gray', 'violet']);
 
-export const ModalIcon = ({ color, ...props }: Props) => {
+/**
+ * Status-coloured icon docked to the top-left of `Modal.Content`. Use the categorical `color`
+ * (`red` destructive, `orange` warning, `green` success, `blue` info, `gray` neutral, `violet` agent)
+ * to encode meaning. The colour palette is categorical and stays fixed across brand themes.
+ */
+export const ModalIcon = (props: Props) => {
   const [hasImageError, setHasImageError] = useState(false);
 
   if ('iconUrl' in props && hasImageError) {
@@ -44,16 +68,19 @@ export const ModalIcon = ({ color, ...props }: Props) => {
       ) : (
         <div
           className={cn('tw-relative', 'tw-rounded-full', 'tw-size-12', {
-            'tw-bg-warning-500': color === 'orange',
-            'tw-bg-secondary-500': color === 'blue',
-            'tw-bg-primary-500': color === 'green',
-            'tw-bg-error-500': color === 'red',
-            'tw-bg-neutral-150': color === 'gray',
-            'tw-bg-purple-100': color === 'violet',
+            'tw-bg-warning-500': props.color === 'orange',
+            'tw-bg-secondary-500': props.color === 'blue',
+            'tw-bg-primary-500': props.color === 'green',
+            'tw-bg-error-500': props.color === 'red',
+            'tw-bg-neutral-150': props.color === 'gray',
+            'tw-bg-purple-100': props.color === 'violet',
           })}
-          style={color && !NAMED_COLORS.has(color) ? { backgroundColor: color } : undefined}
+          style={
+            props.color && !NAMED_COLORS.has(props.color)
+              ? { backgroundColor: props.color }
+              : undefined
+          }
         >
-          {/* Icon spinning uses CSS transforms, which conflict with center positioning, so a wrapper should be used */}
           <span
             className={cn(
               'tw-absolute',
@@ -65,16 +92,15 @@ export const ModalIcon = ({ color, ...props }: Props) => {
               'tw-left-1/2',
               '-tw-translate-x-1/2',
               '-tw-translate-y-1/2',
+              {
+                'tw-text-white': props.color !== 'violet',
+                'tw-text-purple-500': props.color === 'violet',
+              },
+              '[&_svg]:tw-size-6',
+              '[&_svg]:tw-aspect-square',
             )}
           >
-            <Icon
-              className={cn(
-                { 'tw-text-white': color !== 'violet', 'tw-text-purple-500': color === 'violet' },
-                'tw-size-6',
-                'tw-aspect-square',
-              )}
-              {...props}
-            />
+            {isFAIconValue(props.icon) ? <Icon icon={props.icon} spin={props.spin} /> : props.icon}
           </span>
         </div>
       )}

package/src/components/Navbar/Navbar.stories.tsx

@@ -1,6 +1,7 @@
 import type { ComponentProps } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
+import { Bell, Diamond, Keboola, Search } from '../../icons';
 import { Icon } from '../Icon';
 
 import { Navbar } from './Navbar';
@@ -44,20 +45,20 @@ export const Default: Story = {
     <Navbar {...props}>
       <Navbar.Header>
         <Navbar.MenuItemAdornment variant="icon" asChild>
-          <Icon icon={['fak', 'keboola']} className="!tw-size-8 !tw-p-0" />
+          <Keboola className="!tw-size-8 tw-shrink-0 !tw-p-0" />
         </Navbar.MenuItemAdornment>
       </Navbar.Header>
 
       <Navbar.Content>
         <Navbar.Menu marker="forward-slash">
           <Navbar.MenuItem>
-            <Navbar.MenuButton variant="emphasized" icon={['far', 'diamonds-4']}>
+            <Navbar.MenuButton variant="emphasized" icon={<Diamond className="tw-size-4" />}>
               Project
               <Icon icon={['far', 'angles-up-down']} />
             </Navbar.MenuButton>
           </Navbar.MenuItem>
           <Navbar.MenuItem>
-            <Navbar.MenuButton icon={['far', 'diamond']}>
+            <Navbar.MenuButton icon={<Diamond className="tw-size-4" />}>
               Branch
               <Icon icon={['far', 'angles-up-down']} />
             </Navbar.MenuButton>
@@ -67,14 +68,18 @@ export const Default: Story = {
       <Navbar.Footer>
         <Navbar.Menu>
           <Navbar.MenuItem>
-            <Navbar.MenuButton variant="search" icon="search">
+            <Navbar.MenuButton variant="search" icon={<Search className="tw-size-4" />}>
               Search
               <Navbar.MenuItemAdornment variant="shortcut">/</Navbar.MenuItemAdornment>
             </Navbar.MenuButton>
           </Navbar.MenuItem>
 
           <Navbar.MenuItem>
-            <Navbar.MenuButton variant="icon" icon="bell" aria-label="Notifications" />
+            <Navbar.MenuButton
+              variant="icon"
+              aria-label="Notifications"
+              icon={<Bell className="tw-size-4" />}
+            />
           </Navbar.MenuItem>
 
           <Navbar.MenuItem>
@@ -94,7 +99,7 @@ export const ContentScrolling: Story = {
       <Navbar.Header>
         <Navbar.Menu>
           <Navbar.MenuItem>
-            <Icon icon={['fak', 'keboola']} className="tw-mx-2 !tw-size-8 tw-text-secondary-500" />
+            <Keboola className="tw-mx-2 !tw-size-8 tw-shrink-0 tw-text-secondary-500" />
           </Navbar.MenuItem>
         </Navbar.Menu>
       </Navbar.Header>
@@ -102,7 +107,7 @@ export const ContentScrolling: Story = {
         <Navbar.Menu marker="forward-slash">
           {items.map((item) => (
             <Navbar.MenuItem key={item}>
-              <Navbar.MenuButton icon={['far', 'diamond']}>
+              <Navbar.MenuButton icon={<Diamond className="tw-size-4" />}>
                 {item}
                 <Icon icon={['far', 'angles-up-down']} />
               </Navbar.MenuButton>
@@ -130,34 +135,42 @@ export const MenuItems: Story = {
       <Navbar.Content>
         <Navbar.Menu>
           <Navbar.MenuItem>
-            <Navbar.MenuButton icon={['far', 'diamond']}>Default</Navbar.MenuButton>
+            <Navbar.MenuButton icon={<Diamond className="tw-size-4" />}>Default</Navbar.MenuButton>
           </Navbar.MenuItem>
           <Navbar.MenuItem>
-            <Navbar.MenuButton icon={['far', 'diamond']} asChild>
+            <Navbar.MenuButton asChild icon={<Diamond className="tw-size-4" />}>
               <a href="https://www.keboola.com">Default - Anchor</a>
             </Navbar.MenuButton>
           </Navbar.MenuItem>
 
           <Navbar.MenuItem>
-            <Navbar.MenuButton disabled icon={['far', 'diamond']}>
+            <Navbar.MenuButton disabled icon={<Diamond className="tw-size-4" />}>
               Default - Disabled
             </Navbar.MenuButton>
           </Navbar.MenuItem>
 
           <Navbar.MenuItem>
-            <Navbar.MenuButton variant="emphasized" icon={['far', 'diamond']}>
+            <Navbar.MenuButton variant="emphasized" icon={<Diamond className="tw-size-4" />}>
               Emphasized
             </Navbar.MenuButton>
           </Navbar.MenuItem>
 
           <Navbar.MenuItem>
-            <Navbar.MenuButton variant="emphasized" icon={['far', 'diamond']} asChild>
+            <Navbar.MenuButton
+              variant="emphasized"
+              asChild
+              icon={<Diamond className="tw-size-4" />}
+            >
               <a href="https://www.keboola.com">Emphasized - Anchor</a>
             </Navbar.MenuButton>
           </Navbar.MenuItem>
 
           <Navbar.MenuItem>
-            <Navbar.MenuButton disabled variant="emphasized" icon={['far', 'diamond']}>
+            <Navbar.MenuButton
+              disabled
+              variant="emphasized"
+              icon={<Diamond className="tw-size-4" />}
+            >
               Emphasized - Disabled
             </Navbar.MenuButton>
           </Navbar.MenuItem>

package/src/components/Navbar/NavbarMenuButton.tsx

@@ -1,9 +1,12 @@
-import type { ComponentProps, ElementRef, Ref } from 'react';
+import type { ComponentProps, ElementRef, ReactNode, Ref } from 'react';
 import { Root, Slottable } from '@radix-ui/react-slot';
 import type { VariantProps } from 'class-variance-authority';
 import { cva } from 'class-variance-authority';
 
-import { cn, Icon } from '@keboola/design';
+import { cn } from '@keboola/design';
+import { Search } from '@keboola/design/icons';
+
+import { renderLegacyIcon } from '../../utils/legacyIcon';
 
 import { NavbarMenuItemAdornment } from './NavbarMenuItemAdornment';
 
@@ -87,9 +90,9 @@ const variants = cva(
   },
 );
 
-type Icon = ComponentProps<typeof Icon>['icon'];
 type Props = ComponentProps<'button'> & {
-  icon?: Icon;
+  /** Optional leading-icon slot. Pass a Lucide icon node to render an adornment before children. */
+  icon?: ReactNode;
   asChild?: boolean;
 } & VariantProps<typeof variants>;
 
@@ -98,7 +101,7 @@ export const NavbarMenuButton = ({
   className,
   type = 'button',
   children,
-  icon: iconProp,
+  icon,
   asChild = false,
   variant = 'default',
   ...rest
@@ -106,7 +109,7 @@ export const NavbarMenuButton = ({
   const Comp = asChild ? Root : 'button';
   const isSearchVariant = variant === 'search';
   const isEmphasizedVariant = variant === 'emphasized';
-  const icon: Icon | undefined = isSearchVariant ? 'search' : iconProp;
+  const adornment = isSearchVariant ? <Search /> : renderLegacyIcon(icon);
 
   const adornmentVariant: ComponentProps<typeof NavbarMenuItemAdornment>['variant'] = (() => {
     if (isSearchVariant || variant === 'icon') return 'icon-button';
@@ -122,10 +125,8 @@ export const NavbarMenuButton = ({
       data-variant={variant}
       className={cn(variants({ className, variant }))}
     >
-      {icon && (
-        <NavbarMenuItemAdornment asChild variant={adornmentVariant}>
-          <Icon icon={icon} />
-        </NavbarMenuItemAdornment>
+      {adornment && (
+        <NavbarMenuItemAdornment variant={adornmentVariant}>{adornment}</NavbarMenuItemAdornment>
       )}
 
       <Slottable>{children}</Slottable>

package/src/components/Pagination/PaginationEllipsis.tsx

@@ -1,7 +1,7 @@
 import type { ComponentProps } from 'react';
 
+import { Ellipsis } from '../../icons';
 import { cn } from '../../utils';
-import { Icon } from '../Icon';
 
 type Props = ComponentProps<'span'>;
 
@@ -21,6 +21,6 @@ export const PaginationEllipsis = ({ className, ...props }: Props) => (
     )}
     {...props}
   >
-    <Icon icon={['far', 'ellipsis']} />
+    <Ellipsis />
   </span>
 );

package/src/components/Pagination/PaginationNext.tsx

@@ -1,5 +1,6 @@
 import type { ComponentProps } from 'react';
 
+import { ChevronRight } from '../../icons';
 import { cn } from '../../utils';
 
 import { PaginationButton } from './PaginationButton';
@@ -10,10 +11,10 @@ export const PaginationNext = ({ children, className, ...props }: Props) => (
   <PaginationButton
     {...props}
     aria-label="Go to next page"
-    icon="chevron-right"
     size="medium"
     className={cn('tw-flex-row-reverse', className)}
   >
+    <ChevronRight className="tw-size-5" />
     {children ?? 'Next'}
   </PaginationButton>
 );

package/src/components/Pagination/PaginationPrevious.tsx

@@ -1,11 +1,14 @@
 import type { ComponentProps } from 'react';
 
+import { ChevronLeft } from '../../icons';
+
 import { PaginationButton } from './PaginationButton';
 
 type Props = ComponentProps<typeof PaginationButton>;
 
 export const PaginationPrevious = ({ children, ...props }: Props) => (
-  <PaginationButton {...props} size="medium" aria-label="Go to previous page" icon="chevron-left">
+  <PaginationButton {...props} size="medium" aria-label="Go to previous page">
+    <ChevronLeft className="tw-size-5" />
     {children ?? 'Previous'}
   </PaginationButton>
 );

package/src/components/PanelWithDetails.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import type { KeyboardEvent, PropsWithChildren } from 'react';
 
-import { Icon } from '../components/Icon';
 import { keyCodes } from '../constants/keyCodes';
+import { ChevronDown } from '../icons';
 import { cn } from '../utils';
 
 import { Collapse } from './Collapse';
@@ -47,10 +47,9 @@ export const PanelWithDetails = ({
           onKeyUp={handleKeyUp}
         >
           <div className="tw-mr-2 tw-flex tw-shrink-0 tw-items-center">
-            <Icon
-              icon="chevron-down"
+            <ChevronDown
               className={cn(
-                'tw-text-xs',
+                'tw-size-5',
                 !isOpen ? '-tw-rotate-90' : placement === 'bottom' ? 'tw-rotate-180' : '',
               )}
             />

package/src/components/Popconfirm/Popconfirm.stories.tsx

@@ -2,6 +2,8 @@ import { type ComponentProps, useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { action } from 'storybook/actions';
 
+import { Check, Rocket, Trash2, X } from '@keboola/design/icons';
+
 import { Button } from '../Button/Button';
 import { DropdownMenu } from '../DropdownMenu';
 import { Label } from '../Label';
@@ -252,11 +254,15 @@ export const CustomButtons: Story = {
 
         <Popconfirm.Footer className="tw-flex tw-justify-end">
           <Popconfirm.Cancel asChild>
-            <Button variant="outline" size="icon" icon="cancel" />
+            <Button variant="outline" size="icon">
+              <X className="tw-size-4" />
+            </Button>
           </Popconfirm.Cancel>
 
           <Popconfirm.Confirm asChild>
-            <Button size="icon" icon="rocket" />
+            <Button size="icon">
+              <Rocket className="tw-size-4" />
+            </Button>
           </Popconfirm.Confirm>
         </Popconfirm.Footer>
       </Popconfirm.Content>
@@ -297,7 +303,9 @@ export const InModal: Story = {
         <Modal.Body className="tw-flex tw-justify-center">
           <Popconfirm {...props}>
             <Popconfirm.Trigger asChild>
-              <Button icon="trash" variant="danger" size="icon" />
+              <Button variant="danger" size="icon">
+                <Trash2 className="tw-size-4" />
+              </Button>
             </Popconfirm.Trigger>
             <Popconfirm.Content>
               <Popconfirm.Body>Are you sure you want to delete this branch?</Popconfirm.Body>
@@ -331,7 +339,7 @@ export const InDropdownMenu: Story = {
         <DropdownMenu.Group>
           <Popconfirm {...props} variant="danger">
             <Popconfirm.Trigger asChild>
-              <DropdownMenu.Item icon="trash" asModalTrigger>
+              <DropdownMenu.Item asModalTrigger icon={<Trash2 className="tw-size-4" />}>
                 Delete Task
               </DropdownMenu.Item>
             </Popconfirm.Trigger>
@@ -346,7 +354,7 @@ export const InDropdownMenu: Story = {
 
           <Popconfirm {...props}>
             <Popconfirm.Trigger asChild>
-              <DropdownMenu.Item asModalTrigger icon="check">
+              <DropdownMenu.Item asModalTrigger icon={<Check className="tw-size-4" />}>
                 Confirm
               </DropdownMenu.Item>
             </Popconfirm.Trigger>

package/src/components/RadioGroup/Radio.tsx

@@ -1,6 +1,7 @@
 import type { ComponentProps } from 'react';
 import { Indicator, Item } from '@radix-ui/react-radio-group';
 
+import { Circle } from '../../icons';
 import { cn } from '../../utils';
 
 type Props = ComponentProps<typeof Item>;
@@ -51,17 +52,10 @@ export const Radio = ({ className, ...props }: Props) => (
       className,
     )}
   >
-    <Indicator
-      className={cn(
-        'tw-flex',
-        'tw-items-center',
-        'tw-justify-center',
-        'after:tw-content-[""]',
-        'after:tw-block',
-        'after:tw-size-2.5',
-        'after:tw-rounded-full',
-        'after:tw-bg-primary',
-      )}
-    />
+    <Indicator className={cn('tw-flex', 'tw-items-center', 'tw-justify-center')}>
+      {/* Lucide Circle is stroke-only — force fill to match the stroke (currentColor)
+          so the indicator reads as a solid dot. */}
+      <Circle className="tw-size-2.5 tw-fill-current tw-text-primary" />
+    </Indicator>
   </Item>
 );

package/src/components/Search/ClearButton.tsx

@@ -1,7 +1,7 @@
 import type { MouseEventHandler } from 'react';
 
+import { X } from '../../icons';
 import { cn } from '../../utils';
-import { Icon } from '../Icon';
 
 type Props = {
   onClick: MouseEventHandler<HTMLButtonElement>;
@@ -36,7 +36,7 @@ export const ClearButton = ({ onClick, testId }: Props) => {
       )}
       data-testid={testId}
     >
-      <Icon className="tw-size-4" icon="xmark" />
+      <X className="tw-size-4" />
     </button>
   );
 };

package/src/components/Search/Search.tsx

@@ -12,8 +12,8 @@ import type {
   Ref,
 } from 'react';
 
+import { Search as SearchIcon, Sparkles } from '../../icons';
 import { cn, debounce, noop } from '../../utils';
-import { Icon } from '../Icon';
 
 import { ClearButton } from './ClearButton';
 import { searchInputClassnames, searchWrapperVariants } from './styles';
@@ -112,9 +112,9 @@ export const Search = ({
       data-testid={testId.wrapper}
     >
       {variant === 'ai' ? (
-        <Icon icon={['far', 'sparkles']} className="[&_path]:tw-fill-aigradient-600" />
+        <Sparkles className="tw-size-4 [&_*]:tw-stroke-aigradient-600" />
       ) : (
-        <Icon className="tw-text-base tw-text-neutral-400" icon="magnifying-glass" />
+        <SearchIcon className="tw-size-4 tw-text-neutral-400" />
       )}
 
       <input

package/src/components/Select/Select.tsx

@@ -1,8 +1,6 @@
 import { useId } from 'react';
 import type { ComponentProps, ReactNode } from 'react';
 
-import type { Icon } from '../Icon';
-
 import { SelectContent } from './SelectContent';
 import { SelectGroup } from './SelectGroup';
 import { SelectItem as SelectItemComponent } from './SelectItem';
@@ -11,12 +9,10 @@ import { SelectRoot } from './SelectRoot';
 import { SelectSeparator } from './SelectSeparator';
 import { SelectTrigger } from './SelectTrigger';
 
-type IconName = ComponentProps<typeof Icon>['icon'];
-
 export type SelectItem = {
   value: string;
   label: ReactNode;
-  icon?: IconName;
+  icon?: ReactNode;
   disabled?: boolean;
 };
 
@@ -31,6 +27,10 @@ const isGroup = (itemOrGroup: SelectItem | SelectItemGroup): itemOrGroup is Sele
 type RootProps = ComponentProps<typeof SelectRoot>;
 type TriggerProps = ComponentProps<typeof SelectTrigger>;
 
+/**
+ * Props for `Select`. Combines Radix `Select.Root` control props with `Select.Trigger` chrome and the
+ * convenience `items` shape (flat list, or grouped lists with optional labels).
+ */
 type Props = Pick<
   RootProps,
   | 'value'
@@ -47,6 +47,17 @@ type Props = Pick<
     items?: readonly (SelectItem | SelectItemGroup)[];
   };
 
+/**
+ * Single selection from a short enumerated list. Built on Radix Select.
+ *
+ * **When to use:** picking one value from ~10 or fewer options where search adds no value (status,
+ * region, role). Pass a flat `items` array or grouped arrays with optional labels for headings.
+ * **When NOT to use:** for longer lists with search use `Combobox`; for multi-select use `MultiCombobox`;
+ * for free-form tag entry use `Tagger`.
+ * **Composition:** wrap in `FormGroup` for label + help text, or use `useAppForm` + `field.SelectField`
+ * for forms with validation. Use the compound parts (`Select.Root`, `Select.Trigger`, `Select.Content`,
+ * `Select.Item`) for custom item layouts; the top-level `Select` covers the common cases.
+ */
 export const Select = ({
   // root
   value,

package/src/components/Select/SelectContent.tsx

@@ -1,8 +1,8 @@
 import type { ComponentProps, ElementRef, Ref } from 'react';
 import * as SelectPrimitive from '@radix-ui/react-select';
 
+import { ChevronDown, ChevronUp } from '../../icons';
 import { cn } from '../../utils';
-import { Icon } from '../Icon';
 
 const scrollButtonStyles = cn(
   'tw-flex',
@@ -10,16 +10,25 @@ const scrollButtonStyles = cn(
   'tw-justify-center',
   'tw-rounded-sm',
   'tw-p-1',
-  '[&_svg]:tw-size-3',
+  '[&_svg]:tw-size-5',
 );
 
 type Variant = 'default' | 'argo';
 
+/**
+ * Props for `Select.Content`. `container` portals the listbox into a custom element (useful inside modals);
+ * `variant` switches between default and Argo styling.
+ */
 type Props = ComponentProps<typeof SelectPrimitive.Content> & {
   container?: HTMLElement | null;
   variant?: Variant;
 };
 
+/**
+ * Listbox container for `Select`. Portals items into a popover sized to the trigger.
+ * Normally rendered implicitly by `Select`; use directly only when composing custom item layouts via
+ * the `Select.Root` / `Select.Trigger` / `Select.Content` compound parts.
+ */
 export const SelectContent = ({
   ref,
   className,
@@ -81,7 +90,7 @@ export const SelectContent = ({
       )}
     >
       <SelectPrimitive.ScrollUpButton className={scrollButtonStyles}>
-        <Icon icon="chevron-up" />
+        <ChevronUp />
       </SelectPrimitive.ScrollUpButton>
 
       <SelectPrimitive.Viewport
@@ -94,7 +103,7 @@ export const SelectContent = ({
       </SelectPrimitive.Viewport>
 
       <SelectPrimitive.ScrollDownButton className={scrollButtonStyles}>
-        <Icon icon="chevron-down" />
+        <ChevronDown />
       </SelectPrimitive.ScrollDownButton>
     </SelectPrimitive.Content>
   </SelectPrimitive.Portal>

package/src/components/Select/SelectItem.tsx

@@ -1,11 +1,12 @@
-import type { ComponentProps, ElementRef, Ref } from 'react';
+import type { ComponentProps, ElementRef, ReactNode, Ref } from 'react';
 import * as SelectPrimitive from '@radix-ui/react-select';
 
+import { Check } from '../../icons';
 import { cn } from '../../utils';
-import { Icon } from '../Icon';
+import { renderLegacyIcon } from '../../utils/legacyIcon';
 
 type Props = ComponentProps<typeof SelectPrimitive.Item> & {
-  icon?: ComponentProps<typeof Icon>['icon'];
+  icon?: ReactNode;
 };
 
 export const SelectItem = ({
@@ -60,12 +61,12 @@ export const SelectItem = ({
       className,
     )}
   >
-    {icon && <Icon icon={icon} />}
+    {renderLegacyIcon(icon)}
     <span className="tw-flex-1 tw-truncate">
       <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
     </span>
     <SelectPrimitive.ItemIndicator className="tw-pointer-events-none">
-      <Icon icon="check" className="tw-size-4" />
+      <Check className="tw-size-4" />
     </SelectPrimitive.ItemIndicator>
   </SelectPrimitive.Item>
 );

package/src/components/Select/SelectTrigger.tsx

@@ -2,8 +2,8 @@ import type { ComponentProps, ElementRef, Ref } from 'react';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { cva, type VariantProps } from 'class-variance-authority';
 
+import { ChevronDown } from '../../icons';
 import { cn } from '../../utils';
-import { Icon } from '../Icon';
 
 const variants = cva(
   [
@@ -155,7 +155,7 @@ export const SelectTrigger = ({
   >
     <SelectPrimitive.Value placeholder={placeholder} />
     <SelectPrimitive.Icon asChild>
-      <Icon icon="chevron-down" className="tw-size-3.5 tw-text-muted-foreground" />
+      <ChevronDown className="tw-size-5 tw-text-muted-foreground" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 );