fix(icons): render brand icons legibly when bare and on light tiles

Monochrome brand icons hardcoded a single white or black fill matched to
their colored tile, so they vanished when rendered bare on the home
Suggested actions list (white-on-white in light mode, black-on-black in
dark mode). Convert those marks to currentColor so they adapt to context,
and make tile foregrounds contrast-aware via getTileIconColorClass instead
of a hardcoded text-white.

Also centralize all color math in apps/sim/lib/colors (perceived brightness,
hex/rgb/hsl conversion, contrast-text) and route every consumer through it:
the bare-icon audit, block tiles, logs trace view, whitelabeling theming,
workspace presence, and the PPTX renderer no longer carry duplicate copies.

Adds a bare-icon CI audit (scripts/check-bare-icons.ts) and authoring guidance.

Author: waleedlatif1

.claude/commands/add-block.md

@@ -732,6 +732,13 @@ Please provide the SVG and I'll convert it to a React component.
 You can usually find this in the service's brand/press kit page, or copy it from their website.
 ```
 
+When converting the SVG: a **monochrome** logo (single white or black mark) must
+use `fill='currentColor'`, never a hardcoded `#fff`/`#000000`. Block icons render
+both inside their `bgColor` tile and "bare" on a neutral page (the home Suggested
+actions list) in light and dark mode; a hardcoded white/black mark goes invisible
+bare on the matching background. Multi-color brand logos keep their own fills.
+Verify with `bun run check:bare-icons`.
+
 ## Advanced Mode for Optional Fields
 
 Optional fields that are rarely used should be set to `mode: 'advanced'` so they don't clutter the basic UI. This includes:

.claude/commands/add-integration.md

@@ -279,6 +279,31 @@ Once the user provides the SVG:
 2. Create a React component that spreads props
 3. Ensure viewBox is preserved from the original SVG
 
+### Theme-safety (bare rendering) — REQUIRED
+
+The icon renders both inside its colored `bgColor` tile AND "bare" (no tile) on a
+neutral page — e.g. the home **Suggested actions** list — in both light and dark
+mode. A monochrome logo whose paths hardcode a single near-white or near-black
+fill is invisible bare on the matching background (white-on-white in light mode,
+black-on-black in dark mode).
+
+Rules when adding the SVG:
+
+- **Monochrome logos** (a single white or black mark): draw the shape with
+  `fill='currentColor'`, not `fill='#fff'` / `fill='#000000'`. It then inherits
+  white inside dark tiles, near-black inside light tiles (via
+  `getTileIconColorClass`), and the theme-aware `var(--text-icon)` bare — legible
+  everywhere. Do NOT set `iconColor` for these.
+- **Multi-color brand logos** (their own vivid fills): keep the hardcoded fills.
+  They read on any background. Only set `iconColor` (a vivid brand hex, never a
+  near-black/near-white tile color) if the bare icon should adopt a brand tint.
+- A large white shape with a tiny vivid accent (e.g. a logo where the body is the
+  white negative space) still vanishes bare — convert the body to `currentColor`.
+
+Verify with `bun run check:bare-icons` (also runs in CI). It flags purely
+monochrome hazards; for partial-accent logos, eyeball the suggested-actions list
+in both light and dark mode.
+
 ## Step 5: Create Triggers (Optional)
 
 If the service supports webhooks, create triggers using the generic `buildTriggerSubBlocks` helper.
@@ -466,6 +491,7 @@ If creating V2 versions (API-aligned outputs):
 - [ ] Asked user to provide SVG
 - [ ] Added icon to `components/icons.tsx`
 - [ ] Icon spreads props correctly
+- [ ] Monochrome marks use `fill='currentColor'` (not hardcoded white/black) so the icon renders bare in light AND dark mode — verified with `bun run check:bare-icons`
 
 ### Triggers (if service supports webhooks)
 - [ ] Created `triggers/{service}/` directory

.github/workflows/test-build.yml

@@ -125,6 +125,9 @@ jobs:
       - name: Client boundary import audit
         run: bun run check:client-boundary
 
+      - name: Bare-icon theme-safety audit
+        run: bun run check:bare-icons
+
       - name: Verify realtime prune graph
         run: bun run check:realtime-prune
 

apps/sim/app/(landing)/components/landing-preview/components/landing-preview-panel/landing-preview-panel.tsx

