improvement(emcn): normalize the chevron geometry and consolidate consumers

waleedlatif1 · waleedlatif1 · commit 8973348791f8 · 2026-08-04T12:23:24.000-07:00
The sidebar folder arrow read as much larger than the icons beside it. It was
measurably so: `ChevronRight` was a triple outlier in the icon set.

| | ChevronRight | house standard |
|---|---|---|
| viewBox | `0 0 6 10` | 24-based — 149 of 173 icons |
| glyph fill | 80% of the box | 54% median |
| strokeWidth | 1.2 | 1.55 — 153 of 173 |
| cap/join | square/miter | round/round — 175/177 |

Because the box was tight-cropped, a square `size-[16px]` scaled the glyph to
12.8px tall where a standard icon shows ~8.6px — about 50% larger, with a
relatively ~85% heavier stroke. The lucide icon it replaced was a 24-box at 50%
fill, which is why this only appeared after the migration.

`chevron-down`, `chevron-right` and `chevron-left` are rebuilt as the exact
mirror and transpose of `chevron-up`, which already sets the house standard, so
their optical weight is identical to that sibling by construction rather than by
eye.

Changing the viewBox is not safe on its own: 36 call sites sized these to the
old tight aspect (`h-[7px] w-[9px]`, `h-[6px] w-[10px]`, ...), which would
letterbox against a square box. All of them move to `size-[14px]`, the documented
default and the app's dominant size (212 uses). Every one of the 94 chevron call
sites is now square-sized.

Two of those were only reachable through indirection and would have regressed
silently: `STYLES.chevron` in the terminal's structured output, and the
sidebar-section chevron inside a multi-line `cn()`. The dropdown submenu chevron
carried no size at all and was relying on the icon's intrinsic 6x10 — it would
have jumped to 24x24.

Also unifies `folder-input`, which carried both 1.55 and 2 within one icon.

Docs consolidation, same theme — it was forking shared components:
- `SidebarChevron` was a private inline copy of the old 6x10 chevron; it now
  wraps the shared `ChevronRight`.
- `ThemeToggle` inlined lucide's sun and moon at strokeWidth 1.5; both now come
  from `@sim/emcn/icons` at the house 1.55.

Docs inline `&lt;svg&gt;` files drop from 9 to 7; the remainder are the brand icon set,
the logo, OG-image generation and bespoke hand-positioned shapes.

Left alone: 16 icons whose stroke or box still differs. They are fill-based
glyphs and brand marks (`sim`, `wordmark`, `folder`, `more-horizontal`, ...)
where changing the stroke means redrawing the icon — that wants visual review,
not a sweep.

Verified: 23/23 type-check (--force), biome, api-validation, 18361 tests, and
production builds of both apps.
diff --git a/apps/docs/components/docs-layout/sidebar-components.tsx b/apps/docs/components/docs-layout/sidebar-components.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import { type ReactNode, useState } from 'react'
+import { ChevronRight } from '@sim/emcn/icons'
 import type { Folder, Item, Separator } from 'fumadocs-core/page-tree'
 import { useSidebar } from 'fumadocs-ui/components/sidebar/base'
 import Link from 'next/link'
@@ -10,25 +11,13 @@ import { cn } from '@/lib/utils'
 
 function SidebarChevron({ open, className }: { open: boolean; className?: string }) {
   return (
-    <svg
-      width='5'
-      height='8'
-      viewBox='0 0 6 10'
-      fill='none'
+    <ChevronRight
       className={cn(
-        'flex-shrink-0 transition-transform duration-200',
+        'size-[14px] flex-shrink-0 transition-transform duration-200',
         open && 'rotate-90',
         className
       )}
-    >
-      <path
-        d='M1 1L5 5L1 9'
-        stroke='currentColor'
-        strokeWidth='1.33'
-        strokeLinecap='square'
-        strokeLinejoin='miter'
-      />
-    </svg>
+    />
   )
 }
 
diff --git a/apps/docs/components/ui/theme-toggle.tsx b/apps/docs/components/ui/theme-toggle.tsx
@@ -1,54 +1,8 @@
 'use client'
 
-import type { SVGProps } from 'react'
+import { Moon, Sun } from '@sim/emcn/icons'
 import { useTheme } from 'next-themes'
 
