fix(ui): simplify ChevronIcon props

packages/ui/src/elements/DatePicker/DatePicker.tsx

@@ -90,11 +90,11 @@ const DatePicker: React.FC<Props> = (props) => {
     minDate,
     minTime,
     monthsShown: Math.min(2, monthsToShow),
-    nextMonthButtonLabel: <ChevronIcon direction="right" large size={24} />,
+    nextMonthButtonLabel: <ChevronIcon direction="right" />,
     onChange,
     placeholderText,
     popperPlacement: 'bottom-start',
-    previousMonthButtonLabel: <ChevronIcon direction="left" large size={24} />,
+    previousMonthButtonLabel: <ChevronIcon direction="left" />,
     selected: value && new Date(value),
     shouldCloseOnSelect: false,
     showMonthYearPicker: pickerAppearance === 'monthOnly',

packages/ui/src/elements/Hierarchy/Tree/TreeNode/index.tsx

@@ -174,7 +174,7 @@ export const TreeNode = ({
             tabIndex={-1}
             type="button"
           >
-            <ChevronIcon direction={expanded ? 'down' : 'right'} large />
+            <ChevronIcon direction={expanded ? 'down' : 'right'} />
           </button>
         ) : (
           <div className={`${baseClass}__toggle-spacer`} />

packages/ui/src/elements/NavGroup/index.tsx

@@ -61,7 +61,7 @@ export const NavGroup: React.FC<Props> = ({ children, isOpen: isOpenFromProps, l
           type="button"
         >
           <div className={`${baseClass}__indicator`}>
-            <ChevronIcon bold={false} direction={collapsed ? 'right' : 'down'} size={16} />
+            <ChevronIcon direction={collapsed ? 'right' : 'down'} size={16} />
           </div>
           <div className={`${baseClass}__label`}>{label}</div>
         </button>

packages/ui/src/elements/PerPage/index.tsx

@@ -61,7 +61,7 @@ export const PerPage: React.FC<PerPageProps> = ({
               >
                 {limitNumber === limitToUse && (
                   <div className={`${baseClass}__chevron`}>
-                    <ChevronIcon direction="right" size="small" />
+                    <ChevronIcon direction="right" size={16} />
                   </div>
                 )}
                 &nbsp;

packages/ui/src/elements/ReactSelect/DropdownIndicator/index.tsx

@@ -30,7 +30,7 @@ export const DropdownIndicator: React.FC<
       }}
       type="button"
     >
-      <ChevronIcon bold={false} className={`${baseClass}__icon`} />
+      <ChevronIcon className={`${baseClass}__icon`} />
     </button>
   )
 }

packages/ui/src/icons/Chevron/index.tsx

@@ -4,15 +4,9 @@ import './index.css'
 
 type Direction = 'down' | 'left' | 'right' | 'up'
 
-const paths = {
-  // icon-16-chevron-down
+const paths: Record<16 | 24, string> = {
   16: 'M9.76777 6.76764C9.96304 6.57248 10.2796 6.57241 10.4748 6.76764C10.67 6.96288 10.6699 7.27943 10.4748 7.47467L8.35371 9.59577C8.15847 9.79101 7.84194 9.79096 7.64668 9.59577L5.52461 7.47467C5.32969 7.27948 5.32969 6.96284 5.52461 6.76764C5.71988 6.57248 6.03738 6.57241 6.23261 6.76764L8.00019 8.53522L9.76777 6.76764Z',
-  // icon-24-chevron-down - smaller chevron, more padding (default for 24px)
-  '24-small':
-    'M9.646 11.146a.5.5 0 0 1 .708 0L12 12.793l1.646-1.647a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 0-.708',
-  // icon-24-chevron-down-large - larger chevron, less padding
-  '24-large':
-    'M8.35352 10.1465C8.15825 9.9512 7.84175 9.9512 7.64648 10.1465C7.45122 10.3417 7.45122 10.6583 7.64648 10.8535L11.6465 14.8535C11.8417 15.0488 12.1583 15.0488 12.3535 14.8535L16.3535 10.8535C16.5488 10.6583 16.5488 10.3417 16.3535 10.1465C16.1583 9.9512 15.8417 9.9512 15.6465 10.1465L12 13.793L8.35352 10.1465Z',
+  24: 'M8.35352 10.1465C8.15825 9.9512 7.84175 9.9512 7.64648 10.1465C7.45122 10.3417 7.45122 10.6583 7.64648 10.8535L11.6465 14.8535C11.8417 15.0488 12.1583 15.0488 12.3535 14.8535L16.3535 10.8535C16.5488 10.6583 16.5488 10.3417 16.3535 10.1465C16.1583 9.9512 15.8417 9.9512 15.6465 10.1465L12 13.793L8.35352 10.1465Z',
 }
 
 const rotations: Record<Direction, number> = {
@@ -22,54 +16,29 @@ const rotations: Record<Direction, number> = {
   up: 180,
 }
 
-export const ChevronIcon: React.FC<{
+export type ChevronIconProps = {
   readonly ariaLabel?: string
-  /** @deprecated Use `large` instead */
-  readonly bold?: boolean
   readonly className?: string
   readonly direction?: Direction
-  /**
-   * Use the larger chevron variant (icon-24-chevron-down-large).
-   * Only applies when size is 24. The 16px icon only has one size.
-   */
-  readonly large?: boolean
-  /**
-   * Icon dimensions. String values 'large'/'small' are deprecated -
-   * use numeric 24/16 instead.
-   */
-  readonly size?: 'large' | 'small' | 16 | 24
-}> = ({ ariaLabel, bold = false, className, direction = 'down', large = true, size = 24 }) => {
-  // Map legacy string values: 'small' → 16px, 'large' → 24px
-  const numericSize = size === 'small' ? 16 : size === 'large' ? 24 : size
-
-  // Determine which path to use
-  // - 16px only has one variant
-  // - 24px has small (default) and large variants
-  const useLargeVariant = large || bold // bold is deprecated alias for large
-  const pathKey = numericSize === 16 ? 16 : useLargeVariant ? '24-large' : '24-small'
-
-  return (
-    <svg
-      aria-label={ariaLabel}
-      className={[
-        'icon',
-        'icon--chevron',
-        className,
-        numericSize === 16 && 'icon--chevron-16',
-        useLargeVariant && 'icon--chevron-large',
-      ]
-        .filter(Boolean)
-        .join(' ')}
-      fill="none"
-      height={numericSize}
-      style={{
-        transform: rotations[direction] ? `rotate(${rotations[direction]}deg)` : undefined,
-      }}
-      viewBox={`0 0 ${numericSize} ${numericSize}`}
-      width={numericSize}
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path className="fill" clipRule="evenodd" d={paths[pathKey]} fillRule="evenodd" />
-    </svg>
-  )
+  readonly size?: 16 | 24
 }
+
+export const ChevronIcon: React.FC<ChevronIconProps> = ({
+  ariaLabel,
+  className,
+  direction = 'down',
+  size = 24,
+}) => (
+  <svg
+    aria-label={ariaLabel}
+    className={['icon', 'icon--chevron', className].filter(Boolean).join(' ')}
+    fill="none"
+    height={size}
+    style={{ transform: rotations[direction] ? `rotate(${rotations[direction]}deg)` : undefined }}
+    viewBox={`0 0 ${size} ${size}`}
+    width={size}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path className="fill" clipRule="evenodd" d={paths[size]} fillRule="evenodd" />
+  </svg>
+)

packages/ui/src/icons/Folder/index.css

@@ -1,8 +1,3 @@
 @layer payload-default {
-  .icon--folder--muted {
-    color: var(--icon-secondary);
-  }
-  .icon--folder--dark {
-    color: var(--icon-default);
-  }
+  /* Folder icon */
 }

packages/ui/src/icons/Folder/index.tsx

@@ -9,13 +9,10 @@ const paths = {
 
 export const FolderIcon: React.FC<{
   readonly className?: string
-  color?: 'dark' | 'default' | 'muted'
   readonly size?: 16 | 24
-}> = ({ className, color, size = 24 }) => (
+}> = ({ className, size = 24 }) => (
   <svg
-    className={['icon', 'icon--folder', color ? `icon--folder--${color}` : '', className]
-      .filter(Boolean)
-      .join(' ')}
+    className={['icon', 'icon--folder', className].filter(Boolean).join(' ')}
     fill="none"
     height={size}
     viewBox={`0 0 ${size} ${size}`}

packages/ui/src/icons/Tag/index.css

@@ -0,0 +1,4 @@
+@layer payload-default {
+  .icon--tag {
+  }
+}

packages/ui/src/icons/Tag/index.tsx

@@ -1,7 +1,5 @@
 import React from 'react'
 
-import './index.scss'
-
 // Path data from Figma fpl/icons/src/icons/
 const paths = {
   // icon-16-tag.tsx
@@ -12,16 +10,13 @@ const paths = {
 
 export type TagIconProps = {
   className?: string
-  color?: 'dark' | 'default' | 'muted'
   size?: 16 | 24
 }
 
-export function TagIcon({ className, color, size = 24 }: TagIconProps) {
-  const colorClass = color ? `icon--tag--${color}` : ''
-
+export function TagIcon({ className, size = 24 }: TagIconProps) {
   return (
     <svg
-      className={[className, 'icon icon--tag', colorClass].filter(Boolean).join(' ')}
+      className={[className, 'icon icon--tag'].filter(Boolean).join(' ')}
       fill="none"
       height={size}
       viewBox={`0 0 ${size} ${size}`}

test/v4/views/Components/Icons/index.tsx

@@ -64,11 +64,6 @@ const icons: IconEntry[] = [
     render: (size) => <ChevronIcon direction="down" size={size} />,
     sizes: [16, 24],
   },
-  {
-    name: 'ChevronIcon (down, large)',
-    render: () => <ChevronIcon direction="down" large size={24} />,
-    sizes: [24],
-  },
   {
     name: 'ChevronIcon (up)',
     render: (size) => <ChevronIcon direction="up" size={size} />,

test/v4/views/Components/sections/Icons.tsx

@@ -67,30 +67,37 @@ const icons = [
 export const IconsSection: React.FC<{ selectedComponent: string }> = ({ selectedComponent }) => (
   <Section id="icons" selectedComponent={selectedComponent} title="Icons">
     <div className="components-view__icon-grid">
-      {/* Chevron - direction + large */}
+      {/* Chevron - direction + size */}
       <div className="components-view__icon-item components-view__icon-item--variants">
         <span>Chevron</span>
         <div className="components-view__icon-content">
+          <div className="components-view__icon-size-row">
+            <span>size: 24 (default)</span>
+            <div className="components-view__icon-variants">
+              <ChevronIcon size={24} />
+            </div>
+          </div>
+          <div className="components-view__icon-size-row">
+            <span>size: 16</span>
+            <div className="components-view__icon-variants">
+              <ChevronIcon size={16} />
+            </div>
+          </div>
           <div className="components-view__icon-size-row">
             <span>direction: down (default)</span>
             <div className="components-view__icon-variants">
               <ChevronIcon direction="down" />
             </div>
           </div>
           <div className="components-view__icon-size-row">
-            <span>direction: up | left | right</span>
+            <span>direction: down (default) | up | left | right</span>
             <div className="components-view__icon-variants">
+              <ChevronIcon />
               <ChevronIcon direction="up" />
               <ChevronIcon direction="left" />
               <ChevronIcon direction="right" />
             </div>
           </div>
-          <div className="components-view__icon-size-row">
-            <span>large: true</span>
-            <div className="components-view__icon-variants">
-              <ChevronIcon direction="down" large />
-            </div>
-          </div>
         </div>
       </div>
 
@@ -372,7 +379,7 @@ export const IconsSection: React.FC<{ selectedComponent: string }> = ({ selected
         </div>
       </div>
 
-      {/* Folder - size + color */}
+      {/* Folder - size */}
       <div className="components-view__icon-item components-view__icon-item--variants">
         <span>Folder</span>
         <div className="components-view__icon-content">
@@ -388,14 +395,6 @@ export const IconsSection: React.FC<{ selectedComponent: string }> = ({ selected
               <FolderIcon size={16} />
             </div>
           </div>
-          <div className="components-view__icon-size-row">
-            <span>color: default | dark | muted</span>
-            <div className="components-view__icon-variants">
-              <FolderIcon color="default" />
-              <FolderIcon color="dark" />
-              <FolderIcon color="muted" />
-            </div>
-          </div>
         </div>
       </div>
 
@@ -494,7 +493,7 @@ export const IconsSection: React.FC<{ selectedComponent: string }> = ({ selected
         </div>
       </div>
 
-      {/* Tag - size + color */}
+      {/* Tag - size */}
       <div className="components-view__icon-item components-view__icon-item--variants">
         <span>Tag</span>
         <div className="components-view__icon-content">
@@ -510,14 +509,6 @@ export const IconsSection: React.FC<{ selectedComponent: string }> = ({ selected
               <TagIcon size={16} />
             </div>
           </div>
-          <div className="components-view__icon-size-row">
-            <span>color: default | dark | muted</span>
-            <div className="components-view__icon-variants">
-              <TagIcon color="default" />
-              <TagIcon color="dark" />
-              <TagIcon color="muted" />
-            </div>
-          </div>
         </div>
       </div>