Web Typography

---
name: web-typography
description: >-
  Sistema de decisao tipografica em 7 passos: tipo de app, tom da marca,
  combo de fontes, biblioteca de icones, escala tipografica, loading e
  implementacao. Inclui 14 combinacoes pre-curadas por cenario e regras de
  pareamento fonte-icone.
license: Apache-2.0
compatibility: claude-code
allowed-tools: Read Write Edit Glob
metadata:
  author: vector-labs
  version: "1.0"
tags: [design, typography, fonts]
complexity: beginner
---

# Web Typography

Select fonts, type pairings, and icon libraries for web apps through a structured decision workflow.

## Decision Workflow

### Step 1: Identify app type

Ask or infer from context:

| App Type | Typography Priority |
|---|---|
| SaaS / Dashboard | Data density, numeric clarity, readability at small sizes |
| Marketing / Landing | Visual impact, personality, clear heading/body hierarchy |
| Documentation | Long-form readability, code block integration |
| E-commerce | Scannability, trust, premium feel for campaigns |
| Portfolio / Creative | Personality, visual distinction, memorable type |
| Corporate / Enterprise | Professionalism, trust, accessibility |

### Step 2: Determine brand tone

- **Neutral/Professional** → Inter, Geist, Source Sans 3
- **Friendly/Modern** → DM Sans, Plus Jakarta Sans, Manrope
- **Premium/Editorial** → Serif headings (Playfair Display, Instrument Serif) + sans body
- **Technical/Developer** → Geist, Space Grotesk, JetBrains Mono for code
- **Playful/Creative** → Cabinet Grotesk, Syne, Epilogue

### Step 3: Pick from quick-start combos

| App Type | Heading | Body | Icons | When to use |
|---|---|---|---|---|
| SaaS (safe default) | Inter 600 | Inter 400 | Lucide | Proven, neutral, works everywhere |
| SaaS (modern) | Geist 600 | Geist 400 | Lucide | Next.js ecosystem, web-native feel |
| SaaS (friendly) | Plus Jakarta Sans | DM Sans | Phosphor | Startup, product-led growth |
| Marketing | Playfair Display | Inter | Lucide | Premium, authoritative |
| Marketing (bold) | Bebas Neue | Open Sans | Remix | High-impact hero sections |
| Docs | Inter 600 | Inter 400 + Fira Code | Lucide | Industry standard (Tailwind, Vercel) |
| E-commerce | Playfair Display | Montserrat | Phosphor | Luxury/fashion/lifestyle |
| Portfolio | Syne | Satoshi | Phosphor | Tech-creative studios |
| Corporate | Source Sans 3 | Source Sans 3 | Lucide | Mature, trustworthy, wide language support |

For deeper exploration of all available fonts and pairings, read [references/font-catalog.md](references/font-catalog.md).

### Step 4: Select icon library

| Need | Library | Why |
|---|---|---|
| General purpose (default) | **Lucide** (1,600+ icons) | Best balance: count, consistency, tree-shaking, community |
| Weight variation / design system | **Phosphor** (1,500+ base, 6 weights) | Map icon weight to typography weight systematically |
| Maximum coverage | **Tabler** (6,000+ icons) | Largest free MIT set, good for complex admin UIs |
| Tailwind ecosystem | **Heroicons** (292 icons, 4 styles) | Small but impeccable, by Tailwind Labs |

Match icon stroke to font weight: Regular (400) text pairs with 1.5-2px stroke icons (Lucide default, Phosphor Regular). Bold (600-700) text pairs with filled/solid icons.

For full comparison of all libraries, read [references/icon-catalog.md](references/icon-catalog.md).

### Step 5: Implement type scale

Use Major Third (1.250) as default ratio. Adjust for app type:

| Ratio | Name | Best for |
|---|---|---|
| 1.125 | Major Second | Dense dashboards, admin panels |
| 1.200 | Minor Third | Compact apps, data-rich interfaces |
| **1.250** | **Major Third** | **Most web apps (recommended default)** |
| 1.333 | Perfect Fourth | Marketing sites, editorial |

#### CSS custom properties with fluid sizing

