Skip to content

Icons: replace default hardcoded color with currentColor #6869

@talissoncosta

Description

@talissoncosta

Problem

~60 SVG icons in Icon.tsx use hardcoded fill colours that break dark mode and prevent CSS classes from controlling icon colour. The main offenders:

  • 41x fill={fill || '#1A2634'} — dark navy, invisible on dark backgrounds
  • 4x fill={fill || '#9DA4AE'} — grey, poor contrast in dark mode
  • 2x fill={fill || '#656D7B'} — grey, poor contrast in dark mode
  • 7x fill={fill} — no fallback, renders nothing when no fill prop passed
  • 2x fill={fill ?? '#000000'} — black, invisible in dark mode
  • 1x fill={fill || 'white'} (plus icon) — invisible in light mode, callers always override

Inline fill attributes always win over CSS, so utility classes like fill-body, fill-primary, and hover-color-primary can't control icon colour.

Files

  • web/components/Icon.tsx — all changes in one file

Fix

Replace all hardcoded fills with fill={fill || 'currentColor'}. This inherits the text colour from the parent element, working in both light and dark mode automatically.

Icons with intentional semantic colours are left unchanged:

  • nav-logo — white (sits on dark navbar)
  • info — cyan (#0AADDF)
  • warning — orange (#FF9F43)
  • close-circle — red (#EF4D56)
  • checkmark-square — purple (#6837FC)
  • required — blue (#4285F4)
  • google, pr-merged, pr-closed, pr-linked, issue-closed, issue-linked — brand colours baked into SVG paths

Additional findings

10 unused icons (zero references in application code): dash, diff, edit-outlined, email, layout, nav-logo, paste, required, settings-2, star. Candidates for removal in a follow-up.

Impact

  • Fixes ~57 broken icons in dark mode in one go
  • Highest ROI fix in the entire design system audit
  • Unblocks QW-9 (SidebarLink hover) and QW-2 (hardcoded colours in components)
  • After this change, CSS utility classes control icon colour without inline overrides

Acceptance Criteria

  • No instances of #1A2634 or #1a2634 remain in Icon.tsx
  • All generic icons use currentColor as the default fill/stroke
  • Icons render correctly in light mode (inherit dark text colour)
  • Icons render correctly in dark mode (inherit light text colour)
  • npm run typecheck passes
  • npx eslint --fix passes

Context

Part of the design system audit (#6606). See frontend/DESIGN_SYSTEM_ISSUES.md on chore/design-system-audit-6606 branch (QW-1). This is the top-priority fix — highest ROI in the entire audit.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions