@keboola/design 1.2.0 → 1.3.0

package/src/components/ButtonGroup/ButtonGroup.stories.tsx

@@ -1,6 +1,8 @@
 import type { ComponentProps } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
+import { ArrowLeft, ArrowRight, ChevronLeft, ChevronRight, Plus } from '@keboola/design/icons';
+
 import { Button } from '../Button';
 
 import { ButtonGroup } from './ButtonGroup';
@@ -61,11 +63,17 @@ export const BlockWithIcons: Story = {
     variant: 'block',
     children: (
       <>
-        <Button variant="outline" icon="chevron-left" size="icon" aria-label="Left" />
+        <Button variant="outline" size="icon" aria-label="Left">
+          <ChevronLeft className="tw-size-5" />
+        </Button>
         <Button variant="outline">Left button</Button>
-        <Button variant="outline" icon="plus" size="icon" aria-label="Plus" />
+        <Button variant="outline" size="icon" aria-label="Plus">
+          <Plus className="tw-size-4" />
+        </Button>
         <Button>Right Button</Button>
-        <Button variant="outline" icon="chevron-right" size="icon" aria-label="Right" />
+        <Button variant="outline" size="icon" aria-label="Right">
+          <ChevronRight className="tw-size-5" />
+        </Button>
       </>
     ),
   },
@@ -77,15 +85,21 @@ export const ArgoBlock: Story = {
     variant: 'block',
     children: (
       <>
-        <Button argo icon="chevron-left" size="icon" variant="outline" aria-label="move-left" />
+        <Button argo size="icon" variant="outline" aria-label="move-left">
+          <ChevronLeft className="tw-size-5" />
+        </Button>
         <Button argo variant="primary">
           Left button
         </Button>
-        <Button argo icon="plus" size="icon" variant="outline" aria-label="add" />
+        <Button argo size="icon" variant="outline" aria-label="add">
+          <Plus className="tw-size-4" />
+        </Button>
         <Button argo variant="danger">
           Right Button
         </Button>
-        <Button argo icon="chevron-right" size="icon" variant="outline" aria-label="move-right" />
+        <Button argo size="icon" variant="outline" aria-label="move-right">
+          <ChevronRight className="tw-size-5" />
+        </Button>
       </>
     ),
   },
@@ -96,9 +110,13 @@ export const Compact: Story = {
     space: 'compact',
     children: (
       <>
-        <Button variant="outline" icon="arrow-left" size="icon" aria-label="Left" />
+        <Button variant="outline" size="icon" aria-label="Left">
+          <ArrowLeft className="tw-size-4" />
+        </Button>
         <Button variant="outline">Submit</Button>
-        <Button variant="outline" icon="arrow-right" size="icon" aria-label="Right" />
+        <Button variant="outline" size="icon" aria-label="Right">
+          <ArrowRight className="tw-size-4" />
+        </Button>
       </>
     ),
   },
@@ -109,9 +127,13 @@ export const ArgoCompact: Story = {
     space: 'compact',
     children: (
       <>
-        <Button argo size="icon" icon="arrow-left" aria-label="move-right" />
+        <Button argo size="icon" aria-label="move-right">
+          <ArrowLeft className="tw-size-4" />
+        </Button>
         <Button argo>Submit</Button>
-        <Button argo size="icon" icon="arrow-right" aria-label="move-right" />
+        <Button argo size="icon" aria-label="move-right">
+          <ArrowRight className="tw-size-4" />
+        </Button>
       </>
     ),
   },

package/src/components/Card/Card.tsx

@@ -6,8 +6,25 @@ import { CardHeader } from './CardHeader';
 import { CardTitle } from './CardTitle';
 import { cardClassnames } from './styles';
 
+/**
+ * Props for `Card`. `padding` controls internal spacing; `bordered` adds a subtle border.
+ * All standard `<div>` attributes pass through.
+ */
 type Props = HTMLAttributes<HTMLDivElement> & VariantProps<typeof cardClassnames>;
 
