fix(integrations): render one brand icon state everywhere

A service glyph was drawn three different ways depending on the surface:
brand-colored via getBareIconStyle, muted through --text-icon, or left to
inherit the surrounding text color. The same Dropbox icon therefore read
blue in suggested actions and grey in the connect modal.

Replace the loose helper with a single BrandIcon component (plus
withBrandIcon for component-shaped icon slots) that owns the color, and
migrate every bare call site to it. The tiled treatment (BlockTile /
IntegrationTile) is unchanged.

Author: waleedlatif1

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.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>