```css
:root {
  --fs-xs:   clamp(0.64rem, 0.6rem + 0.15vw, 0.7rem);
  --fs-sm:   clamp(0.8rem, 0.77rem + 0.15vw, 0.875rem);
  --fs-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --fs-lg:   clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  --fs-xl:   clamp(1.35rem, 1.15rem + 0.85vw, 1.563rem);
  --fs-2xl:  clamp(1.6rem, 1.3rem + 1.2vw, 1.953rem);
  --fs-3xl:  clamp(1.95rem, 1.5rem + 1.75vw, 2.441rem);
  --fs-4xl:  clamp(2.4rem, 1.75rem + 2.5vw, 3.052rem);

  --lh-tight:  1.1;   /* h1, h2 */
  --lh-snug:   1.25;  /* h3, h4 */
  --lh-normal: 1.5;   /* body */
  --lh-relaxed: 1.65; /* small text, captions */

  --ls-tight: -0.025em;  /* headings */
  --ls-wide:   0.025em;  /* all-caps, small labels */
}
```

### Step 6: Font loading

1. **WOFF2 only** — 97%+ support, best compression
2. **Self-host or Fontsource** — `npm install @fontsource-variable/inter`
3. **`font-display: swap`** for body, **`optional`** for display headings
4. **Preload 1-2 critical files** — `<link rel="preload" href="/fonts/inter-variable.woff2" as="font" type="font/woff2" crossorigin>`
5. **Variable fonts** over multiple static files
6. **Subset** to Latin + Latin Extended-A for 90%+ size reduction

```css
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
```

Fallback stack: `'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;`

### Step 7: Icon implementation

Default pattern — npm with tree-shaking:

```tsx
// npm install lucide-react
import { Home, Settings, User } from 'lucide-react';

<Home size={20} strokeWidth={1.5} />
```

For prototypes/landing pages, CDN is fine:
```html
<script src="https://unpkg.com/lucide@latest"></script>
<script>lucide.createIcons();</script>
```

## References

- **[references/font-catalog.md](references/font-catalog.md)** — Full inventory of 40+ free fonts by category, curated pairings by app type with rationale, trending fonts 2025-2026. Read when exploring options beyond the quick-start combos.
- **[references/icon-catalog.md](references/icon-catalog.md)** — Detailed comparison of 8 icon libraries (counts, styles, formats, pros/cons), icon-typography weight matching rules, SVG vs icon font analysis, implementation patterns by project type. Read when selecting or comparing icon libraries.

# Font Catalog

Free fonts curated for web apps. All fonts below are free for personal and commercial use.

## Table of Contents

