Stage 1 & 2: Lock Your Primary Library and Record SPDX Licenses

Begin in the 29-library overview on SVG Nexus and designate one primary pack (for example, Lucide under ISC, Tabler under MIT, or Phosphor under MIT). Immediately commit that pack's LICENSE.txt notice into a THIRD_PARTY_NOTICES.md file in your repository so compliance is automated before the first component ships.

Stage 3: Normalize Grid, Stroke Weight, and Color Tokens

Verify every candidate icon inside the Online SVG Editor against three invariants: a standard viewBox="0 0 24 24" (or your chosen system grid), consistent stroke-width (1.75 or 2), and currentColor on monochrome strokes/fills so light and dark themes work automatically.

Stage 4 & 5: Sanitize, Optimize, and Compile to the Right Format

Pass custom exports through the SVG Optimizer (Web preset for web apps, App preset for mobile) to remove editor metadata and check real byte reduction. Then pick your delivery format deliberately:

  • Typed TSX/Vue/Svelte component: For interactive UI controls rendered via React Server Components or client state.
  • Scoped <symbol> sprite: When the same 10–35 icons repeat across dense tables or server-rendered HTML pages.
  • Static <img src="..."> or WebP: For multi-kilobyte hero illustrations or email/social fallbacks.

Stage 6: Accessibility, RTL, and Bundle Verification

Production-ready accessible icon-only button pattern
<button
  type="button"
  aria-label="Copy API endpoint"
  className="inline-flex h-9 w-9 items-center justify-center rounded-lg text-slate-700 hover:bg-slate-100 dark:text-slate-200"
>
  <CopyIcon className="h-4 w-4 shrink-0" aria-hidden="true" focusable="false" />
</button>

Finish with a quick four-point check: decorative icons carry aria-hidden="true", icon-only buttons declare an explicit aria-label, directional chevrons mirror under [dir="rtl"] (e.g., Tailwind rtl:rotate-180), and icon imports point directly to individual files rather than giant barrel modules.