@@ -20,6 +20,7 @@ import {
   TYPE_START_BUFFER_MS,
 } from '@/app/(landing)/components/landing-preview/components/landing-preview-workflow/workflow-data'
 import { trackLandingCta } from '@/app/(landing)/landing-analytics'
+import { getTileIconColorClass } from '@/blocks/icon-color'
 
 const AuthModal = dynamic(
   () => import('@/app/(landing)/components/auth-modal/auth-modal').then((m) => m.AuthModal),
@@ -389,7 +390,7 @@ function EditorTabContent({ editorPrompt, typedLength }: EditorTabContentProps)
             className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-sm'
             style={{ background: bgColor }}
           >
-            <BlockIcon className='h-[12px] w-[12px] text-white' />
+            <BlockIcon className={`h-[12px] w-[12px] ${getTileIconColorClass(bgColor)}`} />
           </div>
         )}
         <span className='min-w-0 flex-1 truncate font-medium text-[#e6e6e6] text-sm'>
@@ -456,7 +457,9 @@ function EditorTabContent({ editorPrompt, typedLength }: EditorTabContentProps)
                           className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-[4px]'
                           style={{ background: tool.bgColor }}
                         >
-                          <ToolIcon className='h-[10px] w-[10px] text-white' />
+                          <ToolIcon
+                            className={`h-[10px] w-[10px] ${getTileIconColorClass(tool.bgColor)}`}
+                          />
                         </div>
                       )}
                       <span className='font-normal text-[#e6e6e6] text-[12px]'>{tool.name}</span>

apps/sim/app/(landing)/components/landing-preview/components/landing-preview-workflow/preview-block-node.tsx

@@ -40,6 +40,7 @@ import {
   EASE_OUT,
   type PreviewTool,
 } from '@/app/(landing)/components/landing-preview/components/landing-preview-workflow/workflow-data'
+import { getTileIconColorClass } from '@/blocks/icon-color'
 
 /** Map block type strings to their icon components. */
 const BLOCK_ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
