fix(integrations): render one brand icon state everywhere

apps/sim/app/workspace/[workspaceId]/components/connect-oauth-modal/connect-oauth-modal.tsx

@@ -26,6 +26,7 @@ import {
   parseProvider,
 } from '@/lib/oauth'
 import { getScopeDescription, getServiceConfigByProviderId } from '@/lib/oauth/utils'
+import { withBrandIcon } from '@/blocks/brand-icon'
 import { useCreateCredentialDraft, useWorkspaceCredentials } from '@/hooks/queries/credentials'
 import { useConnectOAuthService } from '@/hooks/queries/oauth/oauth-connections'
 
@@ -49,11 +50,11 @@ function isHiddenScope(scope: string): boolean {
 function resolveService(
   provider: OAuthProvider,
   serviceId: string
-): { providerName: string; ProviderIcon: ServiceIcon } {
+): { providerName: string; ProviderIcon: ServiceIcon | null } {
   const { baseProvider } = parseProvider(provider)
   const baseProviderConfig = OAUTH_PROVIDERS[baseProvider]
   let providerName = baseProviderConfig?.name || provider
-  let ProviderIcon: ServiceIcon = baseProviderConfig?.icon || (() => null)
+  let ProviderIcon: ServiceIcon | null = baseProviderConfig?.icon ?? null
   if (baseProviderConfig) {
     for (const [key, service] of Object.entries(baseProviderConfig.services)) {
       if (key === serviceId || service.providerId === provider) {
@@ -355,7 +356,10 @@ export function ConnectOAuthModal(props: ConnectOAuthModalProps) {
 
   return (
     <ChipModal open={open} onOpenChange={onOpenChange} srTitle={title}>
-      <ChipModalHeader icon={ProviderIcon} onClose={handleClose}>
+      <ChipModalHeader
+        icon={ProviderIcon ? withBrandIcon(ProviderIcon) : null}
+        onClose={handleClose}
+      >
         {title}
       </ChipModalHeader>
       <ChipModalBody>

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/mention/mention-chip.test.tsx

@@ -72,7 +72,11 @@ describe('MentionChipView', () => {
       .filter((cls) => cls.startsWith('text-') || cls.startsWith('[&]:text-'))
     expect(ownTextUtilities).toEqual([])
 
-    // The icon's own monochrome fallback is unrelated and must be untouched by this fix.
-    expect(chip.className).toContain('[&>svg]:text-[var(--text-icon)]')
+    // The icon's monochrome fallback moved into `BrandIcon`, which owns the glyph color for every
+    // surface. A descendant color rule here would be a second, silently-losing source of truth.
+    expect(chip.className).not.toContain('[&>svg]:text-')
+    expect(container?.querySelector('svg')?.getAttribute('class')).toContain(
+      'text-[var(--text-icon)]'
+    )
   })
 })

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/mention/mention-chip.tsx

@@ -3,7 +3,7 @@ import { cn } from '@sim/emcn'
 import type { ReactNodeViewProps } from '@tiptap/react'
 import { NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react'
 import { useParams, useRouter } from 'next/navigation'
-import { getBareIconStyle, type StyleableIcon } from '@/blocks/brand-icon-style'
+import { BrandIcon, type StyleableIcon } from '@/blocks/brand-icon'
 import { mentionIcon } from './mention-icon'
 import { MarkdownMention, type MentionAttrs } from './mention-node'
 import { simLinkPath } from './sim-link'
@@ -13,8 +13,8 @@ import { simLinkPath } from './sim-link'
  * in `prompt-editor.tsx`): a borderless inline icon + label that flows with the
  * surrounding prose — no pill background, no padding, normal weight, body text
  * color, and a 12px icon. Integration icons keep their brand color via
- * {@link getBareIconStyle} (see {@link MentionChipView}); other kinds stay
- * monochrome through the `--text-icon` fallback below.
+ * {@link BrandIcon} (see {@link MentionChipView}); other kinds stay
+ * monochrome through its `--text-icon` fallback.
  *
  * No explicit label color — an element's own explicit `color` always wins over an inherited one
  * regardless of ancestor specificity, so hardcoding `--text-primary` here (redundant with the prose
@@ -24,7 +24,7 @@ import { simLinkPath } from './sim-link'
  * in rich-markdown-editor.css.
  */
 const CHIP_CLASS =
-  'mention-chip mx-px inline-flex items-center gap-1 align-middle leading-[1.5] [&>svg]:size-[12px] [&>svg]:shrink-0 [&>svg]:text-[var(--text-icon)]'
+  'mention-chip mx-px inline-flex items-center gap-1 align-middle leading-[1.5] [&>svg]:size-[12px] [&>svg]:shrink-0'
 
 /**
  * Live chip: an entity icon + label matching the chat input's mention rendering. Where the host opted
@@ -37,7 +37,6 @@ export function MentionChipView({ node, editor }: ReactNodeViewProps) {
   const params = useParams()
   const { kind, id, label } = node.attrs as MentionAttrs
   const Icon = mentionIcon(kind, id, label) as StyleableIcon | undefined
-  const iconStyle = Icon ? getBareIconStyle(Icon) : undefined
   const navigable = editor.storage.mentionMenu?.navigable === true
   const workspaceId = typeof params.workspaceId === 'string' ? params.workspaceId : undefined
   const path = navigable && workspaceId ? simLinkPath(workspaceId, kind, id) : null
@@ -55,7 +54,7 @@ export function MentionChipView({ node, editor }: ReactNodeViewProps) {
       onClick={path ? handleClick : undefined}
       title={label}
     >
-      {Icon && <Icon style={iconStyle} />}
+      {Icon && <BrandIcon icon={Icon} />}
       <span>{label}</span>
     </NodeViewWrapper>
   )

apps/sim/app/workspace/[workspaceId]/home/components/chat-context-kind-registry/chat-context-kind-registry.tsx

@@ -12,7 +12,7 @@ import {
 import { AgentSkillsIcon, McpIcon } from '@/components/icons'
 import { getDocumentIcon } from '@/components/icons/document-icons'
 import type { ChatContextKind, ChatMessageContext } from '@/app/workspace/[workspaceId]/home/types'
-import { getBareIconStyle } from '@/blocks/brand-icon-style'
+import { BrandIcon } from '@/blocks/brand-icon'
 import { getBlockRegistry } from '@/blocks/registry'
 
 interface RenderIconArgs {
@@ -42,8 +42,7 @@ function renderIntegrationTile({ context, className }: RenderIconArgs): ReactNod
   if (!context.blockType) return null
   const block = getBlockRegistry()[context.blockType]
   if (!block) return null
-  const Icon = block.icon
-  return <Icon className={className} style={getBareIconStyle(Icon)} />
+  return <BrandIcon icon={block.icon} className={className} />
 }
 
 /**

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

@@ -12,7 +12,7 @@ import {
 import { getReadTargetBlock } from '@/lib/copilot/tools/client/read-block'
 import { extractStreamingStringArgument } from '@/lib/copilot/tools/streaming-args'
 import { getToolStatusDisplayTitle, getWaitCountdownTitle } from '@/lib/copilot/tools/tool-display'
-import { getBareIconStyle } from '@/blocks/brand-icon-style'
+import { BrandIcon } from '@/blocks/brand-icon'
 import { getBlockByToolName } from '@/blocks/registry'
 import type { ToolCallData, ToolCallStatus } from '../../../../types'
 import { resolveToolDisplayState } from '../../utils'
@@ -237,12 +237,7 @@ export function ToolCallItem({
 
   return (
     <div className='flex items-center gap-[6px] pl-6'>
-      {BlockIcon && (
-        <BlockIcon
-          className='size-[14px] flex-shrink-0 text-[var(--text-icon)]'
-          style={getBareIconStyle(BlockIcon)}
-        />
-      )}
+      {BlockIcon && <BrandIcon icon={BlockIcon} className='size-[14px] flex-shrink-0' />}
       {isExecuting ? (
         <ShimmerText className='text-[13px] [--shimmer-rest:var(--text-secondary)]'>
           {title}

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { createElement, lazy, Suspense, useCallback, useEffect, useMemo, useState } from 'react'
+import { lazy, Suspense, useCallback, useEffect, useMemo, useState } from 'react'
 import {
   ArrowRight,
   Check,
@@ -61,6 +61,7 @@ import type {
 import { useServiceAccountConnectTarget } from '@/app/workspace/[workspaceId]/integrations/components/connect-service-account-modal/use-service-account-connect'
 import { useWorkspaceHostContext } from '@/app/workspace/[workspaceId]/providers/workspace-host-provider'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
+import { BrandIcon } from '@/blocks/brand-icon'
 import {
   useUpdateWorkspaceCredential,
   useWorkspaceCredential,
@@ -2160,7 +2161,7 @@ function ServiceAccountConnectDisplay({
           'hover-hover:bg-[var(--surface-5)]'
         )}
       >
-        {createElement(target.serviceIcon, { className: 'size-[16px] shrink-0' })}
+        <BrandIcon icon={target.serviceIcon} className='size-[16px] shrink-0' />
         <span className='flex-1 text-[var(--text-body)] text-sm'>{displayLabel}</span>
         {connected ? (
           <Check className='size-[16px] shrink-0 text-[var(--text-icon)]' />
@@ -2257,7 +2258,7 @@ function CredentialLinkDisplay({
         'hover-hover:bg-[var(--surface-5)]'
       )}
     >
-      {createElement(Icon, { className: 'size-[16px] shrink-0' })}
+      <BrandIcon icon={Icon} className='size-[16px] shrink-0' />
       <span className='flex-1 text-[var(--text-body)] text-sm'>{displayLabel}</span>
       {connected ? (
         <Check className='size-[16px] shrink-0 text-[var(--text-icon)]' />

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/resource-registry.tsx

@@ -20,7 +20,7 @@ import type {
   MothershipResource,
   MothershipResourceType,
 } from '@/app/workspace/[workspaceId]/home/types'
-import { getBareIconStyle, type StyleableIcon } from '@/blocks/brand-icon-style'
+import { BrandIcon, type StyleableIcon } from '@/blocks/brand-icon'
 import { logKeys } from '@/hooks/queries/logs'
 import { mothershipChatKeys } from '@/hooks/queries/mothership-chats'
 import { folderKeys } from '@/hooks/queries/utils/folder-keys'
@@ -85,10 +85,7 @@ function IntegrationDropdownItem({ item }: DropdownItemRenderProps) {
   if (!Icon) return <span className='truncate'>{item.name}</span>
   return (
     <>
-      <Icon
-        className='size-[14px] flex-shrink-0 text-[var(--text-icon)]'
-        style={getBareIconStyle(Icon)}
-      />
+      <BrandIcon icon={Icon} className='size-[14px] flex-shrink-0' />
       <span className='truncate'>{item.name}</span>
     </>
   )

apps/sim/app/workspace/[workspaceId]/home/components/suggested-actions/suggested-actions.tsx

@@ -16,7 +16,7 @@ import {
 } from '@/lib/integrations'
 import { captureEvent } from '@/lib/posthog/client'
 import { ConnectOAuthModal } from '@/app/workspace/[workspaceId]/components/connect-oauth-modal'
-import { getBareIconStyle } from '@/blocks/brand-icon-style'
+import { BrandIcon } from '@/blocks/brand-icon'
 import { getAllBlockMeta } from '@/blocks/registry'
 import type { ModuleTag } from '@/blocks/types'
 import { useWorkspaceCredentials } from '@/hooks/queries/credentials'
@@ -389,10 +389,7 @@ export function SuggestedActions({ onSelectPrompt }: SuggestedActionsProps) {
                     i > 0 && 'border-t'
                   )}
                 >
-                  <Icon
-                    className='size-[16px] flex-shrink-0 text-[var(--text-icon)]'
-                    style={getBareIconStyle(Icon)}
-                  />
+                  <BrandIcon icon={Icon} className='size-[16px] flex-shrink-0' />
                   <span className='flex-1 truncate text-[var(--text-body)] text-sm'>
                     {action.label}
                   </span>

apps/sim/app/workspace/[workspaceId]/integrations/components/connect-service-account-modal/client-credential-account-modal.tsx

@@ -20,6 +20,7 @@ import {
   type ClientCredentialAccountFieldId,
   partitionClientCredentialFields,
 } from '@/lib/credentials/client-credential-accounts/descriptors'
+import { withBrandIcon } from '@/blocks/brand-icon'
 import {
   useCreateWorkspaceCredential,
   useUpdateWorkspaceCredential,
@@ -214,7 +215,7 @@ export function ClientCredentialAccountModal({
       onOpenChange={onOpenChange}
       srTitle={`Add ${serviceName} ${descriptor.connectNoun}`}
     >
-      <ChipModalHeader icon={ServiceIcon} onClose={() => onOpenChange(false)}>
+      <ChipModalHeader icon={withBrandIcon(ServiceIcon)} onClose={() => onOpenChange(false)}>
         Add {serviceName} {descriptor.connectNoun}
       </ChipModalHeader>
       <ChipModalBody>

apps/sim/app/workspace/[workspaceId]/integrations/components/connect-service-account-modal/connect-service-account-modal.tsx

@@ -30,6 +30,7 @@ import {
 import { ClientCredentialAccountModal } from '@/app/workspace/[workspaceId]/integrations/components/connect-service-account-modal/client-credential-account-modal'
 import { TokenServiceAccountModal } from '@/app/workspace/[workspaceId]/integrations/components/connect-service-account-modal/token-service-account-modal'
 import { ConnectSlackBotModal } from '@/app/workspace/[workspaceId]/integrations/components/connect-slack-bot-modal/connect-slack-bot-modal'
+import { withBrandIcon } from '@/blocks/brand-icon'
 import {
   useCreateWorkspaceCredential,
   useUpdateWorkspaceCredential,
@@ -360,7 +361,7 @@ function GoogleServiceAccountModal({
       onOpenChange={onOpenChange}
       srTitle={`Add ${serviceName} service account`}
     >
-      <ChipModalHeader icon={ServiceIcon} onClose={() => onOpenChange(false)}>
+      <ChipModalHeader icon={withBrandIcon(ServiceIcon)} onClose={() => onOpenChange(false)}>
         Add {serviceName} service account
       </ChipModalHeader>
       <ChipModalBody>
@@ -512,7 +513,7 @@ function AtlassianServiceAccountModal({
       onOpenChange={onOpenChange}
       srTitle={`Add ${serviceName} service account`}
     >
-      <ChipModalHeader icon={ServiceIcon} onClose={() => onOpenChange(false)}>
+      <ChipModalHeader icon={withBrandIcon(ServiceIcon)} onClose={() => onOpenChange(false)}>
         Add {serviceName} service account
       </ChipModalHeader>
       <ChipModalBody>

apps/sim/app/workspace/[workspaceId]/integrations/components/connect-service-account-modal/token-service-account-modal.tsx

@@ -17,6 +17,7 @@ import {
   type TokenServiceAccountDescriptor,
   type TokenServiceAccountField,
 } from '@/lib/credentials/token-service-accounts/descriptors'
+import { withBrandIcon } from '@/blocks/brand-icon'
 import {
   useCreateWorkspaceCredential,
   useUpdateWorkspaceCredential,
@@ -141,7 +142,7 @@ export function TokenServiceAccountModal({
       onOpenChange={onOpenChange}
       srTitle={`Add ${serviceName} ${descriptor.connectNoun}`}
     >
-      <ChipModalHeader icon={ServiceIcon} onClose={() => onOpenChange(false)}>
+      <ChipModalHeader icon={withBrandIcon(ServiceIcon)} onClose={() => onOpenChange(false)}>
         Add {serviceName} {descriptor.connectNoun}
       </ChipModalHeader>
       <ChipModalBody>

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx

@@ -93,6 +93,7 @@ import { getDocumentIcon } from '@/app/workspace/[workspaceId]/knowledge/compone
 import { useRegisterGlobalCommands } from '@/app/workspace/[workspaceId]/providers/global-commands-provider'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { useContextMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/hooks'
+import { BrandIcon } from '@/blocks/brand-icon'
 import { CONNECTOR_META_REGISTRY } from '@/connectors/registry'
 import { useKnowledgeBase, useKnowledgeBaseDocuments } from '@/hooks/kb/use-knowledge'
 import {
@@ -1093,7 +1094,7 @@ export function KnowledgeBase({
                 {connector.status === 'syncing' ? (
                   <Loader className='size-[14px]' animate />
                 ) : (
-                  ConnectorIcon && <ConnectorIcon className='size-[14px]' />
+                  ConnectorIcon && <BrandIcon icon={ConnectorIcon} className='size-[14px]' />
                 )}
                 {connector.status !== 'active' && connector.status !== 'syncing' && (
                   <span

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-connector-modal/add-connector-modal.tsx

@@ -36,6 +36,7 @@ import { MaxBadge } from '@/app/workspace/[workspaceId]/knowledge/[id]/component
 import { useConnectorConfigFields } from '@/app/workspace/[workspaceId]/knowledge/[id]/hooks/use-connector-config-fields'
 import { useWorkspaceHostContext } from '@/app/workspace/[workspaceId]/providers/workspace-host-provider'
 import { getBlock } from '@/blocks'
+import { withBrandIcon } from '@/blocks/brand-icon'
 import { getTileIconColorClass } from '@/blocks/icon-color'
 import { CONNECTOR_META_REGISTRY } from '@/connectors/registry'
 import type { ConnectorMeta } from '@/connectors/types'
@@ -332,7 +333,7 @@ export function AddConnectorModal({
                         (cred): ComboboxOption => ({
                           label: cred.name || cred.provider,
                           value: cred.id,
-                          icon: connectorConfig.icon,
+                          icon: withBrandIcon(connectorConfig.icon),
                         })
                       ),
                       {

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/edit-connector-modal/edit-connector-modal.tsx

@@ -27,6 +27,7 @@ import type {
 } from '@/app/workspace/[workspaceId]/knowledge/[id]/hooks/use-connector-config-fields'
 import { useConnectorConfigFields } from '@/app/workspace/[workspaceId]/knowledge/[id]/hooks/use-connector-config-fields'
 import { useWorkspaceHostContext } from '@/app/workspace/[workspaceId]/providers/workspace-host-provider'
+import { withBrandIcon } from '@/blocks/brand-icon'
 import { CONNECTOR_META_REGISTRY } from '@/connectors/registry'
 import type { ConnectorConfigField, ConnectorMeta } from '@/connectors/types'
 import type { ConnectorData } from '@/hooks/queries/kb/connectors'
@@ -274,7 +275,7 @@ export function EditConnectorModal({
       size='md'
       dismissDisabled={isSaving}
     >
-      <ChipModalHeader icon={Icon ?? null} onClose={() => onOpenChange(false)}>
+      <ChipModalHeader icon={Icon ? withBrandIcon(Icon) : null} onClose={() => onOpenChange(false)}>
         Edit {displayName}
       </ChipModalHeader>
 

apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx

@@ -80,6 +80,7 @@ import {
 import { useRegisterGlobalCommands } from '@/app/workspace/[workspaceId]/providers/global-commands-provider'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { useContextMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/hooks'
+import { BrandIcon } from '@/blocks/brand-icon'
 import { CONNECTOR_META_REGISTRY } from '@/connectors/registry'
 import { useKnowledgeBasesList } from '@/hooks/kb/use-knowledge'
 import { useCreateFolder, useDeleteFolderMutation, useUpdateFolder } from '@/hooks/queries/folders'
@@ -167,8 +168,8 @@ function connectorCell(connectorTypes?: string[]): ResourceCell {
           return (
             <Tooltip.Root key={type}>
               <Tooltip.Trigger asChild>
-                <span className='flex size-5 flex-shrink-0 items-center justify-center rounded-md bg-[var(--surface-4)] text-[var(--text-secondary)]'>
-                  <Icon className='size-[13px]' />
+                <span className='flex size-5 flex-shrink-0 items-center justify-center rounded-md bg-[var(--surface-4)]'>
+                  <BrandIcon icon={Icon} className='size-[13px]' />
                 </span>
               </Tooltip.Trigger>
               <Tooltip.Content>{def.name}</Tooltip.Content>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/credential-selector.tsx

@@ -24,7 +24,7 @@ import { getWorkflowSearchLabelHighlight } from '@/app/workspace/[workspaceId]/w
 import { useDependsOnGate } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-depends-on-gate'
 import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value'
 import { useActiveSearchTarget } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/providers/active-search-target-provider'
-import { getBareIconStyle, type StyleableIcon } from '@/blocks/brand-icon-style'
+import { BrandIcon } from '@/blocks/brand-icon'
 import type { SubBlockConfig } from '@/blocks/types'
 import { useWorkspaceCredential, useWorkspaceCredentials } from '@/hooks/queries/credentials'
 import { useOAuthCredentials } from '@/hooks/queries/oauth/oauth-credentials'
@@ -233,8 +233,7 @@ export function CredentialSelector({
     if (!baseProviderConfig) {
       return <SquareArrowUpRight className='size-3' />
     }
-    const Icon: StyleableIcon = baseProviderConfig.icon
-    return <Icon className='size-3 text-[var(--text-icon)]' style={getBareIconStyle(Icon)} />
+    return <BrandIcon icon={baseProviderConfig.icon} className='size-3' />
   }, [])
 
   const getProviderName = useCallback((providerName: OAuthProvider) => {