-function SunIcon(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      xmlns='http://www.w3.org/2000/svg'
-      width='16'
-      height='16'
-      viewBox='0 0 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.5'
-      strokeLinecap='round'
-      strokeLinejoin='round'
-      {...props}
-    >
-      <circle cx='12' cy='12' r='4' />
-      <path d='M12 2v2' />
-      <path d='M12 20v2' />
-      <path d='m4.93 4.93 1.41 1.41' />
-      <path d='m17.66 17.66 1.41 1.41' />
-      <path d='M2 12h2' />
-      <path d='M20 12h2' />
-      <path d='m6.34 17.66-1.41 1.41' />
-      <path d='m19.07 4.93-1.41 1.41' />
-    </svg>
-  )
-}
-
-function MoonIcon(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      xmlns='http://www.w3.org/2000/svg'
-      width='16'
-      height='16'
-      viewBox='0 0 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.5'
-      strokeLinecap='round'
-      strokeLinejoin='round'
-      {...props}
-    >
-      <path d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z' />
-    </svg>
-  )
-}
-
 export function ThemeToggle() {
   const { resolvedTheme, setTheme } = useTheme()
 
@@ -59,8 +13,8 @@ export function ThemeToggle() {
       className='flex size-[30px] cursor-pointer items-center justify-center rounded-lg text-[var(--text-icon)] transition-colors hover:bg-[var(--surface-active)]'
       aria-label='Toggle theme'
     >
-      <SunIcon className='block size-[14px] dark:hidden' />
-      <MoonIcon className='hidden size-[14px] dark:block' />
+      <Sun className='block size-[14px] dark:hidden' />
+      <Moon className='hidden size-[14px] dark:block' />
     </button>
   )
 }