+/**
+ * Semantic content surface — a panel with its own padding, optional border, and header / content slots.
+ *
+ * **When to use:** wrapping a conceptually-distinct chunk of content (a config section, a stats panel,
+ * a list of heterogeneous items). Each `Card` is a self-contained surface inside `PageLayout.Content`.
+ * **When NOT to use:** for tabular data use `Table`; for ad-hoc layout grids use Tailwind utility classes
+ * directly; for empty / error placeholders use `EmptyState` / `ErrorState`.
+ * **Composition:** nest `Card.Header` + `Card.Title` for the header row, then `Card.Content` for the body.
+ * Multiple cards usually share a `tw-grid` or `tw-flex tw-flex-col tw-gap-4` parent.
+ *
+ * @see RECIPES.md#card-with-empty-state — for an empty card placeholder pattern
+ * @see RECIPES.md#data-card-with-skeleton — for a loading card with `Skeleton` placeholders
+ */
 export const Card = ({
   children,
   className,

package/src/components/Checkbox/Checkbox.tsx

@@ -4,10 +4,10 @@ import type { CheckedState } from '@radix-ui/react-checkbox';
 import { Indicator, Root } from '@radix-ui/react-checkbox';
 import type { VariantProps } from 'class-variance-authority';
 
+import { Check, Minus } from '../../icons';
 import { cn } from '../../utils';
 import { FieldBox } from '../FieldBox';
 import type { fieldBoxVariants } from '../FieldBox/styles';
-import { Icon } from '../Icon';
 import type { Props as TooltipProps } from '../Tooltip';
 import { Tooltip } from '../Tooltip';
 
@@ -58,11 +58,8 @@ export function Checkbox({
   const checkboxElement = (
     <Root id={id} {...rest} className={cn(rootVariants({ variant: styleVariant, className }))}>
       <Indicator className={cn(indicatorVariants({ variant: styleVariant }))}>
-        <Icon icon="check" className="tw-hidden tw-size-3 group-data-[state=checked]:tw-block" />
-        <Icon
-          icon="minus"
-          className="tw-hidden tw-size-3 group-data-[state=indeterminate]:tw-block"
-        />
+        <Check className="tw-hidden tw-size-3 tw-stroke-[4px] group-data-[state=checked]:tw-block" />
+        <Minus className="tw-hidden tw-size-3 tw-stroke-[4px] group-data-[state=indeterminate]:tw-block" />
       </Indicator>
     </Root>
   );

package/src/components/CodeEditor/highlighting.ts

@@ -15,7 +15,7 @@ export type HighlightedLines = {
 
 // Gutter markers for highlighting
 class HighlightMarker extends GutterMarker {
-  toDOM() {
+  override toDOM() {
     const marker = document.createElement('div');
     marker.className = 'cm-highlight-marker';
     return marker;

package/src/components/CollapsiblePanel.tsx

@@ -2,8 +2,8 @@ import { useState } from 'react';
 import type { KeyboardEvent, MouseEvent, ReactNode } from 'react';
 import { cva } from 'class-variance-authority';
 
-import { Icon } from '../components/Icon';
 import { keyCodes } from '../constants/keyCodes';
+import { ChevronDown } from '../icons';
 import { cn } from '../utils';
 
 import { Collapse } from './Collapse';
@@ -115,10 +115,7 @@ export const CollapsiblePanel = ({
           </div>
           {!isDisabled && (
             <div className="tw-ml-auto tw-shrink-0">
-              <Icon
-                icon="chevron-down"
-                className={cn('tw-text-xs group-data-[state=open]:tw-rotate-180')}
-              />
+              <ChevronDown className={cn('tw-size-5 group-data-[state=open]:tw-rotate-180')} />
             </div>
           )}
         </div>

package/src/components/Combobox/Combobox.tsx

@@ -1,7 +1,7 @@
 import { type ComponentProps, type ReactNode, useEffect, useRef, useState } from 'react';
 import { Combobox as BaseCombobox } from '@base-ui/react/combobox';
 
-import type { Icon } from '../Icon';
+import { ChevronDown, Plus, X } from '../../icons';
 import { InputGroup } from '../InputGroup';
 
 import { ComboboxChips } from './ComboboxChips';
@@ -35,7 +35,6 @@ type ComboboxInputProps = ComponentProps<typeof ComboboxInput>;
 type ComboboxInputGroupProps = ComponentProps<typeof ComboboxInputGroup>;
 type ComboboxItemProps = ComponentProps<typeof ComboboxItem>;
 
-type IconName = ComponentProps<typeof Icon>['icon'];
 type Indicator = NonNullable<ComboboxItemProps['indicator']>;
 
 type PublicComboboxInputProps = Pick<ComboboxInputProps, 'placeholder' | 'id'> &
@@ -74,7 +73,7 @@ type Props<Value, GroupShape extends Group<Value> = Group<Value>> = PublicCombob
 
     // item specific
     itemToLabel?: (item: Value) => ReactNode;
-    itemToIcon?: (item: Value) => IconName | undefined;
+    itemToIcon?: (item: Value) => ReactNode;
     itemToDisabled?: (item: Value) => boolean;
 
     // group specific
@@ -273,17 +272,16 @@ export const Combobox = <Value, GroupShape extends Group<Value> = Group<Value>>(
         <ComboboxInput id={id} placeholder={placeholder} disabled={disabled} />
         <InputGroup.Addon align="inline-end">
           {allowClear && (
-            <InputGroup.Button asChild icon="xmark" aria-label="Clear" disabled={disabled}>
-              <BaseCombobox.Clear />
+            <InputGroup.Button asChild aria-label="Clear" disabled={disabled}>
+              <BaseCombobox.Clear>
+                <X className="tw-size-4" />
+              </BaseCombobox.Clear>
             </InputGroup.Button>
           )}
-          <InputGroup.Button
-            disabled={disabled}
-            asChild
-            icon="chevron-down"
-            aria-label="Open combobox"
-          >
-            <BaseCombobox.Trigger />
+          <InputGroup.Button disabled={disabled} asChild aria-label="Open combobox">
+            <BaseCombobox.Trigger>
+              <ChevronDown className="tw-size-4" />
+            </BaseCombobox.Trigger>
           </InputGroup.Button>
         </InputGroup.Addon>
       </ComboboxInputGroup>
@@ -293,7 +291,7 @@ export const Combobox = <Value, GroupShape extends Group<Value> = Group<Value>>(
           {(itemOrGroup: Value | GroupShape) => {
             if (isCreatableItem(itemOrGroup))
               return (
-                <Combobox.Item value={itemOrGroup} icon="plus">
+                <Combobox.Item value={itemOrGroup} icon={<Plus />}>
                   {queryToCreateLabel(itemOrGroup.value)}
                 </Combobox.Item>
               );
@@ -303,7 +301,7 @@ export const Combobox = <Value, GroupShape extends Group<Value> = Group<Value>>(
 
               if (isCreatableItem(maybeCreatable)) {
                 return (
-                  <Combobox.Item value={maybeCreatable} icon="plus">
+                  <Combobox.Item value={maybeCreatable} icon={<Plus />}>
                     {queryToCreateLabel(maybeCreatable.value)}
                   </Combobox.Item>
                 );

package/src/components/Combobox/ComboboxChips.tsx

@@ -1,6 +1,7 @@
 import type { ComponentProps, ReactNode } from 'react';
 import { Combobox as BaseCombobox } from '@base-ui/react/combobox';
 
+import { X } from '../../icons';
 import { Badge } from '../Badge';
 
 import { defaultItemToLabel } from './utils';
@@ -45,7 +46,11 @@ export const ComboboxChips = <Value,>({
               <Badge.Label>{itemToChipLabel(value)}</Badge.Label>
               <Badge.Addon variant="inline" align="inline-end">
                 <BaseCombobox.ChipRemove
-                  render={<Badge.Button icon="xmark" aria-label="Remove value" />}
+                  render={
+                    <Badge.Button aria-label="Remove value">
+                      <X className="tw-size-3" />
+                    </Badge.Button>
+                  }
                 />
               </Badge.Addon>
             </BaseCombobox.Chip>

package/src/components/Combobox/ComboboxItem.tsx

@@ -1,14 +1,13 @@
-import type { ComponentProps, ElementRef, Ref } from 'react';
+import type { ComponentProps, ElementRef, ReactNode, Ref } from 'react';
 import { Combobox as BaseCombobox } from '@base-ui/react/combobox';
 
 import { cn } from '../../utils';
-import { Icon } from '../Icon';
 
 import { ComboboxItemIndicator } from './ComboboxItemIndicator';
 
 type Props = Omit<ComponentProps<typeof BaseCombobox.Item>, 'className'> & {
   className?: string;
-  icon?: ComponentProps<typeof Icon>['icon'];
+  icon?: ReactNode;
   indicator?: ComponentProps<typeof ComboboxItemIndicator>['variant'];
 };
 
@@ -65,7 +64,7 @@ export const ComboboxItem = ({
     )}
   >
     {<ComboboxItemIndicator variant={variant} />}
-    {icon && <Icon icon={icon} />}
+    {icon}
     <span className="tw-truncate">{children}</span>
   </BaseCombobox.Item>
 );

package/src/components/Combobox/ComboboxItemIndicator.tsx

@@ -1,8 +1,8 @@
 import type { ComponentProps, ElementRef, Ref } from 'react';
 import { Combobox as BaseCombobox } from '@base-ui/react/combobox';
 
+import { Check } from '../../icons';
 import { cn } from '../../utils';
-import { Icon } from '../Icon';
 
 type Variant = 'check' | 'checkbox';
 
@@ -42,11 +42,11 @@ export const ComboboxItemIndicator = ({
         )}
         {...props}
       >
-        <Icon
-          icon="check"
+        <Check
           className={cn(
             'tw-hidden',
             'tw-size-3',
+            'tw-stroke-[4px]',
             '!tw-text-white',
             'group-data-[selected]/combobox-item-indicator:tw-block',
           )}
@@ -65,12 +65,14 @@ export const ComboboxItemIndicator = ({
         'tw-right-2',
 
         'group-data-[variant=default]/combobox-content:tw-right-4',
+        // Lucide SVGs default to 24×24 — constrain the rendered child so the
+        // 16px indicator slot owns the actual size.
         '[&_svg]:tw-size-4',
         'group-data-[highlighted]/combobox-item:tw-text-accent-foreground',
         'group-data-[variant=default]/combobox-content:group-data-[highlighted]/combobox-item:tw-text-foreground',
         className,
       )}
-      render={<Icon icon="check" />}
+      render={<Check />}
     />
   );
 };

package/src/components/Combobox/types.ts

@@ -1,8 +1,4 @@
-import type { ComponentProps } from 'react';
-
-import type { Icon } from '../../components/Icon';
-
-export type IconName = ComponentProps<typeof Icon>['icon'];
+import type { ReactNode } from 'react';
 
 // Mirrors Base UI's internal `Group<Item>` interface from
 // `@base-ui/react/internals/resolveValueLabel`. Any object with an `items`
@@ -17,7 +13,7 @@ export type Group<Item = unknown> = {
 export type LabeledItem = {
   value: string;
   label: string;
-  icon?: IconName;
+  icon?: ReactNode;
   disabled?: boolean;
 };
 

package/src/components/Command/Command.stories.tsx

@@ -1,9 +1,24 @@
 import { useState } from 'react';
-import type { ComponentProps } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
+import {
+  ArrowLeft,
+  Copy,
+  Eye,
+  Gauge,
+  Gift,
+  Layers,
+  Link as LinkIcon,
+  Plus,
+  Search,
+  Settings,
+  Star,
+  Wrench,
+  Zap,
+} from '@keboola/design/icons';
+
 import { Button } from '../Button';
-import { Icon } from '../Icon';
 import { Modal } from '../Modal';
 import { Popover } from '../Popover';
 
@@ -12,48 +27,20 @@ import { Command } from './Command';
 type Item = {
   value: string;
   label: string;
-  icon?: ComponentProps<typeof Icon>['icon'];
+  icon?: ReactNode;
 };
 
 const planets: Item[] = [
-  {
-    icon: 'gift',
-    value: 'earth',
-    label: 'Earth',
-  },
-  {
-    icon: 'eye',
-    value: 'saturn',
-    label: 'Saturn',
-  },
-  {
-    icon: 'wrench',
-    value: 'jupiter',
-    label: 'Jupiter',
-  },
-  {
-    value: 'mars',
-    label: 'Mars',
-    icon: 'bolt',
-  },
+  { icon: <Gift />, value: 'earth', label: 'Earth' },
+  { icon: <Eye />, value: 'saturn', label: 'Saturn' },
+  { icon: <Wrench />, value: 'jupiter', label: 'Jupiter' },
+  { value: 'mars', label: 'Mars', icon: <Zap /> },
 ];
 
 const colors: Item[] = [
-  {
-    icon: 'cog',
-    value: 'red',
-    label: 'Red',
-  },
-  {
-    icon: 'chain',
-    value: 'green',
-    label: 'Green',
-  },
-  {
-    icon: 'arrow-left',
-    value: 'blue',
-    label: 'Blue',
-  },
+  { icon: <Settings />, value: 'red', label: 'Red' },
+  { icon: <LinkIcon />, value: 'green', label: 'Green' },
+  { icon: <ArrowLeft />, value: 'blue', label: 'Blue' },
 ];
 
 /**
@@ -225,7 +212,7 @@ export const AsSearchableMenu: Story = {
           <Command {...args}>
             <Command.Input
               focusVariant="off"
-              prefix={<Icon icon="search" className="tw-text-neutral-400" />}
+              prefix={<Search className="tw-text-neutral-400" />}
               variant="secondary"
               placeholder="Search"
             />
@@ -264,7 +251,7 @@ export const AsGlobalSearch: Story = {
           <Command {...args}>
             <Command.Input
               focusVariant="off"
-              prefix={<Icon icon="search" className="tw-text-neutral-400" />}
+              prefix={<Search className="tw-text-neutral-400" />}
               variant="secondary"
               placeholder="Search"
             />
@@ -275,16 +262,22 @@ export const AsGlobalSearch: Story = {
 
             <Command.List>
               <Command.Group heading="Link">
-                <Command.Item icon="gauge">Go to Dashboard</Command.Item>
-                <Command.Item icon="layer-group">Go to Workspaces</Command.Item>
-                <Command.Item icon="copy">Go to Transformation</Command.Item>
-                <Command.Item icon="eye">Go to App</Command.Item>
+                <Command.Item icon={<Gauge className="tw-size-4" />}>Go to Dashboard</Command.Item>
+                <Command.Item icon={<Layers className="tw-size-4" />}>
+                  Go to Workspaces
+                </Command.Item>
+                <Command.Item icon={<Copy className="tw-size-4" />}>
+                  Go to Transformation
+                </Command.Item>
+                <Command.Item icon={<Eye className="tw-size-4" />}>Go to App</Command.Item>
               </Command.Group>
 
               <Command.Group heading="Actions">
-                <Command.Item icon="plus">Create Workspace</Command.Item>
-                <Command.Item icon="plus">Create App</Command.Item>
-                <Command.Item icon="plus">Create Transformation</Command.Item>
+                <Command.Item icon={<Plus className="tw-size-4" />}>Create Workspace</Command.Item>
+                <Command.Item icon={<Plus className="tw-size-4" />}>Create App</Command.Item>
+                <Command.Item icon={<Plus className="tw-size-4" />}>
+                  Create Transformation
+                </Command.Item>
               </Command.Group>
             </Command.List>
           </Command>
@@ -309,7 +302,7 @@ export const ArgoAppearance: Story = {
         <div className="tw-mb-1 tw-px-4 tw-pb-0 tw-pt-4">
           <Command.Input
             variant="secondary"
-            prefix={<Icon icon="search" className="tw-size-4 tw-text-neutral-400" />}
+            prefix={<Search className="tw-size-4 tw-text-neutral-400" />}
             placeholder="Search..."
             allowClear
             focusVariant="off"
@@ -334,13 +327,9 @@ export const ArgoAppearance: Story = {
                   disabled={isDisabled}
                   actions={
                     isDisabled ? undefined : (
-                      <Button
-                        argo
-                        variant="outline"
-                        icon="star"
-                        aria-label="Favorite"
-                        size="icon-sm"
-                      />
+                      <Button argo variant="outline" aria-label="Favorite" size="icon-sm">
+                        <Star className="tw-size-4" />
+                      </Button>
                     )
                   }
                 >
@@ -362,7 +351,9 @@ export const ArgoAppearance: Story = {
                 onSelect={handleOnSelect}
                 checked={item.value === value}
                 actions={
-                  <Button argo variant="outline" icon="star" aria-label="Favorite" size="icon-sm" />
+                  <Button argo variant="outline" aria-label="Favorite" size="icon-sm">
+                    <Star className="tw-size-4" />
+                  </Button>
                 }
               >
                 {item.label}

package/src/components/Command/CommandItem/CheckIndicator.tsx

@@ -1,5 +1,5 @@
+import { Check, Circle } from '../../../icons';
 import { cn } from '../../../utils';
-import { Icon } from '../../Icon';
 
 type Props = {
   variant?: 'checkbox' | 'radio' | 'argo' | 'default';
@@ -10,8 +10,7 @@ export const CheckIndicator = ({ variant = 'default' }: Props) => {
 
   if (variant === 'argo') {
     return (
-      <Icon
-        icon="check"
+      <Check
         className={cn(
           // visibility
           'tw-hidden',
@@ -58,17 +57,30 @@ export const CheckIndicator = ({ variant = 'default' }: Props) => {
         'tw-shrink-0',
       )}
     >
-      <Icon
-        className={cn(
-          'tw-hidden',
-          'group-data-[checked=true]/command-item:tw-block',
-
-          'group-data-[variant=checkbox]/check-indicator:tw-text-white',
-          'group-data-[variant=radio]/check-indicator:tw-text-secondary-500',
-          'group-data-[variant=radio]/check-indicator:tw-size-3',
-        )}
-        icon={variant === 'checkbox' ? 'check' : 'circle'}
-      />
+      {variant === 'checkbox' ? (
+        <Check
+          className={cn(
+            'tw-hidden',
+            // Lucide SVGs default to 24×24; constrain to the 16px indicator slot.
+            'tw-size-3',
+            'tw-stroke-[4px]',
+            'group-data-[checked=true]/command-item:tw-block',
+            'group-data-[variant=checkbox]/check-indicator:tw-text-white',
+          )}
+        />
+      ) : (
+        <Circle
+          className={cn(
+            'tw-hidden',
+            // Lucide Circle is stroke-only — force fill to match the stroke so
+            // the indicator reads as a solid dot.
+            'tw-size-3',
+            'tw-fill-current',
+            'group-data-[checked=true]/command-item:tw-block',
+            'group-data-[variant=radio]/check-indicator:tw-text-secondary-500',
+          )}
+        />
+      )}
     </span>
   );
 };

package/src/components/Command/CommandItem/CommandItem.tsx

@@ -2,12 +2,11 @@ import type { ComponentProps, ReactNode } from 'react';
 import { Command as CommandPrimitive } from 'cmdk';
 
 import { cn } from '../../../utils';
-import { Icon } from '../../Icon';
 
 import { CheckIndicator } from './CheckIndicator';
 
 type Props = ComponentProps<typeof CommandPrimitive.Item> & {
-  icon?: ComponentProps<typeof Icon>['icon'];
+  icon?: ReactNode;
   checked?: boolean;
   variant?: ComponentProps<typeof CheckIndicator>['variant'];
   actions?: ReactNode;
@@ -69,7 +68,11 @@ export const CommandItem = ({
       )}
     >
       <CheckIndicator variant={variant} />
-      {icon && <Icon icon={icon} className="tw-size-4 tw-shrink-0 tw-text-neutral-400" />}
+      {icon && (
+        <span className="tw-inline-flex tw-size-4 tw-shrink-0 tw-items-center tw-justify-center tw-text-neutral-400 [&_svg]:tw-size-4">
+          {icon}
+        </span>
+      )}
       {children}
     </CommandPrimitive.Item>
 

package/src/components/DropdownMenu/DropdownMenu.stories.tsx

@@ -1,6 +1,8 @@
 import { type ComponentProps, useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
+import { Settings } from '@keboola/design/icons';
+
 import { Button } from '../Button';
 
 import { DropdownMenu } from './DropdownMenu';
@@ -51,13 +53,15 @@ export const MenuItems: Story = {
 
       <DropdownMenu.Content>
         <DropdownMenu.Item>Default</DropdownMenu.Item>
-        <DropdownMenu.Item icon="cog">Default - Icon</DropdownMenu.Item>
+        <DropdownMenu.Item icon={<Settings className="tw-size-4" />}>
+          Default - Icon
+        </DropdownMenu.Item>
         <DropdownMenu.Item disabled>Default - Disabled</DropdownMenu.Item>
-        <DropdownMenu.Item icon="cog" disabled>
+        <DropdownMenu.Item disabled icon={<Settings className="tw-size-4" />}>
           Default - Icon- Disabled
         </DropdownMenu.Item>
         <DropdownMenu.Item isLoading>Default - Loading</DropdownMenu.Item>
-        <DropdownMenu.Item icon="cog" isLoading>
+        <DropdownMenu.Item isLoading icon={<Settings className="tw-size-4" />}>
           Default - Icon - Loading
         </DropdownMenu.Item>
         <DropdownMenu.Item>Default - Selected</DropdownMenu.Item>
@@ -68,7 +72,7 @@ export const MenuItems: Story = {
           <a href="#">Anchor</a>
         </DropdownMenu.Item>
 
-        <DropdownMenu.Item asChild icon="cog">
+        <DropdownMenu.Item asChild icon={<Settings className="tw-size-4" />}>
           {/* oxlint-disable-next-line jsx-a11y/anchor-is-valid */}
           <a href="#">Anchor - Icon</a>
         </DropdownMenu.Item>

package/src/components/DropdownMenu/DropdownMenuCheckboxItem.tsx

@@ -1,6 +1,7 @@
 import type { ComponentProps } from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 
+import { Loader2 } from '../../icons';
 import { cn } from '../../utils';
 
 import { DropdownMenuItemIndicator } from './DropdownMenuItemIndicator';
@@ -27,7 +28,9 @@ export const DropdownMenuCheckboxItem = ({
 }: Props) => {
   const isAtStart = indicatorAlign === 'start';
   const indicatorEle = isLoading ? (
-    <ItemIcon spin icon="spinner" className={isAtStart ? '' : 'tw-ml-auto'} />
+    <ItemIcon className={isAtStart ? '' : 'tw-ml-auto'}>
+      <Loader2 className="tw-animate-spin" />
+    </ItemIcon>
   ) : (
     <DropdownMenuItemIndicator variant={indicator} className={isAtStart ? '' : 'tw-ml-auto'} />
   );