[Website] Use FontAwesome free icons

website/.storybook/main.ts

@@ -4,6 +4,8 @@ const config: StorybookConfig = {
   stories: [
     "../src/design-system/**/*.stories.@(ts|tsx|mdx)",
     "../src/components/**/*.stories.@(ts|tsx|mdx)",
+    "../src/icons/**/*.stories.@(ts|tsx|mdx)",
+    "../src/illustrations/**/*.stories.@(ts|tsx|mdx)",
     "../src/nitro/**/*.stories.@(ts|tsx|mdx)",
     "../src/og/**/*.stories.@(ts|tsx|mdx)",
     "../app/**/*.stories.@(ts|tsx|mdx)",

website/app/(content)/platform/agentic-coding/ReviewSection.tsx

@@ -2,12 +2,11 @@
 
 import { useEffect, useRef, useState } from "react";
 
+import { MockWindowChrome } from "@/src/components/MockWindowChrome";
+import { SectionHeading } from "@/src/components/SectionHeading";
 import { Card } from "@/src/design-system/Card";
 import { Eyebrow } from "@/src/design-system/Eyebrow";
-import { SectionHeading } from "@/src/components/SectionHeading";
-import { MockWindowChrome } from "@/src/components/MockWindowChrome";
-import { BranchGlyph } from "@/src/icons/BranchGlyph";
-import { CheckGlyph } from "@/src/icons/CheckGlyph";
+import { Icon } from "@/src/icons/Icon";
 
 interface HunkRun {
   readonly t: string;
@@ -271,7 +270,7 @@ function StatusBadge({ status }: { readonly status: DemoStatus }) {
   if (status === "approved") {
     return (
       <span className="border-cc-success/40 bg-cc-success/10 text-cc-success ml-auto inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 font-mono text-[0.65rem] tracking-[0.1em] uppercase">
-        <CheckGlyph className="text-cc-success size-3.5" />
+        <Icon icon="check" className="text-cc-success size-3.5" />
         Approved
       </span>
     );
@@ -339,7 +338,9 @@ function FileCard({
                 : "border-cc-ink-faint"
             } ${pressed ? "scale-90" : ""}`}
           >
-            {viewed && <CheckGlyph className="text-cc-accent size-2.5" />}
+            {viewed && (
+              <Icon icon="check" size="xs" className="text-cc-accent" />
+            )}
           </span>
           Viewed
         </span>
@@ -478,7 +479,11 @@ export function ReviewSection() {
               variant: "custom",
               content: (
                 <>
-                  <BranchGlyph className="text-cc-ink-dim size-3.5 shrink-0" />
+                  <Icon
+                    icon="code-branch"
+                    size="xs"
+                    className="text-cc-ink-dim size-3.5 shrink-0"
+                  />
                   <span className="text-cc-ink font-mono text-sm">
                     feat: add product reviews
                   </span>
@@ -522,7 +527,11 @@ export function ReviewSection() {
                         className="flex items-center gap-2.5 font-mono text-xs"
                       >
                         {done ? (
-                          <CheckGlyph className="text-cc-success size-3.5" />
+                          <Icon
+                            icon="check"
+                            size="sm"
+                            className="text-cc-success size-3.5"
+                          />
                         ) : (
                           <PendingSpinner />
                         )}
@@ -551,7 +560,7 @@ export function ReviewSection() {
                   }`}
                 >
                   {approved && (
-                    <CheckGlyph className="text-cc-success size-3.5" />
+                    <Icon icon="check" className="text-cc-success size-3.5" />
                   )}
                   {approved ? "Approved" : "Approve"}
                 </span>

website/app/(content)/services/support/contact/ContactIntro.tsx

@@ -1,6 +1,6 @@
 import { CheckList } from "@/src/components/CheckList";
 import { Eyebrow } from "@/src/design-system/Eyebrow";
-import { SlackIcon } from "@/src/icons/Slack";
+import { SlackIcon } from "@/src/icons/brands/Slack";
 
 const POINTS = [
   "A reply within one business day",

website/app/docs/page.tsx

@@ -1,14 +1,14 @@
-import type { ComponentType } from "react";
-import { PRODUCTS } from "@/src/data/products";
 import { LinkCard } from "@/src/components/LinkCard";
+import { PRODUCTS } from "@/src/data/products";
 import { Typography } from "@/src/design-system/Typography";
-import { Fusion } from "@/src/icons/Fusion";
-import { HotChocolate } from "@/src/icons/HotChocolate";
-import { Mocha } from "@/src/icons/Mocha";
-import { Nitro } from "@/src/icons/Nitro";
-import { Skillz } from "@/src/icons/Skillz";
-import { StrawberryShake } from "@/src/icons/StrawberryShake";
 import { pageMetadata } from "@/src/helpers/pageMetadata";
+import { Fusion } from "@/src/icons/chillicream/Fusion";
+import { HotChocolate } from "@/src/icons/chillicream/HotChocolate";
+import { Mocha } from "@/src/icons/chillicream/Mocha";
+import { Nitro } from "@/src/icons/chillicream/Nitro";
+import { Skillz } from "@/src/icons/chillicream/Skillz";
+import { StrawberryShake } from "@/src/icons/chillicream/StrawberryShake";
+import type { ComponentType } from "react";
 
 export const metadata = pageMetadata({
   title: "Documentation",

website/app/layout.tsx

@@ -15,6 +15,12 @@ import {
 } from "@/src/helpers/site";
 import { SITE_URL } from "@/src/helpers/siteUrl";
 
+// Set up the styling for fontawesome, including duotone icons
+// https://docs.fontawesome.com/web/use-with/react/use-with#getting-font-awesome-css-to-work
+import { config } from "@fortawesome/fontawesome-svg-core";
+import "@fortawesome/fontawesome-svg-core/styles.css";
+config.autoAddCss = false;
+
 const inter = Inter({
   subsets: ["latin"],
   display: "swap",

website/src/components/ArrowLink.tsx

@@ -1,7 +1,7 @@
-import type { ComponentPropsWithoutRef, ReactNode } from "react";
 import NextLink from "next/link";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
-import { ArrowRightIcon } from "@/src/icons/ArrowRight";
+import { Icon } from "../icons/Icon";
 
 interface ArrowLinkProps extends Omit<ComponentPropsWithoutRef<"a">, "href"> {
   readonly href: string;
@@ -24,7 +24,7 @@ export function ArrowLink({
   const content = (
     <>
       {children}
-      <ArrowRightIcon className="size-3.5" />
+      <Icon icon="arrow-right" size="sm" />
     </>
   );
 

website/src/components/BlogShareBar.tsx

@@ -1,6 +1,6 @@
+import { LinkedInIcon } from "@/src/icons/brands/LinkedIn";
+import { XIcon } from "@/src/icons/brands/X";
 import type { ReactNode } from "react";
-import { LinkedInIcon } from "@/src/icons/LinkedIn";
-import { XIcon } from "@/src/icons/X";
 
 type BlogShareBarProps = {
   /** Absolute URL of the blog post. */

website/src/components/BlogTeaser.tsx

@@ -1,7 +1,7 @@
-import Link from "next/link";
 import { Picture } from "@/src/design-system/Picture";
 import { formatDate } from "@/src/helpers/formatDate";
-import { ArrowRightIcon } from "@/src/icons/ArrowRight";
+import Link from "next/link";
+import { Icon } from "../icons/Icon";
 
 export type BlogTeaserData = {
   href: string;
@@ -56,7 +56,7 @@ export function BlogTeaser({ post }: BlogTeaserProps) {
           ) : null}
           <span className="text-cc-ink group-hover/teaser:text-cc-accent mt-auto inline-flex items-center gap-1.5 text-xs tracking-[0.18em] uppercase transition-colors">
             Read
-            <ArrowRightIcon className="size-3.5" />
+            <Icon icon="arrow-right" size="sm" />
           </span>
         </div>
       </Link>

website/src/components/CheckList.tsx

@@ -1,5 +1,5 @@
-import { CheckIcon } from "@/src/components/CheckIcon";
 import { CheckListItem } from "@/src/components/CheckListItem";
+import { Icon } from "../icons/Icon";
 
 type CheckListVariant = "plain" | "pill";
 
@@ -44,8 +44,8 @@ export function CheckList({
     >
       {items.map((item) => (
         <li key={item} className="flex items-start gap-2">
-          <span className="text-cc-accent mt-1 flex-none">
-            <CheckIcon />
+          <span className="text-cc-accent mt-0.5 inline-flex">
+            <Icon icon="check" size="sm" />
           </span>
           <span>{item}</span>
         </li>

website/src/components/CheckListItem.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 
-import { CheckIcon } from "@/src/components/CheckIcon";
+import { Icon } from "../icons/Icon";
 
 interface CheckListItemProps {
   readonly children: ReactNode;
@@ -23,8 +23,8 @@ export function CheckListItem({
 }: CheckListItemProps) {
   return (
     <li className={`flex items-start gap-3 ${className}`.trim()}>
-      <span className={`mt-1 flex-none ${iconClassName}`}>
-        <CheckIcon />
+      <span className="inline-flex">
+        <Icon icon="check" size="xs" className={iconClassName} />
       </span>
       <span className="text-cc-ink text-sm">{children}</span>
     </li>

website/src/components/DocsToolbar.tsx

@@ -1,7 +1,6 @@
 "use client";
 
-import { ListBulletsIcon } from "@/src/icons/ListBullets";
-import { MenuLinesIcon } from "@/src/icons/MenuLines";
+import { Icon } from "../icons/Icon";
 import { SIDEBAR_OPEN_EVENT } from "./SidebarDrawer";
 import { TOC_OPEN_EVENT } from "./TocDrawer";
 
@@ -20,15 +19,15 @@ export function DocsToolbar({
         label={menuPillLabel}
         className="lg:invisible"
       >
-        <MenuLinesIcon className="h-3.5 w-3.5" aria-hidden="true" />
+        <Icon icon="bars" />
       </PillButton>
       <PillButton
         ariaLabel="Open table of contents"
         event={TOC_OPEN_EVENT}
         label="On this page"
         iconPosition="right"
       >
-        <ListBulletsIcon className="h-3.5 w-3.5" aria-hidden="true" />
+        <Icon icon="list" />
       </PillButton>
     </div>
   );

website/src/components/EditOnGitHub.tsx

@@ -1,4 +1,4 @@
-import { GitHubIcon } from "@/src/icons/GitHub";
+import { GitHubIcon } from "@/src/icons/brands/GitHub";
 
 type EditOnGitHubProps = {
   /** URL to the source file on github.com (web-edit view). */

website/src/components/FeatureComparison.tsx

@@ -1,7 +1,7 @@
-import { CheckIcon } from "@/src/components/CheckIcon";
 import { SectionHeading } from "@/src/components/SectionHeading";
 import { Card } from "@/src/design-system/Card";
 import { Eyebrow } from "@/src/design-system/Eyebrow";
+import { Icon } from "../icons/Icon";
 
 type Cell = boolean | string;
 
@@ -119,7 +119,7 @@ function CompareCell({ value }: { readonly value: Cell }) {
     return (
       <td className="px-5 py-3 align-top">
         <span className="text-cc-accent inline-flex">
-          <CheckIcon />
+          <Icon icon="check" size="sm" />
         </span>
         <span className="sr-only">Included</span>
       </td>

website/src/components/Footer.tsx

@@ -1,12 +1,12 @@
+import { GitHubIcon } from "@/src/icons/brands/GitHub";
+import { LinkedInIcon } from "@/src/icons/brands/LinkedIn";
+import { SlackIcon } from "@/src/icons/brands/Slack";
+import { XIcon } from "@/src/icons/brands/X";
+import { YouTubeIcon } from "@/src/icons/brands/YouTube";
+import { ChilliCreamText } from "@/src/icons/chillicream/ChilliCreamText";
 import Link from "next/link";
 import type { ReactNode } from "react";
-import { BlogIcon } from "@/src/icons/Blog";
-import { ChilliCreamText } from "@/src/icons/ChilliCreamText";
-import { GitHubIcon } from "@/src/icons/GitHub";
-import { LinkedInIcon } from "@/src/icons/LinkedIn";
-import { SlackIcon } from "@/src/icons/Slack";
-import { XIcon } from "@/src/icons/X";
-import { YouTubeIcon } from "@/src/icons/YouTube";
+import { Icon } from "../icons/Icon";
 
 const tools = {
   blog: "/blog",
@@ -88,7 +88,7 @@ export default function Footer() {
         <Section>
           <nav className="text-cc-ink-dim flex flex-row gap-4">
             <SocialLink href={tools.blog} label="ChilliCream Blog">
-              <BlogIcon className="h-6 w-auto fill-current" />
+              <Icon icon="blog" size="xl" />
             </SocialLink>
             <SocialLink href={tools.github} label="ChilliCream on GitHub">
               <GitHubIcon className="h-7 w-auto fill-current" />

website/src/components/Header.tsx

@@ -1,14 +1,13 @@
-import Link from "next/link";
 import { SolidButton } from "@/src/design-system/Button";
 import { Picture } from "@/src/design-system/Picture";
+import Link from "next/link";
 
 import { getLatestBlogPost } from "@/src/helpers/blogPosts";
 import { getGitHubStarCount } from "@/src/helpers/githubStars";
-import { ChilliCreamText } from "@/src/icons/ChilliCreamText";
-import { ChilliCreamWinking } from "@/src/icons/ChilliCreamWinking";
-import { GitHubIcon } from "@/src/icons/GitHub";
+import { GitHubIcon } from "@/src/icons/brands/GitHub";
+import { ChilliCreamText } from "@/src/icons/chillicream/ChilliCreamText";
+import { ChilliCreamWinking } from "@/src/icons/chillicream/ChilliCreamWinking";
 
-import { HeaderShell } from "./HeaderShell";
 import { HeaderNav } from "./header/HeaderNav";
 import {
   CONTACT_HREF,
@@ -17,6 +16,7 @@ import {
   MOBILE_ITEMS,
   TOOLS,
 } from "./header/navData";
+import { HeaderShell } from "./HeaderShell";
 import { MobileNav } from "./MobileNav";
 import { Search } from "./Search";
 

website/src/components/HighlightCard.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/nextjs-vite";
 
-import { CheckIcon } from "./CheckIcon";
+import { Icon } from "../icons/Icon";
 import { HighlightCard } from "./HighlightCard";
 
 const meta = {
@@ -42,8 +42,8 @@ function PerkBody() {
       <ul className="flex flex-1 flex-col gap-2">
         {perks.map((item) => (
           <li key={item} className="flex items-start gap-3">
-            <span className="text-cc-accent mt-1 flex-none">
-              <CheckIcon />
+            <span className="text-cc-accent mt-0.5 inline-flex">
+              <Icon icon="check" size="sm" />
             </span>
             <span className="text-cc-ink text-sm">{item}</span>
           </li>

website/src/components/IconFeatureCard.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/nextjs-vite";
 
-import { CheckIcon } from "./CheckIcon";
+import { Icon } from "../icons/Icon";
 import { IconFeatureCard } from "./IconFeatureCard";
 
 const meta = {
@@ -32,7 +32,7 @@ const meta = {
       </div>
     ),
   ],
-  args: { icon: <CheckIcon size={16} />, title: "", copy: "" },
+  args: { icon: <Icon icon="check" />, title: "", copy: "" },
 } satisfies Meta<typeof IconFeatureCard>;
 
 export default meta;

website/src/components/LinkCard.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/nextjs-vite";
 
-import { Fusion } from "@/src/icons/Fusion";
+import { Fusion } from "@/src/icons/chillicream/Fusion";
 
 import { LinkCard } from "./LinkCard";
 

website/src/components/MarketingHero.stories.tsx

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/nextjs-vite";
 
 import { OutlineButton, SolidButton } from "../design-system/Button";
+import { Icon } from "../icons/Icon";
 import { ButtonRow } from "./ButtonRow";
-import { CheckIcon } from "./CheckIcon";
 import { IconFeatureCard } from "./IconFeatureCard";
 import { MarketingHero } from "./MarketingHero";
 
@@ -67,7 +67,7 @@ export const WithCardGrid: Story = {
               key={label}
               eyebrow={label}
               size="lg"
-              icon={<CheckIcon size={20} />}
+              icon={<Icon icon="check" />}
               title="We respond fast"
               copy="A core team member jumps in and stays with you until it is resolved."
             />