Refactor Icon.tsx: split 70 inline SVGs into individual files

[talissoncosta]

Problem

Icon.tsx is 1,543 lines / 87KB containing 70+ inline SVGs in a single switch statement. Additionally, 19 separate SVG components exist in web/components/svg/ and 3 icons use @ionic/react IonIcon — 3 icon systems total.

Performance impact

• 87KB parsed on every page load even if only 3 icons are used
• Not tree-shakable — bundler includes all 70 icons regardless of usage
• No lazy loading — heavy icons (GitHub SVGs) load on pages that don't need them

For non-frontend context

Think of it like importing an entire Python library when you only need one function. Tree-shaking (the bundler excluding unused code) only works with proper module imports, not giant switch statements.

Solution

1. Extract each icon to its own file (e.g. components/icons/CloseIcon.tsx)
2. Integrate the 19 svg/ components into the same system
3. Keep the <Icon name="..." /> API as a convenience wrapper that dynamically imports
4. Bundlers tree-shake unused icons automatically

// Before: 87KB loaded regardless
<Icon name="close" />

// After: only this icon is bundled
import { CloseIcon } from 'components/icons/CloseIcon'
<CloseIcon />

Acceptance criteria

• Each icon in its own file
• svg/ components integrated
• Existing <Icon name="..." /> API still works
• Measurable reduction in initial bundle size
• No visual regressions

---

Part of the Design System Audit (#6606) · Epic: #6882