diff --git a/apps/docs/components/workflow-preview/output-bundle.tsx b/apps/docs/components/workflow-preview/output-bundle.tsx
@@ -71,7 +71,7 @@ function TreeNode({ node, depth = 0 }: { node: OutputNode; depth?: number }) {
         </span>
         <TypeBadge type={type} />
         <ChevronDown
-          className='h-[7px] w-[9px] flex-shrink-0 text-[var(--text-muted)]'
+          className='size-[14px] flex-shrink-0 text-[var(--text-muted)]'
           style={expanded ? undefined : { transform: 'rotate(-90deg)' }}
         />
       </div>
diff --git a/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-chat/chat-title-bar.tsx b/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-chat/chat-title-bar.tsx
@@ -31,7 +31,7 @@ export function LandingPreviewChatTitleBar({
         </span>
         <span aria-hidden='true' className='w-px self-stretch bg-[var(--surface-2)]' />
         <span className='flex items-center rounded-r-lg px-1 transition-colors hover-hover:bg-[var(--surface-active)]'>
-          <ChevronDown className='h-[6px] w-[10px] flex-shrink-0 text-[var(--text-icon)]' />
+          <ChevronDown className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
         </span>
       </span>
       {showClose && (
diff --git a/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-home/landing-preview-home.tsx b/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-home/landing-preview-home.tsx
@@ -200,7 +200,7 @@ export const LandingPreviewHome = memo(function LandingPreviewHome({
                         </div>
                         <span className='text-[var(--text-body)] text-sm'>Sim</span>
                         <ChevronDown
-                          className='h-[7px] w-[9px] text-[var(--text-icon)] transition-transform duration-150'
+                          className='size-[14px] text-[var(--text-icon)] transition-transform duration-150'
                           style={{
                             transform: toolsExpanded ? 'rotate(0deg)' : 'rotate(-90deg)',
                           }}
@@ -298,7 +298,7 @@ export const LandingPreviewHome = memo(function LandingPreviewHome({
               <div className='flex items-center justify-between'>
                 <div className='flex items-center gap-2'>
                   <span className='text-[var(--text-muted)] text-small'>Suggested actions</span>
-                  <ChevronDown className='h-[7px] w-[9px] text-[var(--text-muted)]' />
+                  <ChevronDown className='size-[14px] text-[var(--text-muted)]' />
                 </div>
                 <div className='-mr-2 flex items-center gap-1.5 rounded-lg px-2 py-1'>
                   <span className='-mt-px text-[var(--text-muted)] text-small'>Shuffle</span>
@@ -411,7 +411,7 @@ function MiniTablePanel() {
                       <span className='font-medium text-[11px] text-[var(--text-primary)]'>
                         {col.label}
                       </span>
-                      <ChevronDown className='ml-auto h-[6px] w-[8px] text-[var(--text-muted)]' />
+                      <ChevronDown className='ml-auto size-[14px] text-[var(--text-muted)]' />
                     </div>
                   </th>
                 )
diff --git a/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-sidebar/landing-preview-sidebar.tsx b/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-sidebar/landing-preview-sidebar.tsx
@@ -97,7 +97,7 @@ export function LandingPreviewSidebar({
           <span className='min-w-0 flex-1 truncate text-left font-medium text-[13px] text-[var(--text-primary)]'>
             Superark
           </span>
-          <ChevronDown className='h-[8px] w-[10px] flex-shrink-0 text-[var(--text-icon)]' />
+          <ChevronDown className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
         </div>
       </div>
 
diff --git a/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-tables/landing-preview-tables.tsx b/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-tables/landing-preview-tables.tsx
@@ -444,7 +444,7 @@ function SpreadsheetView({ tableId, tableName, onBack }: SpreadsheetViewProps) {
           <span className='select-none text-[var(--text-icon)] text-sm'>/</span>
           <span className='inline-flex items-center px-2 py-1 font-medium text-[var(--text-body)] text-sm'>
             {tableName}
-            <ChevronDown className='ml-2 h-[7px] w-[9px] shrink-0 text-[var(--text-muted)]' />
+            <ChevronDown className='ml-2 size-[14px] shrink-0 text-[var(--text-muted)]' />
           </span>
         </div>
       </div>
@@ -470,7 +470,7 @@ function SpreadsheetView({ tableId, tableName, onBack }: SpreadsheetViewProps) {
                       <span className='ml-1.5 min-w-0 overflow-clip text-ellipsis whitespace-nowrap font-medium text-[var(--text-primary)] text-small'>
                         {col.label}
                       </span>
-                      <ChevronDown className='ml-auto h-[7px] w-[9px] shrink-0 text-[var(--text-muted)]' />
+                      <ChevronDown className='ml-auto size-[14px] shrink-0 text-[var(--text-muted)]' />
                     </div>
                   </th>
                 )
diff --git a/apps/sim/app/(landing)/enterprise/components/enterprise-platform-loop/enterprise-home-stage.tsx b/apps/sim/app/(landing)/enterprise/components/enterprise-platform-loop/enterprise-home-stage.tsx
@@ -217,7 +217,7 @@ export function EnterpriseHomeStage({
             <div className='flex items-center justify-between'>
               <span className='flex items-center gap-2'>
                 <span className='text-[13px] text-[var(--text-muted)]'>Suggested actions</span>
-                <ChevronDown className='h-[7px] w-[9px] text-[var(--text-muted)]' />
+                <ChevronDown className='size-[14px] text-[var(--text-muted)]' />
               </span>
               <span className='flex items-center gap-1.5'>
                 <span className='text-[13px] text-[var(--text-muted)]'>Shuffle</span>
diff --git a/apps/sim/app/(landing)/enterprise/components/enterprise-platform-loop/enterprise-sidebar.tsx b/apps/sim/app/(landing)/enterprise/components/enterprise-platform-loop/enterprise-sidebar.tsx
@@ -126,7 +126,7 @@ export const EnterpriseSidebar = memo(function EnterpriseSidebar({
             className='size-[16px] flex-shrink-0 rounded-sm'
           />
           <span className='min-w-0 truncate text-[var(--text-body)] text-sm'>{workspaceName}</span>
-          <ChevronDown className='h-[6px] w-[10px] flex-shrink-0 text-[var(--text-icon)]' />
+          <ChevronDown className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
         </div>
         <PanelLeft className='mr-1.5 size-[16px] flex-shrink-0 text-[var(--text-icon)]' />
       </div>
diff --git a/apps/sim/app/(landing)/tables/components/tables-hero-loop.tsx b/apps/sim/app/(landing)/tables/components/tables-hero-loop.tsx
@@ -294,7 +294,7 @@ function TablesGridPane({ rowCount, filledCount }: TablesGridPaneProps) {
           <span className='select-none text-[var(--text-icon)] text-sm'>/</span>
           <span className='inline-flex items-center px-2 py-1 font-medium text-[var(--text-body)] text-sm'>
             Leads
-            <ChevronDown className='ml-2 h-[7px] w-[9px] shrink-0 text-[var(--text-muted)]' />
+            <ChevronDown className='ml-2 size-[14px] shrink-0 text-[var(--text-muted)]' />
           </span>
         </div>
       </div>
@@ -319,7 +319,7 @@ function TablesGridPane({ rowCount, filledCount }: TablesGridPaneProps) {
                       <span className='ml-1.5 min-w-0 overflow-clip text-ellipsis whitespace-nowrap font-medium text-[var(--text-primary)] text-small'>
                         {column.label}
                       </span>
-                      <ChevronDown className='ml-auto h-[7px] w-[9px] shrink-0 text-[var(--text-muted)]' />
+                      <ChevronDown className='ml-auto size-[14px] shrink-0 text-[var(--text-muted)]' />
                     </div>
                   </th>
                 )
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group.tsx
@@ -112,7 +112,7 @@ export function AgentGroup({
           )}
           <ChevronDown
             className={cn(
-              'h-[7px] w-[9px] text-[var(--text-icon)] opacity-0 transition-[transform,opacity] duration-150 group-hover/agent:opacity-100 group-focus-visible/agent:opacity-100',
+              'size-[14px] text-[var(--text-icon)] opacity-0 transition-[transform,opacity] duration-150 group-hover/agent:opacity-100 group-focus-visible/agent:opacity-100',
               !expanded && '-rotate-90'
             )}
           />
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/question/question.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/question/question.tsx
@@ -268,7 +268,7 @@ export function QuestionDisplay({
                   'before:absolute before:inset-[-8px] before:content-[""] disabled:opacity-50'
                 )}
               >
-                <ChevronLeft className='h-[9px] w-[7px] text-[var(--text-icon)]' />
+                <ChevronLeft className='size-[14px] text-[var(--text-icon)]' />
                 <span className='sr-only'>Previous question</span>
               </Button>
               <span className='whitespace-nowrap text-[var(--text-muted)] text-sm tabular-nums'>
@@ -286,7 +286,7 @@ export function QuestionDisplay({
                   'before:absolute before:inset-[-8px] before:content-[""] disabled:opacity-50'
                 )}
               >
-                <ChevronRight className='h-[9px] w-[7px] text-[var(--text-icon)]' />
+                <ChevronRight className='size-[14px] text-[var(--text-icon)]' />
                 <span className='sr-only'>Next question</span>
               </Button>
             </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.tsx
@@ -1383,7 +1383,7 @@ function OptionsDisplay({ data, onSelect }: OptionsDisplayProps) {
           <span className='text-[var(--text-body)] text-sm'>Suggested follow-ups</span>
           <ChevronDown
             className={cn(
-              'h-[7px] w-[9px] text-[var(--text-icon)] transition-transform duration-150',
+              'size-[14px] text-[var(--text-icon)] transition-transform duration-150',
               !expanded && '-rotate-90'
             )}
           />
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/suggested-actions/suggested-actions.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/suggested-actions/suggested-actions.tsx
@@ -362,7 +362,7 @@ export function SuggestedActions({ onSelectPrompt }: SuggestedActionsProps) {
          */}
         <ChevronDown
           className={cn(
-            'h-[6px] w-[8px] flex-shrink-0 text-[var(--text-icon)] opacity-0 transition-[opacity,transform] duration-150',
+            'size-[14px] flex-shrink-0 text-[var(--text-icon)] opacity-0 transition-[opacity,transform] duration-150',
             'group-hover/suggested:opacity-100 group-focus-visible/toggle:opacity-100',
             !expanded && '-rotate-90'
           )}
diff --git a/apps/sim/app/workspace/[workspaceId]/integrations/integrations.tsx b/apps/sim/app/workspace/[workspaceId]/integrations/integrations.tsx
@@ -307,7 +307,7 @@ export function Integrations() {
                       ? selectedCategory
                       : formatIntegrationType(selectedCategory)}
                   </span>
-                  <ChevronDown className='h-[7px] w-[9px] text-[var(--text-icon)]' />
+                  <ChevronDown className='size-[14px] text-[var(--text-icon)]' />
                 </button>
               </DropdownMenuTrigger>
               <DropdownMenuContent align='end' className='min-w-[160px]'>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/components/field-item/field-item.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/components/field-item/field-item.tsx
@@ -104,7 +104,7 @@ export function FieldItem({
       {hasChildren && (
         <ChevronDown
           className={clsx(
-            'h-3.5 w-3.5 flex-shrink-0 transition-transform duration-100',
+            'size-[14px] flex-shrink-0 transition-transform duration-100',
             'text-[var(--text-secondary)] group-hover:text-[var(--text-primary)]',
             isExpanded && 'rotate-180'
           )}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/components/structured-output.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/components/structured-output.tsx
@@ -66,8 +66,7 @@ const BADGE_VARIANTS: Record<ValueType, BadgeVariant> = {
  */
 const STYLES = {
   row: 'group flex min-h-[30px] cursor-pointer items-center gap-2 rounded-lg px-2 -mx-2 hover-hover:bg-[var(--surface-active)]',
-  chevron:
-    'h-[7px] w-[9px] flex-shrink-0 text-[var(--text-muted)] transition-transform duration-100',
+  chevron: 'size-[14px] flex-shrink-0 text-[var(--text-muted)] transition-transform duration-100',
   keyName: 'text-sm text-[var(--text-primary)]',
   badge: 'rounded-sm px-1 py-[0px] text-xs',
   summary: 'text-sm text-[var(--text-secondary)]',
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/toggle-button/toggle-button.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/toggle-button/toggle-button.tsx
@@ -24,7 +24,7 @@ export const ToggleButton = memo(function ToggleButton({ isExpanded, onClick }:
     >
       <ChevronDown
         className={clsx(
-          'h-3.5 w-3.5 flex-shrink-0 transition-transform duration-100',
+          'size-[14px] flex-shrink-0 transition-transform duration-100',
           !isExpanded && 'rotate-180'
         )}
       />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx
@@ -216,7 +216,7 @@ const IterationNodeRow = memo(function IterationNodeRow({
           {hasChildren && (
             <ChevronDown
               className={clsx(
-                'h-[7px] w-[9px] flex-shrink-0 text-[var(--text-muted)] transition-transform duration-100',
+                'size-[14px] flex-shrink-0 text-[var(--text-muted)] transition-transform duration-100',
                 !isExpanded && '-rotate-90'
               )}
             />
@@ -326,7 +326,7 @@ const SubflowNodeRow = memo(function SubflowNodeRow({
           {hasChildren && (
             <ChevronDown
               className={clsx(
-                'h-[7px] w-[9px] flex-shrink-0 text-[var(--text-muted)] transition-transform duration-100',
+                'size-[14px] flex-shrink-0 text-[var(--text-muted)] transition-transform duration-100',
                 !isExpanded && '-rotate-90'
               )}
             />
@@ -453,7 +453,7 @@ const WorkflowNodeRow = memo(function WorkflowNodeRow({
           {hasChildren && (
             <ChevronDown
               className={clsx(
-                'h-[7px] w-[9px] flex-shrink-0 text-[var(--text-muted)] transition-transform duration-100',
+                'size-[14px] flex-shrink-0 text-[var(--text-muted)] transition-transform duration-100',
                 !isExpanded && '-rotate-90'
               )}
             />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-controls.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-controls.tsx
@@ -113,7 +113,7 @@ export const WorkflowControls = memo(function WorkflowControls() {
                 </Tooltip.Trigger>
                 <Button className='-m-1 !p-1.5 group' variant='ghost'>
                   <ChevronDown
-                    className={`h-[8px] w-[10px] text-[var(--text-muted)] transition-transform duration-100 group-hover:text-[var(--text-secondary)] ${isCanvasModeOpen ? 'rotate-180' : ''}`}
+                    className={`size-[14px] text-[var(--text-muted)] transition-transform duration-100 group-hover:text-[var(--text-secondary)] ${isCanvasModeOpen ? 'rotate-180' : ''}`}
                   />
                 </Button>
               </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
@@ -468,7 +468,7 @@ function ConnectionsSection({
               </span>
               <ChevronDown
                 className={cn(
-                  'h-3.5 w-3.5 flex-shrink-0 transition-transform duration-100',
+                  'size-[14px] flex-shrink-0 transition-transform duration-100',
                   'text-[var(--text-secondary)] group-hover:text-[var(--text-primary)]',
                   expandedVariables && 'rotate-180'
                 )}
@@ -520,7 +520,7 @@ function ConnectionsSection({
               </span>
               <ChevronDown
                 className={cn(
-                  'h-3.5 w-3.5 flex-shrink-0 transition-transform duration-100',
+                  'size-[14px] flex-shrink-0 transition-transform duration-100',
                   'text-[var(--text-secondary)] group-hover:text-[var(--text-primary)]',
                   expandedEnvVars && 'rotate-180'
                 )}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-section/sidebar-section.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-section/sidebar-section.tsx
@@ -93,7 +93,7 @@ export function SidebarSection({
              */}
             <ChevronDown
               className={cn(
-                'h-[6px] w-[8px] flex-shrink-0 text-[var(--text-icon)] opacity-0',
+                'size-[14px] flex-shrink-0 text-[var(--text-icon)] opacity-0',
                 CHEVRON_TRANSITION_CLASS,
                 'group-hover/section:opacity-100 group-focus-visible/toggle:opacity-100',
                 !expanded && '-rotate-90'
diff --git a/apps/sim/ee/workspace-forking/components/fork-excluded-workflows/fork-excluded-workflows.tsx b/apps/sim/ee/workspace-forking/components/fork-excluded-workflows/fork-excluded-workflows.tsx
@@ -213,7 +213,7 @@ function ExcludedFolderRow({
           </span>
           <ChevronDown
             className={cn(
-              'h-[6px] w-[10px] flex-shrink-0 text-[var(--text-icon)] transition-transform',
+              'size-[14px] flex-shrink-0 text-[var(--text-icon)] transition-transform',
               expanded && 'rotate-180'
             )}
           />
diff --git a/apps/sim/ee/workspace-forking/components/fork-file-tree/fork-file-tree.tsx b/apps/sim/ee/workspace-forking/components/fork-file-tree/fork-file-tree.tsx
@@ -142,7 +142,7 @@ function ForkFileFolderRow({
           </span>
           <ChevronDown
             className={cn(
-              'h-[6px] w-[10px] flex-shrink-0 text-[var(--text-icon)] transition-transform',
+              'size-[14px] flex-shrink-0 text-[var(--text-icon)] transition-transform',
               expanded && 'rotate-180'
             )}
           />
diff --git a/apps/sim/ee/workspace-forking/components/fork-resource-picker/fork-resource-picker.tsx b/apps/sim/ee/workspace-forking/components/fork-resource-picker/fork-resource-picker.tsx
@@ -74,7 +74,7 @@ export function ResourceKindRow({
           </span>
           <ChevronDown
             className={cn(
-              'h-[6px] w-[10px] flex-shrink-0 text-[var(--text-icon)] transition-transform',
+              'size-[14px] flex-shrink-0 text-[var(--text-icon)] transition-transform',
               expanded && 'rotate-180'
             )}
           />
@@ -169,7 +169,7 @@ export function FileKindRow({
           </span>
           <ChevronDown
             className={cn(
-              'h-[6px] w-[10px] flex-shrink-0 text-[var(--text-icon)] transition-transform',
+              'size-[14px] flex-shrink-0 text-[var(--text-icon)] transition-transform',
               expanded && 'rotate-180'
             )}
           />
diff --git a/apps/sim/ee/workspace-forking/components/fork-sync/fork-sync-view.tsx b/apps/sim/ee/workspace-forking/components/fork-sync/fork-sync-view.tsx
diff --git a/packages/emcn/src/components/chip-date-picker/chip-date-picker.tsx b/packages/emcn/src/components/chip-date-picker/chip-date-picker.tsx
diff --git a/packages/emcn/src/components/chip-dropdown/chip-dropdown.tsx b/packages/emcn/src/components/chip-dropdown/chip-dropdown.tsx
diff --git a/packages/emcn/src/components/chip-select/chip-select.tsx b/packages/emcn/src/components/chip-select/chip-select.tsx
diff --git a/packages/emcn/src/components/chip/chip-chevron.tsx b/packages/emcn/src/components/chip/chip-chevron.tsx
diff --git a/packages/emcn/src/components/dropdown-menu/dropdown-menu.tsx b/packages/emcn/src/components/dropdown-menu/dropdown-menu.tsx
diff --git a/packages/emcn/src/components/time-picker/time-picker.tsx b/packages/emcn/src/components/time-picker/time-picker.tsx
diff --git a/packages/emcn/src/icons/chevron-down.tsx b/packages/emcn/src/icons/chevron-down.tsx
diff --git a/packages/emcn/src/icons/chevron-left.tsx b/packages/emcn/src/icons/chevron-left.tsx
diff --git a/packages/emcn/src/icons/chevron-right.tsx b/packages/emcn/src/icons/chevron-right.tsx
diff --git a/packages/emcn/src/icons/folder-input.tsx b/packages/emcn/src/icons/folder-input.tsx
