Replace FontAwesome with Phosphor + custom Pulumi icons

[jeffmerrick]

Another monster PR again, but really the only way I could see to tackle fully replacing FontAwesome. Uses an SVG sprite so should be performant, and easy enough to add new icons to. I clicked around and checked out many pages but could use some more eyes just to confirm icons aren't missing and the swaps make sense everywhere.

This does touch some blog/tutorial files that had FontAwesome icons in them.

---

Generated summary of changes:

Migrates the entire site off FontAwesome and onto a sprite-based Phosphor icon system, with a small set of custom Pulumi product icons (IaC, Secrets, Insights, IDP, Neo).

New icon system

• icon.html — sprite-based resolver supporting brand/, custom/, and phosphor/ prefixes plus weight, size, class, and title params.
• icon.html — markdown shortcode wrapper.
• build-icon-sprite.js — token-scanning sprite builder. Output: sprite.svg + sprite-manifest.json.
• assets/icons/{brand,custom,phosphor}/ — 7 brand icons, 5 custom Pulumi product icons (× 4 weights), and 1,512 Phosphor icons (× 4 weights: regular, bold, fill, duotone).

Removed

• All of theme/src/scss/fontawesome/* (~13 files, ~8,400 lines).
• All static/fonts/fontawesome/* font binaries (~9,000 lines).
• Legacy theme/src/scss/_icons.scss custom icon classes.

Migrated (~95 layout/template/shortcode files)

• Every <i class="fa-…"> and legacy partials/icons/X.html reference replaced with the new icon partial or shortcode.
• Capability cards on docs/_index.md, iac/_index.md, esc/_index.md, etc. use the new custom Pulumi product icons.
• 17 docs _index.md files: emoji frontmatter → Phosphor icon: names.
• Language SDK reference cards use real tech logos.
• 8 blog/tutorial markdown files: raw {{ partial }} → {{< icon >}} shortcode.

Notes / alerts

• Note icons now render in fill (solid) weight and inherit each variant's color via currentColor.
• _notes.scss refactored to use semantic tokens (--color-{violet,green,orange}-{primary,muted,background}) instead of hard-coded hexes.
• All 14 hand-rolled note shortcodes (install-*, cli-note, related-posts, etc.) updated to pass weight=fill.

Misc fixes

• Inline Phosphor SVGs in copybutton.ts and the pulumi-install / pulumi-llm-menu Stencil components (replacing the last FA stragglers in dynamically injected JS).

Notes:

• Sprite is a build artifact; reviewers/contributors should make ensure to regenerate it locally.
• The _notes.scss markup is duplicated across 14 note shortcodes (legacy). Consolidating them to delegate to notes.html would be a worthwhile follow-up.
• Stencil components contain inline SVGs (no shared icon partial in shadow DOM) — intentional; web components can't reach into Hugo templates.

[pulumi-bot]

Claude finished @cnunciato's task in 3m 16s —— View job

---

Docs review — fourth pass

• Read diff since last reviewed commit (5d9217ef87)
• Review FA straggler sweep (aaba9d7af9)
• Review icon sizing/alignment fixes (0521f96e9f)
• Check for remaining FA references
• Post findings

---

All third-pass items are resolved. The two new commits are clean. Here's what I checked:

FA straggler sweep — looks good

• fa-glyph mixin deleted from _mixins.scss, zero remaining callsites — confirmed.
• _lists.scss property-required asterisk: content: "*" is a fine substitution; the surrounding @apply text-red-500 and font-size: 0.6em on the .property-indicator element still control color and scale.
• _banner.scss CTA chevron: › (U+203A) is styled with @apply opacity-75 ml-2 text-xs — the rendering is close enough to the original FA fa-chevron-right for this context.
• pulumi-api-doc-nav-tree.scss expandable indicator: ▸ with transform: rotate(90deg) on [open] works correctly — the glyph rotates to point downward when expanded. Clean.
• _examples.scss / examples.tsx caret toggle: .caret-open { @apply hidden } default + .expanded swaps classes. examples.tsx confirmed shadow: false, so Tailwind's hidden utility resolves correctly. Pattern is sound.
• pulumi-registry-list-search.tsx / pulumi-api-doc-filterable-nav.tsx: Inline Phosphor SVGs, shadow: false — visual verification still needs to happen in the registry repo as noted, but the migration pattern is consistent with the rest of the PR.
• FA font binaries: The theme/static/fonts/fontawesome/ directory is gone — confirmed.
• Dead CSS (.fa-chevron-* in _llm-menu.scss and _docs-top-nav.scss) removed — confirmed.
• Repo-wide scan of "fas ", "fab ", "far ", fa-glyph, font-family.*Font Awesome in all active .html, .scss, .tsx, .ts files returns zero results outside the known-intentional exceptions (superpower-icon.html, sparkle-arrow-cta.html, partner/azure.html).

Sizing / alignment fixes — looks good

• btn-scroll-top: Now a 16×16 (w-4 h-4) flex-centered container on bg-gray-800, SVG clamped to 12×12 (w-3 h-3). The .btn-scroll-top svg selector is more specific than .ph-icon, so the override wins — no cascade concern.
• Docs-nav toggle carets: 14×14 (w-3.5 h-3.5), mb-0.5 vertical centering, explicit width: 1.2rem dropped. Clean.
• feedback.html spacing cleanup (both docs/ and tutorials/): pl-2 removed, docs divider softened from border-gray-300 → border-gray-200. Cosmetically tidy.

Template doc comments — all 5 updated

template-mini-cards.html, template-feature-split.html, template-section-header.html, template-section-header-with-code.html, template-section-header-with-image.html all updated from fa-code → code style examples. EVENT-PAGE-TEMPLATE-GUIDE.md, figma-to-template-page.md, stencil/README.md, and tooltip.tsx JSDoc updated as well.

Minor (non-blocking)

stencil/README.md now shows <span>?</span> as the tooltip trigger example — fine for a minimal working example, but contributors adding tooltips in Stencil components may not know to use an inline Phosphor SVG (as established in install.tsx, top-button.tsx, etc.). A one-liner note like `` would help discoverability. Totally optional.

---

This PR is ready to merge. The FA migration is complete: no remaining font dependencies, no broken icon paths, no stale SCSS pseudo-element glyphs, all template doc comments updated. The only outstanding item is visual verification of the two registry components (pulumi-registry-list-search, pulumi-api-doc-filterable-nav) in the registry repo, which is correctly noted as out-of-scope here.

[github-actions]

🟰 Skipping social media review — no blog files changed since prior review. The verdict from the prior run still applies. Comment /social-review to force a fresh review.

[github-actions]

🟰 Skipping social media review — no blog files changed since prior review. The verdict from the prior run still applies. Comment /social-review to force a fresh review.

[github-actions]

🟰 Skipping social media review — no blog files changed since prior review. The verdict from the prior run still applies. Comment /social-review to force a fresh review.

[github-actions]

🟰 Skipping social media review — no blog files changed since prior review. The verdict from the prior run still applies. Comment /social-review to force a fresh review.

[cnunciato]

I was so excited to see this done that I took the liberty of going a few rounds with Claude and making a handful of manual adjustments to finish it off. I think it's in excellent shape and ready to be merged, but I'll let you do the honors @jeffmerrick in case there's anything still left that I missed.

🎉

[github-actions]

🟰 Skipping social media review — no blog files changed since prior review. The verdict from the prior run still applies. Comment /social-review to force a fresh review.

[github-actions]

🟰 Skipping social media review — no blog files changed since prior review. The verdict from the prior run still applies. Comment /social-review to force a fresh review.