@@ -198,7 +199,7 @@ export const PreviewBlockNode = memo(function PreviewBlockNode({
                 className='flex size-[24px] flex-shrink-0 items-center justify-center rounded-[6px]'
                 style={{ background: bgColor }}
               >
-                {Icon && <Icon className='size-[16px] text-white' />}
+                {Icon && <Icon className={`size-[16px] ${getTileIconColorClass(bgColor)}`} />}
               </div>
               <span className='truncate font-medium text-[#e6e6e6] text-[16px]'>{name}</span>
             </div>
@@ -247,7 +248,11 @@ export const PreviewBlockNode = memo(function PreviewBlockNode({
                             className='flex size-[16px] flex-shrink-0 items-center justify-center rounded-[4px]'
                             style={{ background: tool.bgColor }}
                           >
-                            {ToolIcon && <ToolIcon className='size-[10px] text-white' />}
+                            {ToolIcon && (
+                              <ToolIcon
+                                className={`size-[10px] ${getTileIconColorClass(tool.bgColor)}`}
+                              />
+                            )}
                           </div>
                           <span className='font-normal text-[#e6e6e6] text-[12px]'>
                             {tool.name}

apps/sim/app/(landing)/integrations/components/integration-icon.tsx

@@ -1,5 +1,6 @@
 import type { ComponentType, ElementType, HTMLAttributes, SVGProps } from 'react'
 import { cn } from '@sim/emcn'
+import { getTileIconColorClass } from '@/blocks/icon-color'
 
 interface IntegrationIconProps extends HTMLAttributes<HTMLElement> {
   bgColor: string
@@ -39,7 +40,7 @@ export function IntegrationIcon({
       {...rest}
     >
       {Icon ? (
-        <Icon className={cn(iconClassName, 'text-white')} />
+        <Icon className={cn(iconClassName, getTileIconColorClass(bgColor))} />
       ) : (
         <span className={cn('text-white leading-none', fallbackClassName)}>{name.charAt(0)}</span>
       )}

apps/sim/app/workspace/[workspaceId]/integrations/[block]/integration-block-detail.tsx

@@ -19,6 +19,7 @@ import { ConnectServiceAccountModal } from '@/app/workspace/[workspaceId]/integr
 import { IntegrationSection } from '@/app/workspace/[workspaceId]/integrations/components/integration-section'
 import { IntegrationTile } from '@/app/workspace/[workspaceId]/integrations/components/integrations-showcase'
 import { CONNECT_MODE } from '@/app/workspace/[workspaceId]/integrations/connect-route'
+import { getTileIconColorClass } from '@/blocks/icon-color'
 import { storeCuratedPrompt } from '@/blocks/integration-matcher'
 import {
   getSuggestedSkillsForBlock,
@@ -176,7 +177,10 @@ export function IntegrationBlockDetail({ integration, workspaceId }: Integration
               <IntegrationTile blockType={integration.type} icon={Icon} />
             ) : (
               <div
-                className='flex size-9 flex-shrink-0 items-center justify-center rounded-xl border border-[var(--border-1)] text-white'
+                className={cn(
+                  'flex size-9 flex-shrink-0 items-center justify-center rounded-xl border border-[var(--border-1)]',
+                  getTileIconColorClass(integration.bgColor)
+                )}
                 style={{ background: integration.bgColor }}
               >
                 {integration.name.charAt(0)}

apps/sim/app/workspace/[workspaceId]/integrations/components/integrations-showcase/integrations-showcase.tsx

@@ -1,5 +1,7 @@
 import type { ComponentType } from 'react'
+import { cn } from '@sim/emcn'
 import { getBlock } from '@/blocks'
+import { getTileIconColorClass } from '@/blocks/icon-color'
 
 /**
  * URL-encoded SVG used as a mask to carve the bottom-right notch out of the
@@ -72,7 +74,7 @@ export function IntegrationTile({ blockType, icon: Icon, framed = false }: Integ
           className='flex size-full items-center justify-center rounded-xl border border-[var(--border-1)] bg-[var(--bg)]'
           style={brandBg ? { background: brandBg } : undefined}
         >
-          <Icon className='size-5 text-white' />
+          <Icon className={cn('size-5', getTileIconColorClass(brandBg))} />
         </div>
       </div>
     )
@@ -84,7 +86,7 @@ export function IntegrationTile({ blockType, icon: Icon, framed = false }: Integ
         className='flex size-full items-center justify-center rounded-[9px] border border-[var(--border-1)] bg-[var(--bg)]'
         style={brandBg ? { background: brandBg } : undefined}
       >
-        <Icon className='size-6 text-white' />
+        <Icon className={cn('size-6', getTileIconColorClass(brandBg))} />
       </div>
     </div>
   )

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 { isBillingEnabled } from '@/app/workspace/[workspaceId]/settings/navigation'
 import { getBlock } from '@/blocks'
+import { getTileIconColorClass } from '@/blocks/icon-color'
 import { CONNECTOR_META_REGISTRY } from '@/connectors/registry'
 import type { ConnectorMeta } from '@/connectors/types'
 import { useCreateConnector } from '@/hooks/queries/kb/connectors'
@@ -477,7 +478,12 @@ function ConnectorTypeCard({ type, config, onClick }: ConnectorTypeCardProps) {
           )}
           style={brandBg ? { background: brandBg } : undefined}
         >
-          <Icon className={cn('size-5', brandBg ? 'text-white' : 'text-[var(--text-icon)]')} />
+          <Icon
+            className={cn(
+              'size-5',
+              brandBg ? getTileIconColorClass(brandBg) : 'text-[var(--text-icon)]'
+            )}
+          />
         </div>
       </div>
       <div className='flex min-w-0 flex-1 flex-col'>

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connectors-section/connectors-section.tsx

@@ -22,6 +22,7 @@ import { getMissingRequiredScopes } from '@/lib/oauth/utils'
 import { ConnectOAuthModal } from '@/app/workspace/[workspaceId]/components/connect-oauth-modal'
 import { EditConnectorModal } from '@/app/workspace/[workspaceId]/knowledge/[id]/components/edit-connector-modal/edit-connector-modal'
 import { getBlock } from '@/blocks'
+import { getTileIconColorClass } from '@/blocks/icon-color'
 import { CONNECTOR_META_REGISTRY } from '@/connectors/registry'
 import type { ConnectorData, SyncLogData } from '@/hooks/queries/kb/connectors'
 import {
@@ -346,7 +347,10 @@ function ConnectorCard({
             >
               {Icon && (
                 <Icon
-                  className={cn('size-5', brandBg ? 'text-white' : 'text-[var(--text-icon)]')}
+                  className={cn(
+                    'size-5',
+                    brandBg ? getTileIconColorClass(brandBg) : 'text-[var(--text-icon)]'
+                  )}
                 />
               )}
             </div>