- [Sans-Serif (UI / Body)](#sans-serif-ui--body)
- [Serif (Editorial / Premium)](#serif-editorial--premium)
- [Display / Heading](#display--heading)
- [Monospace (Code Blocks)](#monospace-code-blocks)
- [Pairings by App Type](#pairings-by-app-type)
- [Trending Fonts 2025-2026](#trending-fonts-2025-2026)
- [Font Sources](#font-sources)

---

## Sans-Serif (UI / Body)

| Font | Source | Character | Best for |
|---|---|---|---|
| **Inter** | Google Fonts | Tall x-height, generous counters, variable with optical sizing. The de facto UI standard. | SaaS, dashboards, docs, enterprise |
| **Geist** | Google Fonts / Vercel CDN | Modern, geometric, web-native. Default in Next.js 15+. | Next.js apps, developer tools, modern SaaS |
| **Satoshi** | Fontshare | Swiss modernist. Rounded shapes + angular details. 5 weights. | Modern branding, portfolios, premium SaaS |
| **DM Sans** | Google Fonts | Rounded corners, open apertures, generous spacing. | Mobile-first, onboarding flows, friendly SaaS |
| **Manrope** | Google Fonts | Geometric, rounded corners. Excellent numeric clarity. Variable. | Fintech, dashboards with heavy numeric data |
| **General Sans** | Fontshare | Versatile, modern, balanced. Softer feel than Inter. | Brands wanting warmth without sacrificing clarity |
| **Switzer** | Fontshare | Neo-grotesk, 79% x-height. 18 styles. | Data-dense dashboards, small screen sizes |
| **Source Sans 3** | Google Fonts | Adobe's open-source workhorse. Clean, mature, wide language support. | Corporate, enterprise, multilingual apps |
| **Poppins** | Google Fonts | Geometric, friendly, open. Works at display and text sizes. | Consumer apps, landing pages |
| **Roboto** | Google Fonts | Google's system font. Mature, comprehensive character set. | Material Design apps, Android-adjacent |
| **Cabinet Grotesk** | Fontshare | Pinched strokes, curvy terminals. Editorial + playful. | Agency sites, editorial web apps |
| **Plus Jakarta Sans** | Google Fonts | Friendly, geometric, modern. Gaining traction in startups. | Startup SaaS, product-led growth tools |
| **Outfit** | Google Fonts | Geometric variable font. Versatile from display to UI. | Modern corporate, refreshed enterprise |

## Serif (Editorial / Premium)

| Font | Source | Character | Best for |
|---|---|---|---|
| **Playfair Display** | Google Fonts | High-contrast, elegant. On 3.7M+ websites. | Luxury headlines, fashion, editorial heroes |
| **DM Serif Display** | Google Fonts | Warm, expressive display serif. Pairs naturally with DM Sans. | Marketing headers, boutique retail |
| **Instrument Serif** | Google Fonts | Condensed, high-contrast, confident. | Landing page headlines, premium positioning |
| **Lora** | Google Fonts | Contemporary with calligraphic roots. Screen-optimized. | Blog headers, content-rich sites |
| **Merriweather** | Google Fonts | Designed for on-screen reading. | Long-form articles, documentation headers |
| **Cormorant Garamond** | Google Fonts | Renaissance elegance. On 2M+ websites. | Luxury branding, artisan products |
| **Newsreader** | Google Fonts | 14 styles including variable. Built for editorial at reading sizes. | News sites, editorial platforms |
| **Spectral** | Google Fonts | Refined, dynamic curves. Adds authority. | Technical editorial, research publications |
| **Libertinus Serif** | Google Fonts | Even rhythm, predictable spacing, calm texture. | Academic, reading-heavy apps |

## Display / Heading

| Font | Source | Character | Best for |
|---|---|---|---|
| **Bebas Neue** | Google Fonts | All-caps, condensed, bold. Maximum impact. | Hero sections, marketing headlines |
| **Syne** | Google Fonts | Geometric, quirky, modern. | Creative/tech-forward brands, studios |
| **Space Grotesk** | Google Fonts | Geometric, technical feel. Companion to Space Mono. | Developer portfolios, tech products |
| **Epilogue** | Google Fonts | Slightly quirky, variable. | Portfolios, design studios |
| **Josefin Sans** | Google Fonts | Elegant, geometric, vintage-modern. High crossbar. | Lifestyle brands, fashion |

## Monospace (Code Blocks)

| Font | Source | Why |
|---|---|---|
| **Geist Mono** | Google Fonts / Vercel | Clean, readable. Pairs with Geist Sans. |
| **JetBrains Mono** | Google Fonts | Increased x-height, coding ligatures. Developer favorite. |
| **Fira Code** | Google Fonts | Coding ligatures, excellent character distinction. Industry standard. |
| **Source Code Pro** | Google Fonts | Clean, mature. Good for inline code in UI. |
| **Inconsolata** | Google Fonts | Minimal, elegant, precise. Excellent at small sizes. |

---

## Pairings by App Type

### SaaS / Dashboard

| Heading | Body | Notes |
|---|---|---|
| Inter 600 | Inter 400 | Single-family. Safest choice. Variable weight handles hierarchy. |
| Geist 600 | Geist 400 | Single-family. Modern, web-native. Ideal for Next.js. |
| Manrope | Inter | Rounded geometry headings + neutral body. Great for fintech. |
| Switzer | Switzer | Neo-grotesk optimized for dense data. 79% x-height. |
| Plus Jakarta Sans | DM Sans | Friendly, modern. Startup-friendly. |
| Montserrat 600 | Source Sans 3 | Strong geometric headers + clean scannable body. Classic admin UI. |

### Marketing / Landing Pages

| Heading | Body | Notes |
|---|---|---|
| Playfair Display | Inter | High editorial contrast. Premium, authoritative SaaS marketing. |
| DM Serif Display | DM Sans | Cohesive DM family. Elegant headers, clean body. |
| Bebas Neue | Open Sans | Bold impactful headlines + neutral readable body. |
| Syne | Inter | Tech-forward quirky headings. Modern startup positioning. |
| Space Grotesk | General Sans | Technical heading energy + softer body. |
| Instrument Serif | Satoshi | Premium editorial headline + modernist Swiss body. |

### Documentation Sites

| Heading | Body | Mono | Notes |
|---|---|---|---|
| Inter 600 | Inter 400 | Fira Code | The standard. Used by Tailwind, Vercel docs. |
| Geist | Geist | Geist Mono | Complete Vercel ecosystem. Cohesive. |
| Source Sans 3 | Source Sans 3 | Source Code Pro | Adobe Source family. Designed to work together. |
| Manrope | Inter | JetBrains Mono | Friendly headings, neutral body, developer-loved code font. |

### E-Commerce

| Heading | Body | Notes |
|---|---|---|
| Playfair Display | Montserrat | Premium/luxury. Fashion, beauty, lifestyle. |
| Cormorant Garamond | Poppins | Renaissance elegance + geometric friendliness. Artisan products. |
| Montserrat | Open Sans | Clean, modern, trustworthy. General-purpose. |
| DM Serif Display | DM Sans | Warm, sophisticated. Home goods, premium food. |
| Josefin Sans | Lato | Vintage-modern heading + reliable neutral body. Lifestyle brands. |

### Creative / Portfolio

| Heading | Body | Notes |
|---|---|---|
| Epilogue | General Sans | Quirky + soothing. Studios, agencies. |
| Syne | Satoshi | Bold geometric personality + Swiss modernist body. Tech-creative. |
| Cabinet Grotesk | Inter | Editorial playfulness + neutral body. Design agencies. |
| Bebas Neue | Karla | High-impact headlines + warm quirky body. Photography, film. |
| Space Grotesk | DM Sans | Technical/geometric energy. Developer portfolios. |

### Corporate / Enterprise

| Heading | Body | Notes |
|---|---|---|
| Inter | Inter | Industry standard. Clean, professional, accessible. |
| Roboto | Roboto | Google Material ecosystem. Proven at massive scale. |
| Source Sans 3 | Source Sans 3 | Neutral, trustworthy, excellent language support. |
| Manrope | Source Sans 3 | Geometric warmth headings + mature body. Approachable enterprise. |
| Lora | Open Sans | Serif warmth for headers + universally readable body. Legal, finance. |

---

## Trending Fonts 2025-2026

| Font | Source | Trend |
|---|---|---|
| **Geist / Geist Mono** | Vercel (now on Google Fonts) | Default in Next.js. The "developer-first" font. |
| **Satoshi** | Fontshare | Go-to alternative when you want fresher than Inter. |
| **General Sans** | Fontshare | The "softer Inter" for warmth without sacrificing clarity. |
| **Cabinet Grotesk** | Fontshare | Editorial-meets-web. Growing in agency/portfolio sites. |
| **Switzer** | Fontshare | Neo-grotesk for dense UIs. Increasing SaaS adoption. |
| **Plus Jakarta Sans** | Google Fonts | Gaining traction in startup and product design. |
| **Instrument Serif** | Google Fonts | Condensed display serif. Rising for landing page headlines. |
| **Outfit** | Google Fonts | Geometric variable font. Versatile from display to UI. |

### Key trends

1. **Fontshare eating into Google Fonts' dominance** — ITF's free platform produces fonts (Satoshi, General Sans, Switzer) becoming default choices in modern product design.
2. **Variable fonts are the expectation** — Single file covering full weight/width range preferred over static files.
3. **Single-family typography systems gaining favor** — One font (Inter, Geist, Satoshi) across all hierarchy levels with weight variation is now dominant in SaaS/product.
4. **Geometric sans-serifs dominate** — High x-heights optimized for screen readability.
5. **Serif comeback for marketing pages** — Creating contrast against sans-serif product UIs.

---

## Font Sources

| Source | URL | Licensing |
|---|---|---|
| Google Fonts | fonts.google.com | SIL Open Font License (free, commercial OK) |
| Fontshare | fontshare.com | ITF Free Font License (free, commercial OK) |
| Fontsource (npm) | fontsource.org | Packages Google Fonts + others for npm with tree-shaking |
| Vercel Geist CDN | vercel.com/font | SIL Open Font License |

# Icon Catalog

Free icon libraries for web apps. Comparison, selection guide, and implementation patterns.

## Table of Contents

- [Library Comparison](#library-comparison)
- [Detailed Profiles](#detailed-profiles)
- [Icon-Typography Pairing](#icon-typography-pairing)
- [SVG vs Icon Font](#svg-vs-icon-font)
- [Implementation Patterns](#implementation-patterns)

---

## Library Comparison

| Library | Icons | Styles | Tree-Shakable | Framework Support | License |
|---|---|---|---|---|---|
| **Lucide** | 1,600+ | Outline (2px stroke) | Yes | React, Vue, Svelte, Solid, Angular, Preact, Web Components | MIT |
| **Phosphor** | 1,500+ base (9,000+ with weights) | Thin, Light, Regular, Bold, Fill, Duotone | Yes | React, Vue, Svelte, Elm, Flutter | MIT |
| **Tabler** | 6,000+ | Outline (customizable stroke) | Yes | React, Vue, Svelte, Solid, Preact | MIT |
| **Heroicons** | 292 | Outline, Solid, Mini (20px), Micro (16px) | Yes | React, Vue | MIT |
| **Material Symbols** | 2,500+ | Outlined, Rounded, Sharp + variable axes | Partial | React (via MUI) | Apache 2.0 |
| **Remix Icons** | 3,200+ | Outlined, Filled | Yes | React | Apache 2.0 |
| **Bootstrap Icons** | 2,000+ | Outline, Fill | Partial | Framework-agnostic | MIT |
| **Feather** | 287 | Outline only | Yes | React | MIT (**abandoned**) |

---

## Detailed Profiles

### Lucide (Recommended Default)
- Fork of Feather Icons, actively maintained with weekly additions
- Consistent 24x24 grid, 2px stroke
- Excellent tree-shaking: only imported icons enter the bundle
- **Best for**: General-purpose web/app UI
- **Limitation**: Outline only (no filled/duotone)
- `npm install lucide-react`

### Phosphor (Best for Design Systems)
- 6 weights per icon — unmatched weight variation
- Duotone style: background layer at 20% opacity, great for feature illustrations and empty states
- Systematic weight mapping to typography scale
- **Best for**: Design systems needing icon-typography weight coupling
- **Limitation**: Slightly smaller base count than Lucide/Tabler
- `npm install @phosphor-icons/react`

### Tabler (Largest Free Set)
- 6,000+ icons — widest coverage from a single library
- Customizable stroke width and size
- 24x24 grid, 2px default stroke
- **Best for**: Complex admin UIs, SaaS with many distinct features
- **Limitation**: Outline only, quality slightly less consistent than smaller curated sets
- `npm install @tabler/icons-react`

### Heroicons (Tailwind Ecosystem)
- By Tailwind Labs — impeccable quality, small curated set
- 4 size variants: Outline/Solid (24px), Mini (20px), Micro (16px)
- Micro variant is excellent for dense, high-information UIs
- **Best for**: Tailwind CSS projects, small-to-medium apps
- **Limitation**: Only ~292 icons — will hit gaps for niche icons
- `npm install @heroicons/react`

### Material Symbols (Variable Font)
- Only library with variable axes: Fill (0-100), Weight (100-700), Grade (-50 to 200), Optical Size (20-48px)
- Optical size auto-adjusts stroke weight at different sizes
- **Best for**: Material Design / MUI apps
- **Limitation**: Distinctly "Google" aesthetic, large font file (4-6MB full set), loads all icons
- Via Google Fonts CSS or `@mui/icons-material`

### Remix Icons
- Good balance: 3,200+ icons with both outline and fill per icon
- Neutral style works across aesthetics
- **Best for**: General-purpose where you need outline + fill
- **Limitation**: Smaller community, slower update cadence
- `npm install remixicon`

### Others Worth Knowing
- **Iconoir** (~1,600, outline, MIT) — Strong Lucide alternative
- **Radix Icons** (~300, outline) — Small but extremely high quality, for Radix UI
- **css.gg** (~700, pure CSS) — No SVG/font, CSS-only icons

---

## Icon-Typography Pairing

### Matching Stroke Weight to Font Weight

| Typography Weight | Icon Approach |
|---|---|
| Light/Thin (300-) | Thin stroke (1px). Phosphor Thin/Light. |
| Regular (400) | Standard 1.5-2px stroke. Lucide, Heroicons Outline, Tabler default, Phosphor Regular. |
| Medium (500) | Slightly heavier stroke or Phosphor Bold. |
| Semi-Bold/Bold (600-700) | Filled/solid icons. Heroicons Solid, Phosphor Bold/Fill, Remix Fill. |

### Proven Pairings

| Font | Icon Library | Why it works |
|---|---|---|
| Inter 400 | Lucide | Clean geometric sans + geometric 2px stroke outlines |
| Inter 400 | Phosphor Regular | Balanced stroke weight at body sizes |
| Geist | Lucide or Phosphor | Geometric precision matches both libraries |
| System UI / SF Pro | Heroicons | Designed together for Tailwind ecosystem |
| Roboto | Material Symbols | Canonical Material Design pairing, variable weight tuning |
| Poppins / Nunito | Material Symbols Rounded | Rounded terminals match rounded typefaces |

### By Typeface Category

| Typeface Style | Icon Style |
|---|---|
| Sans-serif (Inter, Geist, Helvetica) | Clean geometric strokes: Lucide, Phosphor, Heroicons, Tabler |
| Serif (Merriweather, Lora) | Refined strokes: Phosphor Light, Material Symbols Outlined low-weight |
| Monospace (JetBrains Mono, Fira Code) | Sharp precise: Heroicons Micro, Material Symbols Sharp, tight-stroke Tabler |
| Rounded (Poppins, Nunito) | Rounded terminals: Material Symbols Rounded |
| Display/Decorative | Match personality: Phosphor Duotone (playful), Phosphor Bold (punchy), filled for heavy display |

### Phosphor Weight Mapping (Design Systems)

```
h1 (Bold 700)       → Phosphor Bold or Fill
h2 (Semi-Bold 600)  → Phosphor Bold
h3 (Medium 500)     → Phosphor Regular or Bold
body (Regular 400)   → Phosphor Regular
caption (Light 300)  → Phosphor Light
```

---

## SVG vs Icon Font

**SVG is the recommended default in 2025-2026.** Icon fonts are legacy.

| Approach | Initial Load (few) | Initial Load (many) | Cached | Customization | Accessibility |
|---|---|---|---|---|---|
| Inline SVG | Excellent | Good | N/A (in bundle) | Full (multi-color, animate per path) | Excellent |
| SVG Sprite | Good | Excellent | Excellent | Good (currentColor, size) | Good |
| Icon Font | Poor (full file) | Good (one file) | Excellent | Limited (single color) | Poor |

### When to use what

- **Inline SVG (React/Vue/Svelte components)**: Default for <50 unique icons. No FOUT, tree-shakable, full CSS control.
- **SVG Sprite**: 50+ icons on one page, or server-rendered apps (PHP, Rails).
- **Icon Font**: Only for CMS/legacy systems where SVG tooling is impractical.

---

## Implementation Patterns

### Pattern A: npm + Tree-Shaking (Default for Modern Apps)

```tsx
// Lucide
import { Home, Settings } from 'lucide-react';
<Home size={20} strokeWidth={1.5} />

// Phosphor
import { House, Gear } from '@phosphor-icons/react';
<House size={20} weight="regular" />

// Heroicons
import { HomeIcon } from '@heroicons/react/24/outline';
<HomeIcon className="h-5 w-5" />

// Tabler
import { IconHome } from '@tabler/icons-react';
<IconHome size={20} stroke={1.5} />
```

### Pattern B: SVG Sprite

```html
<!-- Define once -->
<svg style="display:none">
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="..." />
  </symbol>
</svg>

<!-- Use anywhere -->
<svg width="24" height="24"><use href="#icon-home" /></svg>

<!-- Or external file (cacheable) -->
<svg width="24" height="24"><use href="/sprite.svg#icon-home" /></svg>
```

### Pattern C: CDN (Prototypes)

```html
<!-- Lucide -->
<script src="https://unpkg.com/lucide@latest"></script>
<script>lucide.createIcons();</script>

<!-- Material Symbols -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
```

### Recommendation by Project Type

| Project Type | Pattern |
|---|---|
| React / Next.js / Vue / Svelte | npm + tree-shaking |
| Server-rendered (Rails, PHP, Django) | SVG sprite or self-hosted icon font |
| Prototype / landing page | CDN |
| WordPress / CMS | CDN or self-hosted icon font |
| Design system / component library | npm, wrapped in your own `<Icon>` component |