fix(icons): align table block icon and 12-unit icon stroke with the emcn family (#6708)

The table/table_v2 blocks and the table trigger used a local lucide-shaped
TableIcon (stroke 2.0, full-bleed 24 viewBox, 3x3 grid) while every other
table surface used emcn's Table. Consolidate onto the emcn icon and drop the
local copy.

Nested tool-call rows in Chat applied no color class, so a non-brand block
icon inherited body text instead of --text-icon.

redo/undo/zoom-in/zoom-out draw 0.85 stroke on a 12-unit viewBox, rendering
0.992px at a 14px box against the family's 0.904px. 0.775 restores parity.

apps/docs/components/icons.tsx

@@ -7538,26 +7538,6 @@ export function BedrockIcon(props: SVGProps<SVGSVGElement>) {
   )
 }
 
-export function TableIcon(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      xmlns='http://www.w3.org/2000/svg'
-      viewBox='0 0 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth={2}
-      strokeLinecap='round'
-      strokeLinejoin='round'
-      {...props}
-    >
-      <rect width='18' height='18' x='3' y='3' rx='2' />
-      <path d='M3 9h18' />
-      <path d='M3 15h18' />
-      <path d='M9 3v18' />
-      <path d='M15 3v18' />
-    </svg>
-  )
-}
 export function ReductoIcon(props: SVGProps<SVGSVGElement>) {
   return (
     <svg

apps/docs/components/ui/icon-mapping.ts

@@ -3,7 +3,7 @@
 // Maps block types to their icon component references
 
 import type { ComponentType, SVGProps } from 'react'
-import { Library, Rocket } from '@sim/emcn/icons'
+import { Library, Rocket, Table } from '@sim/emcn/icons'
 import {
   A2AIcon,
   AgentMailIcon,
@@ -225,7 +225,6 @@ import {
   StagehandIcon,
   StripeIcon,
   SupabaseIcon,
-  TableIcon,
   TailscaleIcon,
   TavilyIcon,
   TelegramIcon,
@@ -518,7 +517,7 @@ export const blockTypeToIconMap: Record<string, IconComponent> = {
   stt: STTIcon,
   stt_v2: STTIcon,
   supabase: SupabaseIcon,
-  table: TableIcon,
+  table: Table,
   tailscale: TailscaleIcon,
   tavily: TavilyIcon,
   telegram: TelegramIcon,

apps/sim/app/(landing)/components/features/components/build-callout/components/workflow-showcase/showcase-data.ts

@@ -1,11 +1,5 @@
-import {
-  AgentIcon,
-  AnthropicIcon,
-  GmailIcon,
-  LinearIcon,
-  SlackIcon,
-  TableIcon,
-} from '@/components/icons'
+import { Table as TableIcon } from '@sim/emcn/icons'
+import { AgentIcon, AnthropicIcon, GmailIcon, LinearIcon, SlackIcon } from '@/components/icons'
 import type { BlockDef } from '@/app/(landing)/components/hero/components/hero-visual/workflow-data'
 
 /**

apps/sim/app/(landing)/components/hero/components/hero-platform-loop/stage-data.ts

@@ -1,4 +1,5 @@
-import { AgentIcon, CodeIcon, SlackIcon, StartIcon, TableIcon } from '@/components/icons'
+import { Table as TableIcon } from '@sim/emcn/icons'
+import { AgentIcon, CodeIcon, SlackIcon, StartIcon } from '@/components/icons'
 import type { BlockDef } from '@/app/(landing)/components/hero/components/hero-visual/workflow-data'
 import { BLOCK_WIDTH } from '@/app/(landing)/components/hero/components/hero-visual/workflow-data'
 

apps/sim/app/(landing)/enterprise/components/enterprise-platform-loop/stage-data.ts

@@ -1,4 +1,5 @@
-import { AgentIcon, ConditionalIcon, MailIcon, StartIcon, TableIcon } from '@/components/icons'
+import { Table as TableIcon } from '@sim/emcn/icons'
+import { AgentIcon, ConditionalIcon, MailIcon, StartIcon } from '@/components/icons'
 import type { BlockDef } from '@/app/(landing)/components/hero/components/hero-visual/workflow-data'
 
 /**

apps/sim/app/(landing)/solutions/compliance/components/compliance-hero-loop.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import { AgentIcon, ConditionalIcon, ScheduleIcon, SlackIcon, TableIcon } from '@/components/icons'
+import { Table as TableIcon } from '@sim/emcn/icons'
+import { AgentIcon, ConditionalIcon, ScheduleIcon, SlackIcon } from '@/components/icons'
 import { EnterprisePlatformLoop } from '@/app/(landing)/enterprise/components/enterprise-platform-loop'
 import type { EnterpriseLoopContent } from '@/app/(landing)/enterprise/components/enterprise-platform-loop/stage-data'
 

apps/sim/app/(landing)/solutions/finance/components/finance-hero-loop.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import { AgentIcon, ConditionalIcon, MailIcon, StartIcon, TableIcon } from '@/components/icons'
+import { Table as TableIcon } from '@sim/emcn/icons'
+import { AgentIcon, ConditionalIcon, MailIcon, StartIcon } from '@/components/icons'
 import { EnterprisePlatformLoop } from '@/app/(landing)/enterprise/components/enterprise-platform-loop'
 import type { EnterpriseLoopContent } from '@/app/(landing)/enterprise/components/enterprise-platform-loop/stage-data'
 

apps/sim/app/(landing)/workflows/components/workflows-editor-loop.tsx

@@ -1,13 +1,7 @@
 'use client'
 
-import {
-  AgentIcon,
-  ConditionalIcon,
-  JiraIcon,
-  SlackIcon,
-  StartIcon,
-  TableIcon,
-} from '@/components/icons'
+import { Table as TableIcon } from '@sim/emcn/icons'
+import { AgentIcon, ConditionalIcon, JiraIcon, SlackIcon, StartIcon } from '@/components/icons'
 import { EditorLoop, type EditorLoopContent } from '@/app/(landing)/components/shared/editor-loop'
 
 /**

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item.tsx

@@ -238,7 +238,10 @@ export function ToolCallItem({
   return (
     <div className='flex items-center gap-[6px] pl-6'>
       {BlockIcon && (
-        <BlockIcon className='size-[14px] flex-shrink-0' style={getBareIconStyle(BlockIcon)} />
+        <BlockIcon
+          className='size-[14px] flex-shrink-0 text-[var(--text-icon)]'
+          style={getBareIconStyle(BlockIcon)}
+        />
       )}
       {isExecuting ? (
         <ShimmerText className='text-[13px] [--shimmer-rest:var(--text-secondary)]'>

apps/sim/blocks/blocks/table.ts

@@ -1,5 +1,5 @@
+import { Table } from '@sim/emcn/icons'
 import { toError } from '@sim/utils/errors'
-import { TableIcon } from '@/components/icons'
 import { TABLE_LIMITS } from '@/lib/table/constants'
 import { filterRulesToFilter, sortRulesToSort } from '@/lib/table/query-builder/converters'
 import type { BlockConfig } from '@/blocks/types'
@@ -201,7 +201,7 @@ export const TableBlock: BlockConfig<TableQueryResponse> = {
   docsLink: 'https://docs.sim.ai/integrations/table',
   category: 'blocks',
   bgColor: '#10B981',
-  icon: TableIcon,
+  icon: Table,
   canvasPresentation: {
     defaultTitle: 'Table',
     /*

apps/sim/blocks/blocks/table_v2.ts

@@ -1,5 +1,5 @@
+import { Table } from '@sim/emcn/icons'
 import { toError } from '@sim/utils/errors'
-import { TableIcon } from '@/components/icons'
 import { TABLE_LIMITS } from '@/lib/table/constants'
 import { filterRulesToPredicate, sortRulesToSortSpec } from '@/lib/table/query-builder/converters'
 import { normalizeTablePredicate } from '@/lib/table/query-builder/predicate'
@@ -221,7 +221,7 @@ export const TableV2Block: BlockConfig<TableQueryV2Response> = {
   // and mark v1 `table` superseded.
   preview: true,
   bgColor: '#10B981',
-  icon: TableIcon,
+  icon: Table,
   canvasPresentation: {
     defaultTitle: 'Table',
     /*

apps/sim/components/icons.tsx

@@ -7538,26 +7538,6 @@ export function BedrockIcon(props: SVGProps<SVGSVGElement>) {
   )
 }
 
-export function TableIcon(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      xmlns='http://www.w3.org/2000/svg'
-      viewBox='0 0 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth={2}
-      strokeLinecap='round'
-      strokeLinejoin='round'
-      {...props}
-    >
-      <rect width='18' height='18' x='3' y='3' rx='2' />
-      <path d='M3 9h18' />
-      <path d='M3 15h18' />
-      <path d='M9 3v18' />
-      <path d='M15 3v18' />
-    </svg>
-  )
-}
 export function ReductoIcon(props: SVGProps<SVGSVGElement>) {
   return (
     <svg

apps/sim/lib/integrations/icon-mapping.ts

@@ -3,7 +3,7 @@
 // Maps block types to their icon component references for the integrations page
 
 import type { ComponentType, SVGProps } from 'react'
-import { Library, Rocket } from '@sim/emcn/icons'
+import { Library, Rocket, Table } from '@sim/emcn/icons'
 import {
   A2AIcon,
   AgentMailIcon,
@@ -223,7 +223,6 @@ import {
   StagehandIcon,
   StripeIcon,
   SupabaseIcon,
-  TableIcon,
   TailscaleIcon,
   TavilyIcon,
   TelegramIcon,
@@ -497,7 +496,7 @@ export const blockTypeToIconMap: Record<string, IconComponent> = {
   sts: STSIcon,
   stt_v2: STTIcon,
   supabase: SupabaseIcon,
-  table: TableIcon,
+  table: Table,
   tailscale: TailscaleIcon,
   tavily: TavilyIcon,
   telegram: TelegramIcon,

apps/sim/triggers/table/poller.ts

@@ -1,4 +1,4 @@
-import { TableIcon } from '@/components/icons'
+import { Table } from '@sim/emcn/icons'
 import { requestJson } from '@/lib/api/client/request'
 import { listTablesContract } from '@/lib/api/contracts/tables'
 import type { TableDefinition } from '@/lib/table'
@@ -39,7 +39,7 @@ export const tableNewRowTrigger: TriggerConfig = {
   provider: 'table',
   description: 'Triggers when rows are inserted or updated in a table',
   version: '1.0.0',
-  icon: TableIcon,
+  icon: Table,
 
   subBlocks: [
     {

packages/emcn/src/icons/redo.tsx

@@ -18,14 +18,14 @@ export function Redo(props: SVGProps<SVGSVGElement>) {
       <path
         d='M9.5 4.5H4C2.62 4.5 1.5 5.62 1.5 7C1.5 8.38 2.62 9.5 4 9.5H7'
         stroke='currentColor'
-        strokeWidth='0.85'
+        strokeWidth='0.775'
         strokeLinecap='round'
         strokeLinejoin='round'
       />
       <path
         d='M8 2.5L10 4.5L8 6.5'
         stroke='currentColor'
-        strokeWidth='0.85'
+        strokeWidth='0.775'
         strokeLinecap='round'
         strokeLinejoin='round'
       />

packages/emcn/src/icons/undo.tsx

@@ -18,14 +18,14 @@ export function Undo(props: SVGProps<SVGSVGElement>) {
       <path
         d='M2.5 4.5H8C9.38 4.5 10.5 5.62 10.5 7C10.5 8.38 9.38 9.5 8 9.5H5'
         stroke='currentColor'
-        strokeWidth='0.85'
+        strokeWidth='0.775'
         strokeLinecap='round'
         strokeLinejoin='round'
       />
       <path
         d='M4 2.5L2 4.5L4 6.5'
         stroke='currentColor'
-        strokeWidth='0.85'
+        strokeWidth='0.775'
         strokeLinecap='round'
         strokeLinejoin='round'
       />

packages/emcn/src/icons/zoom-in.tsx

@@ -20,28 +20,28 @@ export function ZoomIn(props: SVGProps<SVGSVGElement>) {
         cy='5'
         r='3.5'
         stroke='currentColor'
-        strokeWidth='0.85'
+        strokeWidth='0.775'
         strokeLinecap='round'
         strokeLinejoin='round'
       />
       <path
         d='M5 3.5V6.5'
         stroke='currentColor'
-        strokeWidth='0.85'
+        strokeWidth='0.775'
         strokeLinecap='round'
         strokeLinejoin='round'
       />
       <path
         d='M3.5 5H6.5'
         stroke='currentColor'
-        strokeWidth='0.85'
+        strokeWidth='0.775'
         strokeLinecap='round'
         strokeLinejoin='round'
       />
       <path
         d='M7.5 7.5L10.5 10.5'
         stroke='currentColor'
-        strokeWidth='0.85'
+        strokeWidth='0.775'
         strokeLinecap='round'
         strokeLinejoin='round'
       />

packages/emcn/src/icons/zoom-out.tsx

@@ -20,21 +20,21 @@ export function ZoomOut(props: SVGProps<SVGSVGElement>) {
         cy='5'
         r='3.5'
         stroke='currentColor'
-        strokeWidth='0.85'
+        strokeWidth='0.775'
         strokeLinecap='round'
         strokeLinejoin='round'
       />
       <path
         d='M3.5 5H6.5'
         stroke='currentColor'
-        strokeWidth='0.85'
+        strokeWidth='0.775'
         strokeLinecap='round'
         strokeLinejoin='round'
       />
       <path
         d='M7.5 7.5L10.5 10.5'
         stroke='currentColor'
-        strokeWidth='0.85'
+        strokeWidth='0.775'
         strokeLinecap='round'
         strokeLinejoin='round'
       />