diff --git a/src/frontend/bun.lock b/src/frontend/bun.lock
index 1a9a09747..2f3938ae8 100644
--- a/src/frontend/bun.lock
+++ b/src/frontend/bun.lock
@@ -17,15 +17,21 @@
         "@fontsource-variable/fira-code": "^5.3.0",
         "@fontsource-variable/rubik": "^5.3.0",
         "@fontsource/poppins": "^5.3.0",
+        "@iconify-json/iconoir": "^1.2.12",
+        "@iconify-json/logos": "^1.2.18",
+        "@iconify/utils": "3.1.4",
         "@lunariajs/core": "^0.1.1",
         "@lunariajs/starlight": "^0.1.1",
         "@mdx-js/mdx": "^3.1.1",
         "asciinema-player": "^3.17.0",
         "astro": "^7.4.1",
         "astro-expressive-code": "^0.44.1",
+        "fontkitten": "1.0.3",
+        "hast-util-from-html": "^2.0.3",
         "hast-util-to-html": "^9.0.5",
         "mdast-util-to-hast": "^13.2.1",
         "mermaid": "^11.16.1",
+        "pele": "1.12.0",
         "remark-directive": "^4.0.0",
         "satori": "^0.28.1",
         "satteri": "^0.9.5",
@@ -432,6 +438,10 @@
 
     "@iconify-json/devicon": ["@iconify-json/devicon@1.2.62", "", { "dependencies": { "@iconify/types": "2.0.0" } }, "sha512-X0o0+fOJL2t5JTbDCGLRzrmvf8Pv5q8dr86+fW+F/VJ9qvXTtny6lqGIwjE9AY4VTLm3i8f/N+VtRheSW6OkEg=="],
 
+    "@iconify-json/iconoir": ["@iconify-json/iconoir@1.2.12", "", { "dependencies": { "@iconify/types": "*" } }, "sha512-9l6OtKntemFvgCbQ14AheNiUpm9eicNCwPuCmAVjmYORqhGFMEf33Yfo1S1pRFh9XIA3s7tiVmly6hm+dYNgEw=="],
+
+    "@iconify-json/logos": ["@iconify-json/logos@1.2.18", "", { "dependencies": { "@iconify/types": "*" } }, "sha512-Qehd7RmUbYM4LSXNHFqulgvmdmqldOxQ3VDbCmzos5IGlo40+cChVdX7GnG9VODBU0H3+Bb8npYOkplooJZvtQ=="],
+
     "@iconify-json/material-icon-theme": ["@iconify-json/material-icon-theme@1.2.69", "", { "dependencies": { "@iconify/types": "2.0.0" } }, "sha512-BqVadW0C19qyzp7Gtl2z0wExBFhfGKDPrgq4ajnGUe9atBcqSwz/yULCbZWzjPlOPrFFu4P3hhfs8Vl503nhEg=="],
 
     "@iconify-json/mdi": ["@iconify-json/mdi@1.2.3", "", { "dependencies": { "@iconify/types": "2.0.0" } }, "sha512-O3cLwbDOK7NNDf2ihaQOH5F9JglnulNDFV7WprU2dSoZu3h3cWH//h74uQAB87brHmvFVxIOkuBX2sZSzYhScg=="],
@@ -1128,7 +1138,7 @@
 
     "emoji-regex-xs": ["emoji-regex-xs@2.0.1", "", {}, "sha512-1QFuh8l7LqUcKe24LsPUNzjrzJQ7pgRwp1QMcZ5MX6mFplk2zQ08NVCM84++1cveaUUYtcCYHmeFEuNg16sU4g=="],
 
-    "entities": ["entities@8.0.0", "", {}, "sha512-zwfzJecQ/Uej6tusMqwAqU/6KL2XaB2VZ2Jg54Je6ahNBGNH6Ek6g3jjNCF0fG9EWQKGZNddNjU5F1ZQn/sBnA=="],
+    "entities": ["entities@6.0.1", "", {}, "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g=="],
 
     "environment": ["environment@1.1.0", "", {}, "sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q=="],
 
@@ -1618,7 +1628,7 @@
 
     "parse-latin": ["parse-latin@7.0.0", "", { "dependencies": { "@types/nlcst": "2.0.3", "@types/unist": "3.0.3", "nlcst-to-string": "4.0.0", "unist-util-modify-children": "4.0.0", "unist-util-visit-children": "3.0.0", "vfile": "6.0.3" } }, "sha512-mhHgobPPua5kZ98EF4HWiH167JWBfl4pvAIXXdbaVohtK7a6YBOy56kvhCqduqyo/f3yrHFWmqmiMg/BkBkYYQ=="],
 
-    "parse5": ["parse5@8.0.1", "", { "dependencies": { "entities": "8.0.0" } }, "sha512-z1e/HMG90obSGeidlli3hj7cbocou0/wa5HacvI3ASx34PecNjNQeaHNo5WIZpWofN9kgkqV1q5YvXe3F0FoPw=="],
+    "parse5": ["parse5@7.3.0", "", { "dependencies": { "entities": "6.0.1" } }, "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw=="],
 
     "path-browserify": ["path-browserify@1.0.1", "", {}, "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g=="],
 
@@ -1636,6 +1646,8 @@
 
     "pathe": ["pathe@2.0.3", "", {}, "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w=="],
 
+    "pele": ["pele@1.12.0", "", {}, "sha512-3OdOK6rvkaTB569R4/I8U0H82MqPRxj7vfkbowa2rRhgSBPFhvWlfFy5eae0jP+2A6hE8abE17nsdyxJz2VBiQ=="],
+
     "perfect-debounce": ["perfect-debounce@2.1.0", "", {}, "sha512-LjgdTytVFXeUgtHZr9WYViYSM/g8MkcTPYDlPa3cDqMirHjKiSZPYd6DoL7pK8AJQr+uWkQvCjHNdiMqsrJs+g=="],
 
     "piccolore": ["piccolore@0.1.3", "", {}, "sha512-o8bTeDWjE086iwKrROaDf31K0qC/BENdm15/uH9usSC/uZjJOKb2YGiVHfLY4GhwsERiPI1jmwI2XrA7ACOxVw=="],
@@ -2012,6 +2024,8 @@
 
     "@antfu/install-pkg/package-manager-detector": ["package-manager-detector@1.8.0", "", {}, "sha512-yQA4H19AmPEoMUeavPMDIe1higySl/gH/yaQrkT/s07Qp+7pp2hYz30N3z2l5BkjVkF9Ow6o0wjJamm2y7Sn0A=="],
 
+    "@astro-community/astro-embed-link-preview/parse5": ["parse5@8.0.1", "", { "dependencies": { "entities": "8.0.0" } }, "sha512-z1e/HMG90obSGeidlli3hj7cbocou0/wa5HacvI3ASx34PecNjNQeaHNo5WIZpWofN9kgkqV1q5YvXe3F0FoPw=="],
+
     "@astrojs/compiler-binding-wasm32-wasi/@emnapi/core": ["@emnapi/core@1.11.3", "", { "dependencies": { "@emnapi/wasi-threads": "1.2.3", "tslib": "2.8.1" } }, "sha512-zLpS5asjEb7lq8jYLq37N6XKaE41DIexlY1rF/z4/tIl3wo13Sqm28fRyfIsKZD+NZ8mM5RoKkpW/rBcuoSZSg=="],
 
     "@astrojs/compiler-binding-wasm32-wasi/@emnapi/runtime": ["@emnapi/runtime@1.11.3", "", { "dependencies": { "tslib": "2.8.1" } }, "sha512-Xz4Tpyki7XyrpbUK1jR1AhdAdaXyhhY4lZ3neLodmhpuWfy2PAQN5B46sAiU4liOXGLkHypn/qU+jvfWSCYYLA=="],
@@ -2098,12 +2112,8 @@
 
     "fast-glob/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "4.0.3" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
 
-    "hast-util-from-html/parse5": ["parse5@7.3.0", "", { "dependencies": { "entities": "6.0.1" } }, "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw=="],
-
     "hast-util-raw/@ungap/structured-clone": ["@ungap/structured-clone@1.3.3", "", {}, "sha512-60YRaenCQcVjYEKOcG824+DRGGIQ3VKErcBoAEDJZz5bKIs2ZG+X/H9Nk+Q6EVkwJk5QNApxbrc5QtBSwtrXAg=="],
 
-    "hast-util-raw/parse5": ["parse5@7.3.0", "", { "dependencies": { "entities": "6.0.1" } }, "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw=="],
-
     "katex/commander": ["commander@8.3.0", "", {}, "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww=="],
 
     "mdast-util-find-and-replace/escape-string-regexp": ["escape-string-regexp@5.0.0", "", {}, "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw=="],
@@ -2130,6 +2140,8 @@
 
     "vite-plugin-static-copy/chokidar": ["chokidar@3.6.0", "", { "dependencies": { "anymatch": "3.1.3", "braces": "3.0.3", "glob-parent": "5.1.2", "is-binary-path": "2.1.0", "is-glob": "4.0.3", "normalize-path": "3.0.0", "readdirp": "3.6.0" }, "optionalDependencies": { "fsevents": "2.3.3" } }, "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw=="],
 
+    "@astro-community/astro-embed-link-preview/parse5/entities": ["entities@8.0.0", "", {}, "sha512-zwfzJecQ/Uej6tusMqwAqU/6KL2XaB2VZ2Jg54Je6ahNBGNH6Ek6g3jjNCF0fG9EWQKGZNddNjU5F1ZQn/sBnA=="],
+
     "@astrojs/compiler-binding-wasm32-wasi/@emnapi/core/@emnapi/wasi-threads": ["@emnapi/wasi-threads@1.2.3", "", { "dependencies": { "tslib": "2.8.1" } }, "sha512-ELEBe8PsLvvJ6QMr0zLt8ffvOHW/dc1m3CEzNMg7aJUv3bMaoDtw2TXyDAwkYBuroxxuHEwhRTLJSe5sya547g=="],
 
     "@astrojs/internal-helpers/shiki/@shikijs/core": ["@shikijs/core@4.4.2", "", { "dependencies": { "@shikijs/primitive": "4.4.2", "@shikijs/types": "4.4.2", "@shikijs/vscode-textmate": "10.0.2", "@types/hast": "3.0.5", "hast-util-to-html": "9.0.5" } }, "sha512-StyzbAyxg2/tBGf78gwbBkGyeQ73lf8UiJArFaQhTQIDqQOCKPCQFanvrs4/Yv3Yfyc+ONInJM6K+FMIf+P+kA=="],
@@ -2174,10 +2186,6 @@
 
     "d3-sankey/d3-shape/d3-path": ["d3-path@1.0.9", "", {}, "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="],
 
-    "hast-util-from-html/parse5/entities": ["entities@6.0.1", "", {}, "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g=="],
-
-    "hast-util-raw/parse5/entities": ["entities@6.0.1", "", {}, "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g=="],
-
     "p-locate/p-limit/yocto-queue": ["yocto-queue@0.1.0", "", {}, "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="],
 
     "typescript-eslint/@typescript-eslint/parser/@typescript-eslint/scope-manager": ["@typescript-eslint/scope-manager@8.65.0", "", { "dependencies": { "@typescript-eslint/types": "8.65.0", "@typescript-eslint/visitor-keys": "8.65.0" } }, "sha512-Esbl8OSYiVxBokYgWPf7VVWg/BE798wXhimnn9ML9Pt5qoDf8bfQlgjlKXR/k98+AcNzlLKYrpCcrcuZ9DZLgg=="],
diff --git a/src/frontend/config/remark-mermaid.mjs b/src/frontend/config/remark-mermaid.mjs
index 77efff657..7f3b62acb 100644
--- a/src/frontend/config/remark-mermaid.mjs
+++ b/src/frontend/config/remark-mermaid.mjs
@@ -1,4 +1,7 @@
-/** Turn opted-in fences into plain pre elements before code highlighting. */
+import { fromHtml } from 'hast-util-from-html';
+import { renderMermaid } from '../src/utils/mermaid.mjs';
+
+/** Render opted-in fences before code highlighting, including nested MDX content. */
 export function remarkMermaid() {
   return (tree) => {
     function visit(parent) {
@@ -9,8 +12,8 @@ export function remarkMermaid() {
             children: [],
             data: {
               hName: 'pre',
-              hProperties: { className: ['mermaid'] },
-              hChildren: [{ type: 'text', value: node.value }],
+              hProperties: { className: ['mermaid'], 'data-processed': 'true' },
+              hChildren: fromHtml(renderMermaid(node.value), { fragment: true }).children,
             },
             position: node.position,
           };
diff --git a/src/frontend/package.json b/src/frontend/package.json
index a27c9ceed..7bc56232c 100644
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -78,15 +78,21 @@
     "@fontsource-variable/fira-code": "^5.3.0",
     "@fontsource-variable/rubik": "^5.3.0",
     "@fontsource/poppins": "^5.3.0",
+    "@iconify-json/iconoir": "^1.2.12",
+    "@iconify-json/logos": "^1.2.18",
+    "@iconify/utils": "3.1.4",
     "@lunariajs/core": "^0.1.1",
     "@lunariajs/starlight": "^0.1.1",
     "@mdx-js/mdx": "^3.1.1",
     "asciinema-player": "^3.17.0",
     "astro": "^7.4.1",
     "astro-expressive-code": "^0.44.1",
+    "fontkitten": "1.0.3",
     "hast-util-to-html": "^9.0.5",
+    "hast-util-from-html": "^2.0.3",
     "mdast-util-to-hast": "^13.2.1",
     "mermaid": "^11.16.1",
+    "pele": "1.12.0",
     "remark-directive": "^4.0.0",
     "satori": "^0.28.1",
     "satteri": "^0.9.5",
diff --git a/src/frontend/src/components/SampleReadmeBlocks.astro b/src/frontend/src/components/SampleReadmeBlocks.astro
index c1ac01581..defeacd46 100644
--- a/src/frontend/src/components/SampleReadmeBlocks.astro
+++ b/src/frontend/src/components/SampleReadmeBlocks.astro
@@ -21,6 +21,7 @@ import {
   toSentenceCase,
 } from '@utils/sample-readme-headings';
 import { isStandaloneSampleImageBlock } from '@utils/sample-readme-images';
+import { renderMermaid } from '@utils/mermaid.mjs';
 
 interface Props {
   blocks: RootContent[];
@@ -224,7 +225,7 @@ function matchGitHubAlert(block: Blockquote): GitHubAlert | null {
     if (block.type === 'code') {
       const code = getCodeProps(block);
       if (code.lang.toLowerCase() === 'mermaid') {
-        return <pre class="mermaid">{code.code}</pre>;
+        return <pre class="mermaid" data-processed="true" set:html={renderMermaid(code.code)} />;
       }
 
       return <Code code={code.code} lang={code.lang} meta={code.meta} />;
diff --git a/src/frontend/src/components/api-reference/InheritanceDiagram.astro b/src/frontend/src/components/api-reference/InheritanceDiagram.astro
index 194df381c..a433f3acf 100644
--- a/src/frontend/src/components/api-reference/InheritanceDiagram.astro
+++ b/src/frontend/src/components/api-reference/InheritanceDiagram.astro
@@ -9,6 +9,7 @@ interface Props {
 }
 
 import { shortTypeName } from '@utils/packages';
+import { renderMermaid } from '@utils/mermaid.mjs';
 
 const { type, allTypes = [] } = Astro.props;
 
@@ -71,7 +72,7 @@ if (shouldRender) {
 
 {shouldRender && (
   <div class="inheritance-diagram">
-    <pre class="mermaid" set:text={diagram} />
+    <pre class="mermaid" data-processed="true" set:html={renderMermaid(diagram)} />
   </div>
 )}
 
diff --git a/src/frontend/src/components/starlight/Head.astro b/src/frontend/src/components/starlight/Head.astro
index 3e0e17c51..d88705d6e 100644
--- a/src/frontend/src/components/starlight/Head.astro
+++ b/src/frontend/src/components/starlight/Head.astro
@@ -57,7 +57,6 @@ function computeSourceUrl() {
 }
 <script>
   import '@scripts/deployment-guard';
-  import '@scripts/mermaid';
 
   document.addEventListener('astro:before-swap', (event) => {
     const theme = document.documentElement.dataset.theme;
diff --git a/src/frontend/src/content/docs/community/contributor-guide.mdx b/src/frontend/src/content/docs/community/contributor-guide.mdx
index 0543b66e0..466f6767a 100644
--- a/src/frontend/src/content/docs/community/contributor-guide.mdx
+++ b/src/frontend/src/content/docs/community/contributor-guide.mdx
@@ -546,7 +546,11 @@ The `aspire.dev` site supports several Markdown extensions to enhance your docum
 
 ### Mermaid diagrams
 
-You can write mermaid diagrams as code blocks:
+You can write Mermaid diagrams as code blocks. Pele renders these diagrams to SVG during page generation, and their colors follow the selected site theme without browser-side re-rendering. Architecture diagrams support the `logos`, `iconoir`, and custom `aspire` icon packs.
+
+Use technology-specific icons for named resources, such as `logos:redis`, `logos:postgresql`, or `logos:rabbitmq-icon`. Use role icons for language-neutral concepts: `iconoir:network` for AppHost, `iconoir:puzzle` for hosting integrations, `iconoir:server-connection` for client integrations, and `iconoir:code` for applications. Keep built-in icons such as `server` and `database` for unspecified infrastructure or technologies without a suitable bundled logo.
+
+Reuse existing product artwork from `src/assets/icons/` through the local `aspire` pack when the `logos` pack has no suitable logo, such as `aspire:microsoft-foundry` or `aspire:azure-key-vault`. The renderer embeds these assets and preserves their aspect ratios, including light and dark variants where available. Choose conceptual icons by meaning: `iconoir:sparks` for AI models and deployments, `iconoir:key` for secrets, and `iconoir:folder` for workspaces. Use current product names in labels without changing API or package identifiers.
 
 ````md title="src/content/docs/example.md"
 ```mermaid
diff --git a/src/frontend/src/content/docs/integrations/ai/ollama/ollama-get-started.mdx b/src/frontend/src/content/docs/integrations/ai/ollama/ollama-get-started.mdx
index 00d7fde60..d8215268f 100644
--- a/src/frontend/src/content/docs/integrations/ai/ollama/ollama-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/ai/ollama/ollama-get-started.mdx
@@ -41,14 +41,14 @@ The Ollama integration has two sides: a **hosting integration** that you use in
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Hosting integration] in apphost
-  service ollama(server)[Ollama server] in apphost
-  service model(database)[Model resource] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service ollama(logos:ollama)[Ollama server] in apphost
+  service model(iconoir:sparks)[Model resource] in apphost
 
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   hosting:R --> L:ollama
   ollama:R --> L:model
diff --git a/src/frontend/src/content/docs/integrations/ai/openai/openai-get-started.mdx b/src/frontend/src/content/docs/integrations/ai/openai/openai-get-started.mdx
index 9bb176901..1aad150b0 100644
--- a/src/frontend/src/content/docs/integrations/ai/openai/openai-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/ai/openai/openai-get-started.mdx
@@ -37,15 +37,15 @@ The OpenAI integration has two sides: a **hosting integration** that you use in
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Hosting integration] in apphost
-  service openai(internet)[OpenAI API] in apphost
-  service model(database)[chat model] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service openai(logos:openai-icon)[OpenAI API] in apphost
+  service model(iconoir:sparks)[chat model] in apphost
 
   service client(iconoir:server-connection)[Client integration] in consumer
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   hosting:R --> L:openai
   openai:R --> L:model
diff --git a/src/frontend/src/content/docs/integrations/ai/squad/squad-get-started.mdx b/src/frontend/src/content/docs/integrations/ai/squad/squad-get-started.mdx
index 513210c5c..3f788ba04 100644
--- a/src/frontend/src/content/docs/integrations/ai/squad/squad-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/ai/squad/squad-get-started.mdx
@@ -21,12 +21,12 @@ The integration does not start an agent process or service. Add the separate `Sq
 
 ```mermaid
 architecture-beta
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Squad resource] in apphost
-  service team(database)[Squad workspace] in apphost
-  service app(server)[Service] in consumer
+  service hosting(iconoir:puzzle)[Squad resource] in apphost
+  service team(iconoir:folder)[Squad workspace] in apphost
+  service app(iconoir:code)[Service] in consumer
 
   hosting:R --> L:team
   hosting:R --> L:app
diff --git a/src/frontend/src/content/docs/integrations/ai/stable-diffusion-cpp/stable-diffusion-cpp-get-started.mdx b/src/frontend/src/content/docs/integrations/ai/stable-diffusion-cpp/stable-diffusion-cpp-get-started.mdx
index 4e1c933ae..249840ba6 100644
--- a/src/frontend/src/content/docs/integrations/ai/stable-diffusion-cpp/stable-diffusion-cpp-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/ai/stable-diffusion-cpp/stable-diffusion-cpp-get-started.mdx
@@ -23,13 +23,13 @@ The hosting package runs the stable-diffusion.cpp container, downloads one Huggi
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Hosting integration] in apphost
-  service server(server)[stable-diffusion.cpp server] in apphost
-  service model(database)[Hugging Face model] in apphost
-  service app(server)[Application] in consumer
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service server(iconoir:sparks)[stable-diffusion.cpp server] in apphost
+  service model(logos:hugging-face-icon)[Hugging Face model] in apphost
+  service app(iconoir:code)[Application] in consumer
 
   hosting:R --> L:server
   server:R --> L:model
diff --git a/src/frontend/src/content/docs/integrations/caching/garnet/garnet-get-started.mdx b/src/frontend/src/content/docs/integrations/caching/garnet/garnet-get-started.mdx
index a71a39320..998dfdfe6 100644
--- a/src/frontend/src/content/docs/integrations/caching/garnet/garnet-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/caching/garnet/garnet-get-started.mdx
@@ -36,14 +36,14 @@ The Garnet integration has two sides: a **hosting integration** that you use in
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Hosting integration] in apphost
-  service garnet(server)[Garnet server] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service garnet(aspire:garnet)[Garnet server] in apphost
 
   service client(iconoir:server-connection)[Client integration] in consumer
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   hosting:R --> L:garnet
   garnet:R --> L:client
diff --git a/src/frontend/src/content/docs/integrations/caching/redis-distributed/redis-distributed-get-started.mdx b/src/frontend/src/content/docs/integrations/caching/redis-distributed/redis-distributed-get-started.mdx
index bff4d7650..d9d186d5b 100644
--- a/src/frontend/src/content/docs/integrations/caching/redis-distributed/redis-distributed-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/caching/redis-distributed/redis-distributed-get-started.mdx
@@ -36,14 +36,14 @@ The Redis distributed caching integration has two sides: the **hosting integrati
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Hosting integration] in apphost
-  service redis(server)[Redis server] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service redis(logos:redis)[Redis server] in apphost
 
   service client(iconoir:server-connection)[StackExchange Redis distributed cache client] in consumer
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   hosting:R --> L:redis
   redis:R --> L:client
diff --git a/src/frontend/src/content/docs/integrations/caching/redis-output/redis-output-get-started.mdx b/src/frontend/src/content/docs/integrations/caching/redis-output/redis-output-get-started.mdx
index d7a8be89c..4f59aab8d 100644
--- a/src/frontend/src/content/docs/integrations/caching/redis-output/redis-output-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/caching/redis-output/redis-output-get-started.mdx
@@ -35,14 +35,14 @@ The Redis output caching integration has two sides: a **hosting integration** th
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[ASP NET Core app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[ASP NET Core app]
 
-  service hosting(server)[Hosting integration] in apphost
-  service redis(server)[Redis server] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service redis(logos:redis)[Redis server] in apphost
 
   service client(iconoir:server-connection)[StackExchange Redis output cache client] in consumer
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   hosting:R --> L:redis
   redis:R --> L:client
diff --git a/src/frontend/src/content/docs/integrations/caching/redis/redis-get-started.mdx b/src/frontend/src/content/docs/integrations/caching/redis/redis-get-started.mdx
index eee0b5b1c..2f083c0a6 100644
--- a/src/frontend/src/content/docs/integrations/caching/redis/redis-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/caching/redis/redis-get-started.mdx
@@ -37,14 +37,14 @@ The Redis integration has two sides: a **hosting integration** that you use in y
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Hosting integration] in apphost
-  service redis(server)[Redis server] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service redis(logos:redis)[Redis server] in apphost
 
   service client(iconoir:server-connection)[Client integration] in consumer
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   hosting:R --> L:redis
   redis:R --> L:client
diff --git a/src/frontend/src/content/docs/integrations/caching/valkey/valkey-get-started.mdx b/src/frontend/src/content/docs/integrations/caching/valkey/valkey-get-started.mdx
index 5bc37a538..608f8fe3f 100644
--- a/src/frontend/src/content/docs/integrations/caching/valkey/valkey-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/caching/valkey/valkey-get-started.mdx
@@ -36,14 +36,14 @@ The Valkey integration has two sides: a **hosting integration** that you use in
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Hosting integration] in apphost
-  service valkey(server)[Valkey server] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service valkey(logos:valkey-icon)[Valkey server] in apphost
 
   service client(iconoir:server-connection)[Client integration] in consumer
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   hosting:R --> L:valkey
   valkey:R --> L:client
diff --git a/src/frontend/src/content/docs/integrations/cloud/azure/azure-ai-foundry/azure-ai-foundry-get-started.mdx b/src/frontend/src/content/docs/integrations/cloud/azure/azure-ai-foundry/azure-ai-foundry-get-started.mdx
index 3bbed4c09..83bdd0c5b 100644
--- a/src/frontend/src/content/docs/integrations/cloud/azure/azure-ai-foundry/azure-ai-foundry-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/cloud/azure/azure-ai-foundry/azure-ai-foundry-get-started.mdx
@@ -38,15 +38,15 @@ The Azure AI Foundry integration has two sides: a **hosting integration** that y
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Hosting integration] in apphost
-  service foundry(internet)[Azure AI Foundry] in apphost
-  service model(database)[chat deployment] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service foundry(aspire:microsoft-foundry)[Microsoft Foundry] in apphost
+  service model(iconoir:sparks)[chat deployment] in apphost
 
   service client(iconoir:server-connection)[Client SDK] in consumer
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   hosting:R --> L:foundry
   foundry:R --> L:model
diff --git a/src/frontend/src/content/docs/integrations/cloud/azure/azure-ai-inference/azure-ai-inference-get-started.mdx b/src/frontend/src/content/docs/integrations/cloud/azure/azure-ai-inference/azure-ai-inference-get-started.mdx
index 604cf833e..63ebe0912 100644
--- a/src/frontend/src/content/docs/integrations/cloud/azure/azure-ai-inference/azure-ai-inference-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/cloud/azure/azure-ai-inference/azure-ai-inference-get-started.mdx
@@ -35,13 +35,13 @@ Azure AI Inference doesn't have a dedicated Aspire hosting integration. Instead,
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service endpoint(internet)[Azure AI Inference endpoint] in apphost
+  service endpoint(iconoir:sparks)[Azure AI Inference endpoint] in apphost
 
   service client(iconoir:server-connection)[Client integration] in consumer
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   endpoint:R --> L:client
   client:R --> L:app
diff --git a/src/frontend/src/content/docs/integrations/cloud/azure/azure-ai-search/azure-ai-search-get-started.mdx b/src/frontend/src/content/docs/integrations/cloud/azure/azure-ai-search/azure-ai-search-get-started.mdx
index 8f7408e33..3e983f9ab 100644
--- a/src/frontend/src/content/docs/integrations/cloud/azure/azure-ai-search/azure-ai-search-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/cloud/azure/azure-ai-search/azure-ai-search-get-started.mdx
@@ -36,14 +36,14 @@ The Azure AI Search integration has two sides: a **hosting integration** that yo
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Hosting integration] in apphost
-  service search(server)[Azure AI Search] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service search(aspire:azure-search)[Azure AI Search] in apphost
 
   service client(iconoir:server-connection)[Client integration] in consumer
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   hosting:R --> L:search
   search:R --> L:client
diff --git a/src/frontend/src/content/docs/integrations/cloud/azure/azure-app-configuration/azure-app-configuration-get-started.mdx b/src/frontend/src/content/docs/integrations/cloud/azure/azure-app-configuration/azure-app-configuration-get-started.mdx
index 42b9622fc..bc0e7cb18 100644
--- a/src/frontend/src/content/docs/integrations/cloud/azure/azure-app-configuration/azure-app-configuration-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/cloud/azure/azure-app-configuration/azure-app-configuration-get-started.mdx
@@ -36,13 +36,13 @@ The Azure App Configuration integration has two sides: a **hosting integration**
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Hosting integration] in apphost
-  service appconfig(server)[App Configuration store] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service appconfig(aspire:azure-app-configuration)[App Configuration store] in apphost
 
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   hosting:R --> L:appconfig
   appconfig:R --> L:app
diff --git a/src/frontend/src/content/docs/integrations/cloud/azure/azure-app-service/azure-app-service-get-started.mdx b/src/frontend/src/content/docs/integrations/cloud/azure/azure-app-service/azure-app-service-get-started.mdx
index 1b78e1947..fb7cc9aa9 100644
--- a/src/frontend/src/content/docs/integrations/cloud/azure/azure-app-service/azure-app-service-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/cloud/azure/azure-app-service/azure-app-service-get-started.mdx
@@ -39,16 +39,16 @@ Azure App Service is a **deployment target**, not a data service. There is no cl
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group azure(cloud)[Azure]
+  group apphost(iconoir:network)[AppHost]
+  group azure(logos:azure-icon)[Azure]
 
-  service hosting(server)[Hosting integration] in apphost
-  service env(server)[App Service environment] in apphost
-  service project(server)[Project or container resource] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service env(aspire:azure-app-service)[App Service environment] in apphost
+  service project(iconoir:code)[Project or container resource] in apphost
 
-  service plan(server)[App Service Plan] in azure
-  service acr(database)[Container Registry] in azure
-  service website(server)[App Service website] in azure
+  service plan(aspire:azure-app-service)[App Service Plan] in azure
+  service acr(aspire:azure-container-registry)[Container Registry] in azure
+  service website(iconoir:app-window)[App Service website] in azure
 
   hosting:R --> L:env
   env:R --> L:project
diff --git a/src/frontend/src/content/docs/integrations/cloud/azure/azure-cache-redis/azure-cache-redis-get-started.mdx b/src/frontend/src/content/docs/integrations/cloud/azure/azure-cache-redis/azure-cache-redis-get-started.mdx
index 80dd0af46..62916c750 100644
--- a/src/frontend/src/content/docs/integrations/cloud/azure/azure-cache-redis/azure-cache-redis-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/cloud/azure/azure-cache-redis/azure-cache-redis-get-started.mdx
@@ -36,14 +36,14 @@ The Azure Cache for Redis integration has two sides: a **hosting integration** t
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Hosting integration] in apphost
-  service redis(server)[Azure Managed Redis] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service redis(logos:redis)[Azure Managed Redis] in apphost
 
   service client(iconoir:server-connection)[Client integration] in consumer
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   hosting:R --> L:redis
   redis:R --> L:client
diff --git a/src/frontend/src/content/docs/integrations/cloud/azure/azure-container-registry/azure-container-registry-get-started.mdx b/src/frontend/src/content/docs/integrations/cloud/azure/azure-container-registry/azure-container-registry-get-started.mdx
index 085a20d2b..3826d439c 100644
--- a/src/frontend/src/content/docs/integrations/cloud/azure/azure-container-registry/azure-container-registry-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/cloud/azure/azure-container-registry/azure-container-registry-get-started.mdx
@@ -45,14 +45,14 @@ Azure Container Registry is a **publish-target** integration. Unlike database or
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group deploy(cloud)[Deployment]
+  group apphost(iconoir:network)[AppHost]
+  group deploy(iconoir:cloud-upload)[Deployment]
 
-  service hosting(server)[Hosting integration] in apphost
-  service acr(logos:microsoft-azure)[Azure Container Registry] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service acr(aspire:azure-container-registry)[Azure Container Registry] in apphost
 
   service compute(logos:microsoft-azure)[Compute environment] in deploy
-  service pipeline(server)[Image push pipeline] in deploy
+  service pipeline(iconoir:cloud-upload)[Image push pipeline] in deploy
 
   hosting:R --> L:acr
   acr:R --> L:compute
diff --git a/src/frontend/src/content/docs/integrations/cloud/azure/azure-cosmos-db/azure-cosmos-db-get-started.mdx b/src/frontend/src/content/docs/integrations/cloud/azure/azure-cosmos-db/azure-cosmos-db-get-started.mdx
index 8235280d0..3d59c8e63 100644
--- a/src/frontend/src/content/docs/integrations/cloud/azure/azure-cosmos-db/azure-cosmos-db-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/cloud/azure/azure-cosmos-db/azure-cosmos-db-get-started.mdx
@@ -37,15 +37,15 @@ The Azure Cosmos DB integration has two sides: a **hosting integration** that yo
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Hosting integration] in apphost
-  service cosmos(database)[Cosmos DB account] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service cosmos(aspire:azure-cosmos-db)[Cosmos DB account] in apphost
   service db(database)[cosmosdb] in apphost
 
   service client(iconoir:server-connection)[Client integration] in consumer
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   hosting:R --> L:cosmos
   cosmos:R --> L:db
diff --git a/src/frontend/src/content/docs/integrations/cloud/azure/azure-event-hubs/azure-event-hubs-get-started.mdx b/src/frontend/src/content/docs/integrations/cloud/azure/azure-event-hubs/azure-event-hubs-get-started.mdx
index cd9dd5a55..92d804624 100644
--- a/src/frontend/src/content/docs/integrations/cloud/azure/azure-event-hubs/azure-event-hubs-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/cloud/azure/azure-event-hubs/azure-event-hubs-get-started.mdx
@@ -37,15 +37,15 @@ The Azure Event Hubs integration has two sides: a **hosting integration** that y
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Hosting integration] in apphost
-  service ns(server)[Event Hubs namespace] in apphost
-  service hub(database)[messages hub] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service ns(aspire:azure-event-hubs)[Event Hubs namespace] in apphost
+  service hub(iconoir:message)[messages hub] in apphost
 
   service client(iconoir:server-connection)[Client integration] in consumer
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   hosting:R --> L:ns
   ns:R --> L:hub
diff --git a/src/frontend/src/content/docs/integrations/cloud/azure/azure-functions/azure-functions-get-started.mdx b/src/frontend/src/content/docs/integrations/cloud/azure/azure-functions/azure-functions-get-started.mdx
index 26806c26a..596913dcd 100644
--- a/src/frontend/src/content/docs/integrations/cloud/azure/azure-functions/azure-functions-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/cloud/azure/azure-functions/azure-functions-get-started.mdx
@@ -37,14 +37,14 @@ The Azure Functions integration has one side: a **hosting integration** that you
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group functions(server)[Functions project]
+  group apphost(iconoir:network)[AppHost]
+  group functions(aspire:azure-functions)[Functions project]
 
-  service hosting(server)[Hosting integration] in apphost
-  service storage(database)[Host storage] in apphost
-  service trigger(server)[Trigger resource] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service storage(aspire:azure-storage)[Host storage] in apphost
+  service trigger(iconoir:play)[Trigger resource] in apphost
 
-  service worker(server)[Functions runtime] in functions
+  service worker(aspire:azure-functions)[Functions runtime] in functions
 
   hosting:R --> L:storage
   hosting:R --> L:trigger
diff --git a/src/frontend/src/content/docs/integrations/cloud/azure/azure-key-vault/azure-key-vault-get-started.mdx b/src/frontend/src/content/docs/integrations/cloud/azure/azure-key-vault/azure-key-vault-get-started.mdx
index cd6ce8dda..a77ffd69f 100644
--- a/src/frontend/src/content/docs/integrations/cloud/azure/azure-key-vault/azure-key-vault-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/cloud/azure/azure-key-vault/azure-key-vault-get-started.mdx
@@ -36,14 +36,14 @@ The Azure Key Vault integration has two sides: a **hosting integration** that yo
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Hosting integration] in apphost
-  service kv(server)[Azure Key Vault] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service kv(aspire:azure-key-vault)[Azure Key Vault] in apphost
 
   service client(iconoir:server-connection)[Client integration] in consumer
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   hosting:R --> L:kv
   kv:R --> L:client
diff --git a/src/frontend/src/content/docs/integrations/cloud/azure/azure-openai/azure-openai-get-started.mdx b/src/frontend/src/content/docs/integrations/cloud/azure/azure-openai/azure-openai-get-started.mdx
index 73f124e5f..eea12139a 100644
--- a/src/frontend/src/content/docs/integrations/cloud/azure/azure-openai/azure-openai-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/cloud/azure/azure-openai/azure-openai-get-started.mdx
@@ -37,15 +37,15 @@ The Azure OpenAI integration has two sides: a **hosting integration** that you u
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Hosting integration] in apphost
-  service openai(cloud)[Azure OpenAI] in apphost
-  service deployment(database)[chat deployment] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service openai(aspire:azure-openai)[Azure OpenAI] in apphost
+  service deployment(iconoir:sparks)[chat deployment] in apphost
 
   service client(iconoir:server-connection)[Client integration] in consumer
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   hosting:R --> L:openai
   openai:R --> L:deployment
diff --git a/src/frontend/src/content/docs/integrations/cloud/azure/azure-postgresql/azure-postgresql-get-started.mdx b/src/frontend/src/content/docs/integrations/cloud/azure/azure-postgresql/azure-postgresql-get-started.mdx
index 9447227a1..c3bdfb76b 100644
--- a/src/frontend/src/content/docs/integrations/cloud/azure/azure-postgresql/azure-postgresql-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/cloud/azure/azure-postgresql/azure-postgresql-get-started.mdx
@@ -38,15 +38,15 @@ The Azure PostgreSQL integration has two sides: a **hosting integration** that y
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Hosting integration] in apphost
-  service server(logos:postgresql)[Azure PG Flexible Server] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service server(aspire:azure-postgresql)[Azure PG Flexible Server] in apphost
   service db(database)[postgresdb] in apphost
 
   service client(iconoir:server-connection)[Client and env vars] in consumer
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   hosting:R --> L:server
   server:R --> L:db
diff --git a/src/frontend/src/content/docs/integrations/cloud/azure/azure-service-bus/azure-service-bus-get-started.mdx b/src/frontend/src/content/docs/integrations/cloud/azure/azure-service-bus/azure-service-bus-get-started.mdx
index 5b1114c2b..29ee8129b 100644
--- a/src/frontend/src/content/docs/integrations/cloud/azure/azure-service-bus/azure-service-bus-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/cloud/azure/azure-service-bus/azure-service-bus-get-started.mdx
@@ -36,15 +36,15 @@ The Azure Service Bus integration has two sides: a **hosting integration** that
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Hosting integration] in apphost
-  service namespace(logos:microsoft-azure)[Service Bus namespace] in apphost
-  service queue(server)[Queue or topic] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service namespace(aspire:azure-service-bus)[Service Bus namespace] in apphost
+  service queue(iconoir:message)[Queue or topic] in apphost
 
   service client(iconoir:server-connection)[Client integration] in consumer
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   hosting:R --> L:namespace
   namespace:R --> L:queue
diff --git a/src/frontend/src/content/docs/integrations/cloud/azure/azure-signalr/azure-signalr-get-started.mdx b/src/frontend/src/content/docs/integrations/cloud/azure/azure-signalr/azure-signalr-get-started.mdx
index 50c81d866..a9e5ded8e 100644
--- a/src/frontend/src/content/docs/integrations/cloud/azure/azure-signalr/azure-signalr-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/cloud/azure/azure-signalr/azure-signalr-get-started.mdx
@@ -35,13 +35,13 @@ The Azure SignalR Service integration has two sides: a **hosting integration** t
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Hosting integration] in apphost
-  service signalr(server)[Azure SignalR Service] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service signalr(aspire:azure-signalr)[Azure SignalR Service] in apphost
 
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   hosting:R --> L:signalr
   signalr:R --> L:app
diff --git a/src/frontend/src/content/docs/integrations/cloud/azure/azure-sql-database/azure-sql-database-get-started.mdx b/src/frontend/src/content/docs/integrations/cloud/azure/azure-sql-database/azure-sql-database-get-started.mdx
index 7948472d6..18778d123 100644
--- a/src/frontend/src/content/docs/integrations/cloud/azure/azure-sql-database/azure-sql-database-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/cloud/azure/azure-sql-database/azure-sql-database-get-started.mdx
@@ -38,15 +38,15 @@ The Azure SQL Database integration has two sides: a **hosting integration** that
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Hosting integration] in apphost
-  service sql(logos:microsoft-azure)[Azure SQL Server] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service sql(aspire:azure-sql)[Azure SQL Server] in apphost
   service db(database)[database] in apphost
 
   service client(iconoir:server-connection)[Client integration] in consumer
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   hosting:R --> L:sql
   sql:R --> L:db
diff --git a/src/frontend/src/content/docs/integrations/cloud/azure/azure-storage-blobs/azure-storage-blobs-get-started.mdx b/src/frontend/src/content/docs/integrations/cloud/azure/azure-storage-blobs/azure-storage-blobs-get-started.mdx
index 426d1e6c7..8b4eddbdd 100644
--- a/src/frontend/src/content/docs/integrations/cloud/azure/azure-storage-blobs/azure-storage-blobs-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/cloud/azure/azure-storage-blobs/azure-storage-blobs-get-started.mdx
@@ -36,15 +36,15 @@ The Azure Blob Storage integration has two sides: a **hosting integration** that
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Hosting integration] in apphost
-  service storage(logos:microsoft-azure)[Azure Storage account] in apphost
-  service blobs(disk)[Blob resource] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service storage(aspire:azure-storage)[Azure Storage account] in apphost
+  service blobs(aspire:azure-storage-blobs)[Blob resource] in apphost
 
   service client(iconoir:server-connection)[Client integration] in consumer
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   hosting:R --> L:storage
   storage:R --> L:blobs
diff --git a/src/frontend/src/content/docs/integrations/cloud/azure/azure-storage-queues/azure-storage-queues-get-started.mdx b/src/frontend/src/content/docs/integrations/cloud/azure/azure-storage-queues/azure-storage-queues-get-started.mdx
index a4224007a..559406cfd 100644
--- a/src/frontend/src/content/docs/integrations/cloud/azure/azure-storage-queues/azure-storage-queues-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/cloud/azure/azure-storage-queues/azure-storage-queues-get-started.mdx
@@ -37,15 +37,15 @@ The Azure Queue Storage integration has two sides: a **hosting integration** tha
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Hosting integration] in apphost
-  service storage(server)[Azure Storage] in apphost
-  service queue(server)[Queue resource] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service storage(aspire:azure-storage)[Azure Storage] in apphost
+  service queue(aspire:azure-storage-queues)[Queue resource] in apphost
 
   service client(iconoir:server-connection)[Client integration] in consumer
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   hosting:R --> L:storage
   storage:R --> L:queue
diff --git a/src/frontend/src/content/docs/integrations/cloud/azure/azure-storage-tables/azure-storage-tables-get-started.mdx b/src/frontend/src/content/docs/integrations/cloud/azure/azure-storage-tables/azure-storage-tables-get-started.mdx
index fb0a2c3da..39547d39b 100644
--- a/src/frontend/src/content/docs/integrations/cloud/azure/azure-storage-tables/azure-storage-tables-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/cloud/azure/azure-storage-tables/azure-storage-tables-get-started.mdx
@@ -37,15 +37,15 @@ The Azure Table Storage integration has two sides: a **hosting integration** tha
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Hosting integration] in apphost
-  service storage(server)[Azure Storage account] in apphost
-  service tables(database)[table storage] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service storage(aspire:azure-storage)[Azure Storage account] in apphost
+  service tables(aspire:azure-storage-tables)[table storage] in apphost
 
   service client(iconoir:server-connection)[Client integration] in consumer
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   hosting:R --> L:storage
   storage:R --> L:tables
diff --git a/src/frontend/src/content/docs/integrations/cloud/azure/azure-web-pubsub/azure-web-pubsub-get-started.mdx b/src/frontend/src/content/docs/integrations/cloud/azure/azure-web-pubsub/azure-web-pubsub-get-started.mdx
index 359f40bc8..9819cc5cf 100644
--- a/src/frontend/src/content/docs/integrations/cloud/azure/azure-web-pubsub/azure-web-pubsub-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/cloud/azure/azure-web-pubsub/azure-web-pubsub-get-started.mdx
@@ -35,15 +35,15 @@ The Azure Web PubSub integration has two sides: a **hosting integration** that y
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Hosting integration] in apphost
-  service wps(server)[Azure Web PubSub] in apphost
-  service hub(server)[Hub] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service wps(aspire:azure-web-pubsub)[Azure Web PubSub] in apphost
+  service hub(iconoir:network)[Hub] in apphost
 
   service client(iconoir:server-connection)[Client integration] in consumer
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   hosting:R --> L:wps
   wps:R --> L:hub
diff --git a/src/frontend/src/content/docs/integrations/cloud/stripe/stripe-get-started.mdx b/src/frontend/src/content/docs/integrations/cloud/stripe/stripe-get-started.mdx
index 0c42d2d48..1709bf48d 100644
--- a/src/frontend/src/content/docs/integrations/cloud/stripe/stripe-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/cloud/stripe/stripe-get-started.mdx
@@ -38,9 +38,9 @@ The [📦 CommunityToolkit.Aspire.Hosting.Stripe](https://nuget.org/packages/Com
 
 ```mermaid
 flowchart LR
-    Stripe["Stripe events"] --> CLI["Stripe CLI container"]
-    CLI -->|HTTP webhook| API["Local webhook handler"]
-    AppHost["Aspire AppHost"] -->|API key parameter| CLI
+    Stripe@{ icon: "logos:stripe", form: "square", label: "Stripe events" } --> CLI@{ icon: "iconoir:terminal", form: "square", label: "Stripe CLI container" }
+    CLI -->|HTTP webhook| API@{ icon: "iconoir:code", form: "square", label: "Local webhook handler" }
+    AppHost@{ icon: "iconoir:network", form: "square", label: "Aspire AppHost" } -->|API key parameter| CLI
     CLI -->|Signing secret in logs| AppHost
     AppHost -->|Environment variable| API
 ```
diff --git a/src/frontend/src/content/docs/integrations/databases/chroma/chroma-get-started.mdx b/src/frontend/src/content/docs/integrations/databases/chroma/chroma-get-started.mdx
index a62f61b97..c14b677ca 100644
--- a/src/frontend/src/content/docs/integrations/databases/chroma/chroma-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/databases/chroma/chroma-get-started.mdx
@@ -28,8 +28,8 @@ The [📦 CommunityToolkit.Aspire.Chroma](https://nuget.org/packages/CommunityTo
 
 ```mermaid
 flowchart LR
-    AppHost[AppHost hosting integration] --> Chroma[Chroma container]
-    AppHost -->|Connection information| App[Consuming app]
+    AppHost@{ icon: "iconoir:network", form: "square", label: "AppHost hosting integration" } --> Chroma@{ icon: "logos:chroma", form: "square", label: "Chroma container" }
+    AppHost -->|Connection information| App@{ icon: "iconoir:code", form: "square", label: "Consuming app" }
     App -->|HTTP v2 API| Chroma
 ```
 
diff --git a/src/frontend/src/content/docs/integrations/databases/clickhouse/clickhouse-get-started.mdx b/src/frontend/src/content/docs/integrations/databases/clickhouse/clickhouse-get-started.mdx
index ca50aa747..b23650aa1 100644
--- a/src/frontend/src/content/docs/integrations/databases/clickhouse/clickhouse-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/databases/clickhouse/clickhouse-get-started.mdx
@@ -35,15 +35,15 @@ The ClickHouse integration has two sides: a **hosting integration** that you use
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Hosting integration] in apphost
-  service clickhouse(database)[ClickHouse server] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service clickhouse(aspire:clickhouse)[ClickHouse server] in apphost
   service db(database)[clickhousedb] in apphost
 
   service client(iconoir:server-connection)[Client integration] in consumer
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   hosting:R --> L:clickhouse
   clickhouse:R --> L:db
diff --git a/src/frontend/src/content/docs/integrations/databases/duckdb/duckdb-get-started.mdx b/src/frontend/src/content/docs/integrations/databases/duckdb/duckdb-get-started.mdx
index a4ecf68d4..e62d5a10c 100644
--- a/src/frontend/src/content/docs/integrations/databases/duckdb/duckdb-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/databases/duckdb/duckdb-get-started.mdx
@@ -24,9 +24,9 @@ The [📦 CommunityToolkit.Aspire.DuckDB.NET.Data](https://nuget.org/packages/Co
 
 ```mermaid
 flowchart LR
-    AppHost[AppHost file resource] -->|Connection string| App[Consuming process]
-    App --> Engine[Embedded DuckDB engine]
-    Engine --> File[Database file]
+    AppHost@{ icon: "iconoir:network", form: "square", label: "AppHost file resource" } -->|Connection string| App@{ icon: "iconoir:code", form: "square", label: "Consuming process" }
+    App --> Engine@{ icon: "iconoir:cpu", form: "square", label: "Embedded DuckDB engine" }
+    Engine --> File@{ icon: "iconoir:database", form: "square", label: "Database file" }
 ```
 
 <Aside type="caution">
diff --git a/src/frontend/src/content/docs/integrations/databases/efcore/azure-cosmos-db/azure-cosmos-db-get-started.mdx b/src/frontend/src/content/docs/integrations/databases/efcore/azure-cosmos-db/azure-cosmos-db-get-started.mdx
index f89f06829..344a43862 100644
--- a/src/frontend/src/content/docs/integrations/databases/efcore/azure-cosmos-db/azure-cosmos-db-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/databases/efcore/azure-cosmos-db/azure-cosmos-db-get-started.mdx
@@ -36,15 +36,15 @@ The EF Core Azure Cosmos DB integration has two sides: a **hosting integration**
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Hosting integration] in apphost
-  service cosmos(database)[Cosmos DB account] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service cosmos(aspire:azure-cosmos-db)[Cosmos DB account] in apphost
   service db(database)[cosmosdb] in apphost
 
   service client(iconoir:server-connection)[EF Core client integration] in consumer
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   hosting:R --> L:cosmos
   cosmos:R --> L:db
diff --git a/src/frontend/src/content/docs/integrations/databases/efcore/azure-postgresql/azure-postgresql-get-started.mdx b/src/frontend/src/content/docs/integrations/databases/efcore/azure-postgresql/azure-postgresql-get-started.mdx
index d183a992d..0fa0385e8 100644
--- a/src/frontend/src/content/docs/integrations/databases/efcore/azure-postgresql/azure-postgresql-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/databases/efcore/azure-postgresql/azure-postgresql-get-started.mdx
@@ -35,15 +35,15 @@ The Azure PostgreSQL EF Core integration has two sides: a **hosting integration*
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Hosting integration] in apphost
-  service postgres(logos:postgresql)[Azure PostgreSQL Flexible Server] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service postgres(aspire:azure-postgresql)[Azure PostgreSQL Flexible Server] in apphost
   service db(database)[postgresdb] in apphost
 
   service client(iconoir:server-connection)[EF Core client integration] in consumer
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   hosting:R --> L:postgres
   postgres:R --> L:db
diff --git a/src/frontend/src/content/docs/integrations/databases/efcore/azure-sql/azure-sql-get-started.mdx b/src/frontend/src/content/docs/integrations/databases/efcore/azure-sql/azure-sql-get-started.mdx
index f8cf592a2..2e8d97017 100644
--- a/src/frontend/src/content/docs/integrations/databases/efcore/azure-sql/azure-sql-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/databases/efcore/azure-sql/azure-sql-get-started.mdx
@@ -37,15 +37,15 @@ The Azure SQL EF Core integration has two sides: a **hosting integration** that
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Hosting integration] in apphost
-  service sql(database)[Azure SQL server] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service sql(aspire:azure-sql)[Azure SQL server] in apphost
   service db(database)[database] in apphost
 
   service client(iconoir:server-connection)[EF Core client integration] in consumer
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   hosting:R --> L:sql
   sql:R --> L:db
diff --git a/src/frontend/src/content/docs/integrations/databases/efcore/mongodb/mongodb-efcore-get-started.mdx b/src/frontend/src/content/docs/integrations/databases/efcore/mongodb/mongodb-efcore-get-started.mdx
index 16be8a22f..7e1e87c0a 100644
--- a/src/frontend/src/content/docs/integrations/databases/efcore/mongodb/mongodb-efcore-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/databases/efcore/mongodb/mongodb-efcore-get-started.mdx
@@ -35,15 +35,15 @@ The MongoDB EF Core integration has two sides: a **hosting integration** that yo
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Hosting integration] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
   service mongodb(logos:mongodb)[MongoDB server] in apphost
   service db(database)[mydb] in apphost
 
   service client(iconoir:server-connection)[EF Core client integration] in consumer
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   hosting:R --> L:mongodb
   mongodb:R --> L:db
diff --git a/src/frontend/src/content/docs/integrations/databases/efcore/mysql/mysql-get-started.mdx b/src/frontend/src/content/docs/integrations/databases/efcore/mysql/mysql-get-started.mdx
index f802562f0..30b35005e 100644
--- a/src/frontend/src/content/docs/integrations/databases/efcore/mysql/mysql-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/databases/efcore/mysql/mysql-get-started.mdx
@@ -36,15 +36,15 @@ The MySQL EF Core integration has two sides: a **hosting integration** that you
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Hosting integration] in apphost
-  service mysql(database)[MySQL server] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service mysql(logos:mysql-icon)[MySQL server] in apphost
   service db(database)[mysqldb] in apphost
 
   service client(iconoir:server-connection)[EF Core client] in consumer
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   hosting:R --> L:mysql
   mysql:R --> L:db
diff --git a/src/frontend/src/content/docs/integrations/databases/efcore/oracle/oracle-get-started.mdx b/src/frontend/src/content/docs/integrations/databases/efcore/oracle/oracle-get-started.mdx
index a482e29d4..be0109a01 100644
--- a/src/frontend/src/content/docs/integrations/databases/efcore/oracle/oracle-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/databases/efcore/oracle/oracle-get-started.mdx
@@ -35,15 +35,15 @@ The Oracle EF Core integration has two sides: a **hosting integration** that you
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Hosting integration] in apphost
-  service oracle(database)[Oracle server] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service oracle(logos:oracle)[Oracle server] in apphost
   service db(database)[oracledb] in apphost
 
   service client(iconoir:server-connection)[EF Core client integration] in consumer
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   hosting:R --> L:oracle
   oracle:R --> L:db
diff --git a/src/frontend/src/content/docs/integrations/databases/efcore/postgres/postgresql-get-started.mdx b/src/frontend/src/content/docs/integrations/databases/efcore/postgres/postgresql-get-started.mdx
index 6766ebc4a..3cbe6b353 100644
--- a/src/frontend/src/content/docs/integrations/databases/efcore/postgres/postgresql-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/databases/efcore/postgres/postgresql-get-started.mdx
@@ -36,14 +36,14 @@ The PostgreSQL EF Core integration has two sides: a **hosting integration** used
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Postgres hosting] in apphost
+  service hosting(iconoir:puzzle)[Postgres hosting] in apphost
   service db(database)[postgresdb] in apphost
 
-  service efcore(server)[EF Core client] in consumer
-  service app(server)[App] in consumer
+  service efcore(iconoir:server-connection)[EF Core client] in consumer
+  service app(iconoir:code)[App] in consumer
 
   hosting:R --> L:db
   db:R --> L:efcore
diff --git a/src/frontend/src/content/docs/integrations/databases/efcore/sql-server/sql-server-get-started.mdx b/src/frontend/src/content/docs/integrations/databases/efcore/sql-server/sql-server-get-started.mdx
index b98c5f59a..07dea8ef0 100644
--- a/src/frontend/src/content/docs/integrations/databases/efcore/sql-server/sql-server-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/databases/efcore/sql-server/sql-server-get-started.mdx
@@ -35,15 +35,15 @@ The SQL Server EF Core integration has two sides: a **hosting integration** that
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Hosting integration] in apphost
-  service sqlserver(database)[SQL Server] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service sqlserver(aspire:sql-server)[SQL Server] in apphost
   service db(database)[sqldb] in apphost
 
   service client(iconoir:server-connection)[EF Core client integration] in consumer
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   hosting:R --> L:sqlserver
   sqlserver:R --> L:db
diff --git a/src/frontend/src/content/docs/integrations/databases/elasticsearch/elasticsearch-get-started.mdx b/src/frontend/src/content/docs/integrations/databases/elasticsearch/elasticsearch-get-started.mdx
index a3c3d8f2f..30b3445ec 100644
--- a/src/frontend/src/content/docs/integrations/databases/elasticsearch/elasticsearch-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/databases/elasticsearch/elasticsearch-get-started.mdx
@@ -35,14 +35,14 @@ The Elasticsearch integration has two sides: a **hosting integration** that you
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Hosting integration] in apphost
-  service elastic(server)[Elasticsearch instance] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service elastic(logos:elasticsearch)[Elasticsearch instance] in apphost
 
   service client(iconoir:server-connection)[Client integration] in consumer
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   hosting:R --> L:elastic
   elastic:R --> L:client
diff --git a/src/frontend/src/content/docs/integrations/databases/flyway/flyway-get-started.mdx b/src/frontend/src/content/docs/integrations/databases/flyway/flyway-get-started.mdx
index 7b141d39c..f49770bb2 100644
--- a/src/frontend/src/content/docs/integrations/databases/flyway/flyway-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/databases/flyway/flyway-get-started.mdx
@@ -28,10 +28,10 @@ The AppHost declares a Flyway container and provides a host directory containing
 
 ```mermaid
 architecture-beta
-  group apphost(server)[AppHost]
+  group apphost(iconoir:network)[AppHost]
   service flyway(resource)[Flyway resource] in apphost
   service database(database)[Database resource] in apphost
-  service scripts(disk)[Migration scripts]
+  service scripts(iconoir:database-script)[Migration scripts]
   scripts:R --> L:flyway
   flyway:R --> L:database
 ```
diff --git a/src/frontend/src/content/docs/integrations/databases/kurrentdb/kurrentdb-get-started.mdx b/src/frontend/src/content/docs/integrations/databases/kurrentdb/kurrentdb-get-started.mdx
index caee48116..cf96154d6 100644
--- a/src/frontend/src/content/docs/integrations/databases/kurrentdb/kurrentdb-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/databases/kurrentdb/kurrentdb-get-started.mdx
@@ -39,14 +39,14 @@ The KurrentDB integration has two sides: a **hosting integration** that you use
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Hosting integration] in apphost
-  service kurrentdb(database)[KurrentDB server] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service kurrentdb(aspire:kurrentdb)[KurrentDB server] in apphost
 
   service client(iconoir:server-connection)[Client integration] in consumer
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   hosting:R --> L:kurrentdb
   kurrentdb:R --> L:client
diff --git a/src/frontend/src/content/docs/integrations/databases/meilisearch/meilisearch-get-started.mdx b/src/frontend/src/content/docs/integrations/databases/meilisearch/meilisearch-get-started.mdx
index e6da91770..6fb0db615 100644
--- a/src/frontend/src/content/docs/integrations/databases/meilisearch/meilisearch-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/databases/meilisearch/meilisearch-get-started.mdx
@@ -39,14 +39,14 @@ The Meilisearch integration has two sides: a **hosting integration** that you us
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Hosting integration] in apphost
-  service meili(server)[Meilisearch server] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service meili(logos:meilisearch)[Meilisearch server] in apphost
 
   service client(iconoir:server-connection)[Client integration] in consumer
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   hosting:R --> L:meili
   meili:R --> L:client
diff --git a/src/frontend/src/content/docs/integrations/databases/milvus/milvus-get-started.mdx b/src/frontend/src/content/docs/integrations/databases/milvus/milvus-get-started.mdx
index 6fe27285a..003fb6853 100644
--- a/src/frontend/src/content/docs/integrations/databases/milvus/milvus-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/databases/milvus/milvus-get-started.mdx
@@ -37,15 +37,15 @@ The Milvus integration has two sides: a **hosting integration** that you use in
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Hosting integration] in apphost
-  service milvus(server)[Milvus server] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service milvus(logos:milvus-icon)[Milvus server] in apphost
   service db(database)[milvusdb] in apphost
 
   service client(iconoir:server-connection)[Client integration] in consumer
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   hosting:R --> L:milvus
   milvus:R --> L:db
diff --git a/src/frontend/src/content/docs/integrations/databases/mongodb/mongodb-get-started.mdx b/src/frontend/src/content/docs/integrations/databases/mongodb/mongodb-get-started.mdx
index 5e8d73c6d..0c82d946a 100644
--- a/src/frontend/src/content/docs/integrations/databases/mongodb/mongodb-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/databases/mongodb/mongodb-get-started.mdx
@@ -36,15 +36,15 @@ The MongoDB integration has two sides: a **hosting integration** that you use in
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Hosting integration] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
   service mongo(logos:mongodb)[MongoDB server] in apphost
   service db(database)[mongodbname] in apphost
 
   service client(iconoir:server-connection)[Client integration] in consumer
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   hosting:R --> L:mongo
   mongo:R --> L:db
diff --git a/src/frontend/src/content/docs/integrations/databases/mysql/mysql-get-started.mdx b/src/frontend/src/content/docs/integrations/databases/mysql/mysql-get-started.mdx
index a50ba3439..2a21e5f73 100644
--- a/src/frontend/src/content/docs/integrations/databases/mysql/mysql-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/databases/mysql/mysql-get-started.mdx
@@ -38,15 +38,15 @@ The MySQL integration has two sides: a **hosting integration** that you use in y
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Hosting integration] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
   service mysql(logos:mysql)[MySQL server] in apphost
   service db(database)[mysqldb] in apphost
 
   service client(iconoir:server-connection)[Client integration] in consumer
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   hosting:R --> L:mysql
   mysql:R --> L:db
diff --git a/src/frontend/src/content/docs/integrations/databases/postgres/postgres-get-started.mdx b/src/frontend/src/content/docs/integrations/databases/postgres/postgres-get-started.mdx
index f947a27c4..01bb03af2 100644
--- a/src/frontend/src/content/docs/integrations/databases/postgres/postgres-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/databases/postgres/postgres-get-started.mdx
@@ -36,15 +36,15 @@ The PostgreSQL integration has two sides: a **hosting integration** that you use
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Hosting integration] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
   service postgres(logos:postgresql)[PostgreSQL server] in apphost
   service db(database)[postgresdb] in apphost
 
   service client(iconoir:server-connection)[Client integration] in consumer
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   hosting:R --> L:postgres
   postgres:R --> L:db
diff --git a/src/frontend/src/content/docs/integrations/databases/qdrant/qdrant-get-started.mdx b/src/frontend/src/content/docs/integrations/databases/qdrant/qdrant-get-started.mdx
index d7f0c990b..b9faae8a4 100644
--- a/src/frontend/src/content/docs/integrations/databases/qdrant/qdrant-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/databases/qdrant/qdrant-get-started.mdx
@@ -37,14 +37,14 @@ The Qdrant integration has two sides: a **hosting integration** that you use in
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Hosting integration] in apphost
-  service qdrant(server)[Qdrant server] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service qdrant(logos:qdrant-icon)[Qdrant server] in apphost
 
   service client(iconoir:server-connection)[Client integration] in consumer
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   hosting:R --> L:qdrant
   qdrant:R --> L:client
diff --git a/src/frontend/src/content/docs/integrations/databases/ravendb/ravendb-get-started.mdx b/src/frontend/src/content/docs/integrations/databases/ravendb/ravendb-get-started.mdx
index 8d48327ad..f2b5158fc 100644
--- a/src/frontend/src/content/docs/integrations/databases/ravendb/ravendb-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/databases/ravendb/ravendb-get-started.mdx
@@ -38,15 +38,15 @@ The RavenDB integration has two sides: a **hosting integration** that you use in
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Hosting integration] in apphost
-  service ravendb(database)[RavenDB server] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service ravendb(aspire:ravendb)[RavenDB server] in apphost
   service db(database)[ravendb] in apphost
 
   service client(iconoir:server-connection)[Client integration] in consumer
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   hosting:R --> L:ravendb
   ravendb:R --> L:db
diff --git a/src/frontend/src/content/docs/integrations/databases/rustfs/rustfs-get-started.mdx b/src/frontend/src/content/docs/integrations/databases/rustfs/rustfs-get-started.mdx
index aae27ca84..7561b93ff 100644
--- a/src/frontend/src/content/docs/integrations/databases/rustfs/rustfs-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/databases/rustfs/rustfs-get-started.mdx
@@ -29,13 +29,13 @@ The hosting package starts the RustFS container and exposes the S3 endpoint and
 
 ```mermaid
 architecture-beta
-  group apphost(server)[AppHost]
-  group rustfs(server)[RustFS container]
-  service hosting(server)[RustFS hosting integration] in apphost
-  service resource(disk)[RustFS resource] in apphost
+  group apphost(iconoir:network)[AppHost]
+  group rustfs(iconoir:box)[RustFS container]
+  service hosting(iconoir:puzzle)[RustFS hosting integration] in apphost
+  service resource(iconoir:cloud)[RustFS resource] in apphost
   service s3(api)[S3-compatible API] in rustfs
-  service console(server)[Web console] in rustfs
-  service app(server)[Application]
+  service console(iconoir:app-window)[Web console] in rustfs
+  service app(iconoir:code)[Application]
   hosting:R --> L:resource
   resource:R --> L:s3
   resource:R --> L:console
diff --git a/src/frontend/src/content/docs/integrations/databases/seaweedfs/seaweedfs-get-started.mdx b/src/frontend/src/content/docs/integrations/databases/seaweedfs/seaweedfs-get-started.mdx
index 6d9ed2c3a..9fec9957f 100644
--- a/src/frontend/src/content/docs/integrations/databases/seaweedfs/seaweedfs-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/databases/seaweedfs/seaweedfs-get-started.mdx
@@ -35,14 +35,14 @@ The hosting package starts a SeaweedFS container with the Master and Volume serv
 
 ```mermaid
 architecture-beta
-  group apphost(server)[AppHost]
-  group seaweed(server)[SeaweedFS container]
-  service hosting(server)[SeaweedFS hosting integration] in apphost
-  service resource(disk)[SeaweedFS resource] in apphost
-  service master(server)[Master and Volume APIs] in seaweed
-  service filer(server)[Native Filer API] in seaweed
+  group apphost(iconoir:network)[AppHost]
+  group seaweed(iconoir:box)[SeaweedFS container]
+  service hosting(iconoir:puzzle)[SeaweedFS hosting integration] in apphost
+  service resource(iconoir:cloud)[SeaweedFS resource] in apphost
+  service master(iconoir:code)[Master and Volume APIs] in seaweed
+  service filer(iconoir:code)[Native Filer API] in seaweed
   service s3(api)[S3 gateway] in seaweed
-  service client(server)[.NET application]
+  service client(logos:dotnet)[.NET application]
   hosting:R --> L:resource
   resource:R --> L:master
   resource:R --> L:filer
diff --git a/src/frontend/src/content/docs/integrations/databases/solr/solr-get-started.mdx b/src/frontend/src/content/docs/integrations/databases/solr/solr-get-started.mdx
index f8d5ddac7..98297b150 100644
--- a/src/frontend/src/content/docs/integrations/databases/solr/solr-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/databases/solr/solr-get-started.mdx
@@ -22,8 +22,8 @@ Install [📦 CommunityToolkit.Aspire.Hosting.Solr](https://nuget.org/packages/C
 
 ```mermaid
 flowchart LR
-    AppHost[AppHost hosting integration] --> Solr[Solr container and core]
-    AppHost -->|Core URL| App[Consuming app]
+    AppHost@{ icon: "iconoir:network", form: "square", label: "AppHost hosting integration" } --> Solr@{ icon: "logos:solr", form: "square", label: "Solr container and core" }
+    AppHost -->|Core URL| App@{ icon: "iconoir:code", form: "square", label: "Consuming app" }
     App -->|HTTP queries and updates| Solr
 ```
 
diff --git a/src/frontend/src/content/docs/integrations/databases/sql-server/sql-server-get-started.mdx b/src/frontend/src/content/docs/integrations/databases/sql-server/sql-server-get-started.mdx
index 9eaa99673..e297a4d85 100644
--- a/src/frontend/src/content/docs/integrations/databases/sql-server/sql-server-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/databases/sql-server/sql-server-get-started.mdx
@@ -35,15 +35,15 @@ The SQL Server integration has two sides: a **hosting integration** that you use
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Hosting integration] in apphost
-  service sqlserver(database)[SQL Server] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service sqlserver(aspire:sql-server)[SQL Server] in apphost
   service db(database)[sqldb] in apphost
 
   service client(iconoir:server-connection)[Client integration] in consumer
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   hosting:R --> L:sqlserver
   sqlserver:R --> L:db
diff --git a/src/frontend/src/content/docs/integrations/databases/sqlite/sqlite-get-started.mdx b/src/frontend/src/content/docs/integrations/databases/sqlite/sqlite-get-started.mdx
index 82c17a900..831a7c9e2 100644
--- a/src/frontend/src/content/docs/integrations/databases/sqlite/sqlite-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/databases/sqlite/sqlite-get-started.mdx
@@ -39,14 +39,14 @@ The SQLite integration has two sides: a **hosting integration** that you use in
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Hosting integration] in apphost
-  service db(database)[SQLite file] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service db(logos:sqlite)[SQLite file] in apphost
 
   service client(iconoir:server-connection)[Client integration] in consumer
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   hosting:R --> L:db
   db:R --> L:client
diff --git a/src/frontend/src/content/docs/integrations/databases/surrealdb/surrealdb-get-started.mdx b/src/frontend/src/content/docs/integrations/databases/surrealdb/surrealdb-get-started.mdx
index eb6810f77..c06131c15 100644
--- a/src/frontend/src/content/docs/integrations/databases/surrealdb/surrealdb-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/databases/surrealdb/surrealdb-get-started.mdx
@@ -38,15 +38,15 @@ The SurrealDB integration has two sides: a **hosting integration** that you use
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Hosting integration] in apphost
-  service surreal(database)[SurrealDB server] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service surreal(logos:surrealdb-icon)[SurrealDB server] in apphost
   service db(database)[surrealdb] in apphost
 
   service client(iconoir:server-connection)[Client integration] in consumer
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   hosting:R --> L:surreal
   surreal:R --> L:db
diff --git a/src/frontend/src/content/docs/integrations/devtools/dab/dab-get-started.mdx b/src/frontend/src/content/docs/integrations/devtools/dab/dab-get-started.mdx
index 510abf94c..05c46af97 100644
--- a/src/frontend/src/content/docs/integrations/devtools/dab/dab-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/devtools/dab/dab-get-started.mdx
@@ -35,12 +35,12 @@ import dabIcon from '@assets/icons/data-api-builder-icon.png';
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
   service database(database)[Database] in apphost
-  service dab(server)[Data API Builder] in apphost
-  service app(server)[Application] in consumer
+  service dab(aspire:data-api-builder)[Data API Builder] in apphost
+  service app(iconoir:code)[Application] in consumer
 
   database:R --> L:dab
   dab:R --> L:app
diff --git a/src/frontend/src/content/docs/integrations/devtools/flagd/flagd-get-started.mdx b/src/frontend/src/content/docs/integrations/devtools/flagd/flagd-get-started.mdx
index d609c70a7..460624e83 100644
--- a/src/frontend/src/content/docs/integrations/devtools/flagd/flagd-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/devtools/flagd/flagd-get-started.mdx
@@ -41,13 +41,13 @@ The flagd integration has two sides: a **hosting integration** that you use in y
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Hosting integration] in apphost
-  service flagd(server)[flagd server] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service flagd(aspire:flagd)[flagd server] in apphost
 
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   hosting:R --> L:flagd
   flagd:R --> L:app
diff --git a/src/frontend/src/content/docs/integrations/devtools/goff/goff-get-started.mdx b/src/frontend/src/content/docs/integrations/devtools/goff/goff-get-started.mdx
index 7633e404f..6eb54c1f3 100644
--- a/src/frontend/src/content/docs/integrations/devtools/goff/goff-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/devtools/goff/goff-get-started.mdx
@@ -39,13 +39,13 @@ The GO Feature Flag integration has two sides: a **hosting integration** that yo
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Hosting integration] in apphost
-  service goff(server)[GO Feature Flag relay proxy] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service goff(aspire:go-feature-flag)[GO Feature Flag relay proxy] in apphost
 
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   hosting:R --> L:goff
   goff:R --> L:app
diff --git a/src/frontend/src/content/docs/integrations/devtools/k6/k6-get-started.mdx b/src/frontend/src/content/docs/integrations/devtools/k6/k6-get-started.mdx
index a9ccb9c0c..2af9340d9 100644
--- a/src/frontend/src/content/docs/integrations/devtools/k6/k6-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/devtools/k6/k6-get-started.mdx
@@ -29,13 +29,13 @@ The hosting integration runs the k6 container. Your test script is mounted into
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
+  group apphost(iconoir:network)[AppHost]
   group test(logos:javascript)[k6 test]
 
-  service hosting(server)[k6 hosting integration] in apphost
-  service k6(server)[k6 container resource] in apphost
+  service hosting(iconoir:puzzle)[k6 hosting integration] in apphost
+  service k6(aspire:k6)[k6 container resource] in apphost
   service script(logos:javascript)[JavaScript test script] in test
-  service targetapp(server)[Application service] in apphost
+  service targetapp(iconoir:code)[Application service] in apphost
 
   hosting:R --> L:k6
   script:R --> L:k6
diff --git a/src/frontend/src/content/docs/integrations/devtools/mailpit/mailpit-get-started.mdx b/src/frontend/src/content/docs/integrations/devtools/mailpit/mailpit-get-started.mdx
index 829911a1b..264f71cfd 100644
--- a/src/frontend/src/content/docs/integrations/devtools/mailpit/mailpit-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/devtools/mailpit/mailpit-get-started.mdx
@@ -39,13 +39,13 @@ Mailpit is a hosting-only integration — there is no separate client integratio
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Hosting integration] in apphost
-  service mailpit(server)[Mailpit] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service mailpit(aspire:mailpit)[Mailpit] in apphost
 
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   hosting:R --> L:mailpit
   mailpit:R --> L:app
diff --git a/src/frontend/src/content/docs/integrations/devtools/sql-projects/sql-projects-get-started.mdx b/src/frontend/src/content/docs/integrations/devtools/sql-projects/sql-projects-get-started.mdx
index 7caaaf20c..47c371cf3 100644
--- a/src/frontend/src/content/docs/integrations/devtools/sql-projects/sql-projects-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/devtools/sql-projects/sql-projects-get-started.mdx
@@ -34,12 +34,12 @@ This is a hosting-only integration. Your AppHost models a SQL project resource a
 
 ```mermaid
 architecture-beta
-  group apphost(server)[AppHost]
-  group app(server)[Application]
+  group apphost(iconoir:network)[AppHost]
+  group app(iconoir:app-window)[Application]
 
-  service sqlproject(database)[SQL project resource] in apphost
-  service database(database)[SQL Server database] in apphost
-  service application(server)[App] in app
+  service sqlproject(aspire:sql-projects)[SQL project resource] in apphost
+  service database(aspire:sql-server)[SQL Server database] in apphost
+  service application(iconoir:code)[App] in app
 
   sqlproject:R --> L:database
   database:R --> L:application
diff --git a/src/frontend/src/content/docs/integrations/devtools/umami/umami-get-started.mdx b/src/frontend/src/content/docs/integrations/devtools/umami/umami-get-started.mdx
index e07a1e966..7d1b89de7 100644
--- a/src/frontend/src/content/docs/integrations/devtools/umami/umami-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/devtools/umami/umami-get-started.mdx
@@ -26,11 +26,11 @@ The hosting package runs Umami alongside PostgreSQL. Open Umami's HTTP endpoint
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
+  group apphost(iconoir:network)[AppHost]
 
-  service hosting(server)[Umami integration] in apphost
-  service umami(server)[Umami] in apphost
-  service postgres(database)[PostgreSQL] in apphost
+  service hosting(iconoir:puzzle)[Umami integration] in apphost
+  service umami(iconoir:database-stats)[Umami] in apphost
+  service postgres(logos:postgresql)[PostgreSQL] in apphost
 
   hosting:R --> L:umami
   postgres:R --> L:umami
diff --git a/src/frontend/src/content/docs/integrations/dotnet/blazor-get-started.mdx b/src/frontend/src/content/docs/integrations/dotnet/blazor-get-started.mdx
index c99b49cde..22ce232fa 100644
--- a/src/frontend/src/content/docs/integrations/dotnet/blazor-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/dotnet/blazor-get-started.mdx
@@ -43,14 +43,14 @@ The Blazor hosting integration is a hosting-side API surface. You install it in
 ```mermaid
 architecture-beta
 
-  group client(server)[Client]
-  group apphost(server)[AppHost]
+  group client(iconoir:app-window)[Client]
+  group apphost(iconoir:network)[AppHost]
 
-  service browser(server)[Browser] in client
-  service hosting(server)[Blazor hosting integration] in apphost
+  service browser(iconoir:app-window)[Browser] in client
+  service hosting(iconoir:puzzle)[Blazor hosting integration] in apphost
   service wasm(aspire:blazor)[Blazor WebAssembly app] in apphost
-  service gateway(server)[Blazor Gateway] in apphost
-  service api(server)[API project] in apphost
+  service gateway(aspire:blazor)[Blazor Gateway] in apphost
+  service api(iconoir:code)[API project] in apphost
 
   browser:R --> L:gateway
   hosting:R --> L:wasm
diff --git a/src/frontend/src/content/docs/integrations/frameworks/dapr/dapr-get-started.mdx b/src/frontend/src/content/docs/integrations/frameworks/dapr/dapr-get-started.mdx
index 79b2eb7a4..aa6071549 100644
--- a/src/frontend/src/content/docs/integrations/frameworks/dapr/dapr-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/frameworks/dapr/dapr-get-started.mdx
@@ -46,12 +46,12 @@ The Community Toolkit package is tested with the most recent stable Dapr release
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[App resource]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[App resource]
 
-  service component(database)[Dapr component] in apphost
-  service sidecar(server)[Dapr sidecar] in apphost
-  service app(server)[Application] in consumer
+  service component(iconoir:puzzle)[Dapr component] in apphost
+  service sidecar(aspire:dapr)[Dapr sidecar] in apphost
+  service app(iconoir:code)[Application] in consumer
 
   component:R --> L:sidecar
   sidecar:R --> L:app
diff --git a/src/frontend/src/content/docs/integrations/frameworks/go/go-get-started.mdx b/src/frontend/src/content/docs/integrations/frameworks/go/go-get-started.mdx
index 85196481f..7750cfc29 100644
--- a/src/frontend/src/content/docs/integrations/frameworks/go/go-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/frameworks/go/go-get-started.mdx
@@ -42,10 +42,10 @@ The Go integration is a **hosting integration**. You install it in the AppHost,
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group goapp(server)[Go app]
+  group apphost(iconoir:network)[AppHost]
+  group goapp(iconoir:app-window)[Go app]
 
-  service hosting(server)[Go hosting integration] in apphost
+  service hosting(iconoir:puzzle)[Go hosting integration] in apphost
   service resource(logos:go)[Go app resource] in apphost
   service toolchain(logos:go)[Go toolchain] in goapp
   service app(logos:go)[Go process] in goapp
diff --git a/src/frontend/src/content/docs/integrations/frameworks/java/java-get-started.mdx b/src/frontend/src/content/docs/integrations/frameworks/java/java-get-started.mdx
index e4e90737c..1d7bd2eab 100644
--- a/src/frontend/src/content/docs/integrations/frameworks/java/java-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/frameworks/java/java-get-started.mdx
@@ -55,12 +55,12 @@ The Java integration is a **hosting integration**. You install it in your AppHos
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group javaapp(server)[Java app]
+  group apphost(iconoir:network)[AppHost]
+  group javaapp(iconoir:app-window)[Java app]
 
-  service hosting(server)[Java hosting integration] in apphost
+  service hosting(iconoir:puzzle)[Java hosting integration] in apphost
   service resource(logos:java)[Java app resource] in apphost
-  service launcher(server)[Wrapper or java launcher] in javaapp
+  service launcher(iconoir:terminal)[Wrapper or java launcher] in javaapp
   service app(logos:java)[JVM process] in javaapp
 
   hosting:R --> L:resource
diff --git a/src/frontend/src/content/docs/integrations/frameworks/perl/perl-get-started.mdx b/src/frontend/src/content/docs/integrations/frameworks/perl/perl-get-started.mdx
index 72d99d602..6d7f1fa15 100644
--- a/src/frontend/src/content/docs/integrations/frameworks/perl/perl-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/frameworks/perl/perl-get-started.mdx
@@ -35,10 +35,10 @@ The hosting package belongs in the AppHost. It creates an executable resource fo
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
+  group apphost(iconoir:network)[AppHost]
   group perl(logos:perl)[Perl project]
 
-  service hosting(server)[Perl hosting integration] in apphost
+  service hosting(iconoir:puzzle)[Perl hosting integration] in apphost
   service resource(logos:perl)[Perl app resource] in apphost
   service runtime(logos:perl)[Perl runtime] in perl
   service app(logos:perl)[Perl application] in perl
diff --git a/src/frontend/src/content/docs/integrations/frameworks/powershell/powershell-get-started.mdx b/src/frontend/src/content/docs/integrations/frameworks/powershell/powershell-get-started.mdx
index 32015d893..a1c34ce1d 100644
--- a/src/frontend/src/content/docs/integrations/frameworks/powershell/powershell-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/frameworks/powershell/powershell-get-started.mdx
@@ -35,12 +35,12 @@ The integration is a hosting integration installed in your AppHost. A PowerShell
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group scripts(server)[PowerShell resources]
+  group apphost(iconoir:network)[AppHost]
+  group scripts(iconoir:app-window)[PowerShell resources]
 
-  service hosting(server)[PowerShell hosting integration] in apphost
-  service pool(server)[Runspace pool] in scripts
-  service script(server)[Script resource] in scripts
+  service hosting(iconoir:puzzle)[PowerShell hosting integration] in apphost
+  service pool(iconoir:cpu)[Runspace pool] in scripts
+  service script(aspire:powershell)[Script resource] in scripts
 
   hosting:R --> L:pool
   pool:R --> L:script
diff --git a/src/frontend/src/content/docs/integrations/frameworks/rust/rust-get-started.mdx b/src/frontend/src/content/docs/integrations/frameworks/rust/rust-get-started.mdx
index 255eef1ba..42c5204fe 100644
--- a/src/frontend/src/content/docs/integrations/frameworks/rust/rust-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/frameworks/rust/rust-get-started.mdx
@@ -54,10 +54,10 @@ The Rust integration is a **hosting integration**. You install it in your AppHos
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group rustapp(server)[Rust app]
+  group apphost(iconoir:network)[AppHost]
+  group rustapp(iconoir:app-window)[Rust app]
 
-  service hosting(server)[Rust hosting integration] in apphost
+  service hosting(iconoir:puzzle)[Rust hosting integration] in apphost
   service resource(logos:rust)[Rust app resource] in apphost
   service toolchain(logos:rust)[Cargo] in rustapp
   service app(logos:rust)[Rust process] in rustapp
diff --git a/src/frontend/src/content/docs/integrations/messaging/apache-kafka/apache-kafka-get-started.mdx b/src/frontend/src/content/docs/integrations/messaging/apache-kafka/apache-kafka-get-started.mdx
index f47212e9c..118c6e82f 100644
--- a/src/frontend/src/content/docs/integrations/messaging/apache-kafka/apache-kafka-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/messaging/apache-kafka/apache-kafka-get-started.mdx
@@ -36,14 +36,14 @@ The Apache Kafka integration has two sides: a **hosting integration** that you u
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Hosting integration] in apphost
-  service kafka(server)[Kafka server] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service kafka(logos:kafka-icon)[Kafka server] in apphost
 
   service client(iconoir:server-connection)[Client integration] in consumer
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   hosting:R --> L:kafka
   kafka:R --> L:client
diff --git a/src/frontend/src/content/docs/integrations/messaging/lavinmq/lavinmq-get-started.mdx b/src/frontend/src/content/docs/integrations/messaging/lavinmq/lavinmq-get-started.mdx
index 3977cc75c..f616dfece 100644
--- a/src/frontend/src/content/docs/integrations/messaging/lavinmq/lavinmq-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/messaging/lavinmq/lavinmq-get-started.mdx
@@ -37,13 +37,13 @@ LavinMQ has no dedicated Community Toolkit client package. Use the Aspire Rabbit
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Hosting integration] in apphost
-  service lavinmq(server)[LavinMQ broker] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service lavinmq(aspire:lavinmq)[LavinMQ broker] in apphost
   service client(iconoir:server-connection)[AMQP client] in consumer
-  service app(server)[Application] in consumer
+  service app(iconoir:code)[Application] in consumer
 
   hosting:R --> L:lavinmq
   lavinmq:R --> L:client
diff --git a/src/frontend/src/content/docs/integrations/messaging/nats/nats-get-started.mdx b/src/frontend/src/content/docs/integrations/messaging/nats/nats-get-started.mdx
index 99a369251..0eae957b7 100644
--- a/src/frontend/src/content/docs/integrations/messaging/nats/nats-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/messaging/nats/nats-get-started.mdx
@@ -38,14 +38,14 @@ The NATS integration has two sides: a **hosting integration** that you use in yo
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Hosting integration] in apphost
-  service nats(server)[NATS server] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service nats(logos:nats-icon)[NATS server] in apphost
 
   service client(iconoir:server-connection)[Client integration] in consumer
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   hosting:R --> L:nats
   nats:R --> L:client
diff --git a/src/frontend/src/content/docs/integrations/messaging/rabbitmq/rabbitmq-get-started.mdx b/src/frontend/src/content/docs/integrations/messaging/rabbitmq/rabbitmq-get-started.mdx
index e9730c95d..93917067b 100644
--- a/src/frontend/src/content/docs/integrations/messaging/rabbitmq/rabbitmq-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/messaging/rabbitmq/rabbitmq-get-started.mdx
@@ -36,14 +36,14 @@ The RabbitMQ integration has two sides: a **hosting integration** that you use i
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Hosting integration] in apphost
-  service rabbitmq(server)[RabbitMQ server] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service rabbitmq(logos:rabbitmq-icon)[RabbitMQ server] in apphost
 
   service client(iconoir:server-connection)[Client integration] in consumer
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   hosting:R --> L:rabbitmq
   rabbitmq:R --> L:client
diff --git a/src/frontend/src/content/docs/integrations/observability/opentelemetry-collector/opentelemetry-collector-get-started.mdx b/src/frontend/src/content/docs/integrations/observability/opentelemetry-collector/opentelemetry-collector-get-started.mdx
index 6bf43caed..c9e68855f 100644
--- a/src/frontend/src/content/docs/integrations/observability/opentelemetry-collector/opentelemetry-collector-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/observability/opentelemetry-collector/opentelemetry-collector-get-started.mdx
@@ -38,12 +38,12 @@ The hosting integration creates the Collector container and exposes its OTLP gRP
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group telemetry(server)[Telemetry]
+  group apphost(iconoir:network)[AppHost]
+  group telemetry(iconoir:database-stats)[Telemetry]
 
-  service collector(server)[OpenTelemetry Collector] in apphost
-  service app(server)[Application] in apphost
-  service backend(server)[Telemetry backend] in telemetry
+  service collector(logos:opentelemetry-icon)[OpenTelemetry Collector] in apphost
+  service app(iconoir:code)[Application] in apphost
+  service backend(iconoir:database-stats)[Telemetry backend] in telemetry
 
   app:R --> L:collector
   collector:R --> L:backend
diff --git a/src/frontend/src/content/docs/integrations/observability/seq/seq-get-started.mdx b/src/frontend/src/content/docs/integrations/observability/seq/seq-get-started.mdx
index 3408be387..08ae78189 100644
--- a/src/frontend/src/content/docs/integrations/observability/seq/seq-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/observability/seq/seq-get-started.mdx
@@ -36,14 +36,14 @@ The Seq integration has two sides: a **hosting integration** that you use in you
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service hosting(server)[Hosting integration] in apphost
-  service seq(server)[Seq server] in apphost
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service seq(aspire:seq)[Seq server] in apphost
 
   service client(iconoir:server-connection)[Client integration] in consumer
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   hosting:R --> L:seq
   seq:R --> L:client
diff --git a/src/frontend/src/content/docs/integrations/overview.mdx b/src/frontend/src/content/docs/integrations/overview.mdx
index 4d859229e..f28db95d3 100644
--- a/src/frontend/src/content/docs/integrations/overview.mdx
+++ b/src/frontend/src/content/docs/integrations/overview.mdx
@@ -36,15 +36,15 @@ After you create resources in the AppHost, you can pass them to apps such as API
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service pghosting(server)[PostgreSQL hosting integration] in apphost
+  service pghosting(iconoir:puzzle)[PostgreSQL hosting integration] in apphost
   service postgres(logos:postgresql)[PostgreSQL server] in apphost
-  service redishosting(server)[Redis hosting integration] in apphost
+  service redishosting(iconoir:puzzle)[Redis hosting integration] in apphost
   service redis(logos:redis)[Redis cache] in apphost
 
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   pghosting:R --> L:postgres
   postgres:R --> L:app
@@ -72,15 +72,15 @@ builder.Build().Run();
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group consumer(server)[Consuming app]
+  group apphost(iconoir:network)[AppHost]
+  group consumer(iconoir:app-window)[Consuming app]
 
-  service pghosting(server)[PostgreSQL hosting integration] in apphost
+  service pghosting(iconoir:puzzle)[PostgreSQL hosting integration] in apphost
   service postgres(logos:postgresql)[PostgreSQL server] in apphost
-  service redishosting(server)[Redis hosting integration] in apphost
+  service redishosting(iconoir:puzzle)[Redis hosting integration] in apphost
   service redis(logos:redis)[Redis cache] in apphost
 
-  service app(server)[App] in consumer
+  service app(iconoir:code)[App] in consumer
 
   pghosting:R --> L:postgres
   postgres:R --> L:app
diff --git a/src/frontend/src/content/docs/integrations/reverse-proxies/ngrok/ngrok-get-started.mdx b/src/frontend/src/content/docs/integrations/reverse-proxies/ngrok/ngrok-get-started.mdx
index 4847a866f..38478498c 100644
--- a/src/frontend/src/content/docs/integrations/reverse-proxies/ngrok/ngrok-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/reverse-proxies/ngrok/ngrok-get-started.mdx
@@ -38,10 +38,10 @@ The AppHost declares the service endpoint to expose and an ngrok resource. At st
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
+  group apphost(iconoir:network)[AppHost]
 
-  service apiService(server)[Application service] in apphost
-  service ngrok(server)[ngrok container] in apphost
+  service apiService(iconoir:code)[Application service] in apphost
+  service ngrok(logos:ngrok)[ngrok container] in apphost
 
   service external(cloud)[External caller]
 
diff --git a/src/frontend/src/content/docs/integrations/security/bitwarden-secret-manager/bitwarden-secret-manager-get-started.mdx b/src/frontend/src/content/docs/integrations/security/bitwarden-secret-manager/bitwarden-secret-manager-get-started.mdx
index d4a3f1f0d..716b1ca26 100644
--- a/src/frontend/src/content/docs/integrations/security/bitwarden-secret-manager/bitwarden-secret-manager-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/security/bitwarden-secret-manager/bitwarden-secret-manager-get-started.mdx
@@ -24,14 +24,14 @@ The hosting package models a Bitwarden project and its secrets in the AppHost. D
 ```mermaid
 architecture-beta
 
-  group apphost(server)[AppHost]
-  group application(server)[Consuming app]
-
-  service hosting(server)[Hosting integration] in apphost
-  service project(database)[Bitwarden project] in apphost
-  service secrets(database)[Secret declarations] in apphost
-  service app(server)[Application] in application
-  service client(server)[Client integration] in application
+  group apphost(iconoir:network)[AppHost]
+  group application(iconoir:app-window)[Consuming app]
+
+  service hosting(iconoir:puzzle)[Hosting integration] in apphost
+  service project(iconoir:folder)[Bitwarden project] in apphost
+  service secrets(iconoir:key)[Secret declarations] in apphost
+  service app(iconoir:code)[Application] in application
+  service client(iconoir:server-connection)[Client integration] in application
 
   hosting:R --> L:project
   project:R --> L:secrets
diff --git a/src/frontend/src/content/docs/integrations/security/logto/logto-get-started.mdx b/src/frontend/src/content/docs/integrations/security/logto/logto-get-started.mdx
index f74708d8c..c67fc1b52 100644
--- a/src/frontend/src/content/docs/integrations/security/logto/logto-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/security/logto/logto-get-started.mdx
@@ -29,11 +29,11 @@ import InstallPackage from '@components/InstallPackage.astro';
 
 ```mermaid
 flowchart LR
-    AppHost["Aspire AppHost"] --> Logto["Logto container"]
-    Logto --> PostgreSQL["PostgreSQL"]
-    Logto -. Optional cache .-> Redis["Redis"]
-    AppHost -- Connection information --> Web["Web app: OIDC sign-in"]
-    AppHost -- Connection information --> API["API: JWT validation"]
+    AppHost@{ icon: "iconoir:network", form: "square", label: "Aspire AppHost" } --> Logto@{ icon: "iconoir:lock", form: "square", label: "Logto container" }
+    Logto --> PostgreSQL@{ icon: "logos:postgresql", form: "square", label: "PostgreSQL" }
+    Logto -. Optional cache .-> Redis@{ icon: "logos:redis", form: "square", label: "Redis" }
+    AppHost -- Connection information --> Web@{ icon: "iconoir:app-window", form: "square", label: "Web app: OIDC sign-in" }
+    AppHost -- Connection information --> API@{ icon: "iconoir:code", form: "square", label: "API: JWT validation" }
     Web -- Sign-in redirect --> Logto
     API -- OIDC discovery and signing keys --> Logto
 ```
diff --git a/src/frontend/src/content/docs/integrations/security/zitadel/zitadel-get-started.mdx b/src/frontend/src/content/docs/integrations/security/zitadel/zitadel-get-started.mdx
index 9c8baa41b..46e4c146d 100644
--- a/src/frontend/src/content/docs/integrations/security/zitadel/zitadel-get-started.mdx
+++ b/src/frontend/src/content/docs/integrations/security/zitadel/zitadel-get-started.mdx
@@ -31,11 +31,11 @@ Use this integration to develop applications against a local identity provider.
 
 ```mermaid
 flowchart LR
-    AppHost[AppHost] --> Zitadel[Zitadel container]
-    AppHost --> PostgreSQL[PostgreSQL container]
+    AppHost@{ icon: "iconoir:network", form: "square", label: "AppHost" } --> Zitadel@{ icon: "iconoir:key", form: "square", label: "Zitadel container" }
+    AppHost --> PostgreSQL@{ icon: "logos:postgresql", form: "square", label: "PostgreSQL container" }
     Zitadel --> PostgreSQL
-    App[Consuming app] -->|OpenID Connect| Zitadel
-    Browser[Browser] -->|Sign in| Zitadel
+    App@{ icon: "iconoir:code", form: "square", label: "Consuming app" } -->|OpenID Connect| Zitadel
+    Browser@{ icon: "iconoir:app-window", form: "square", label: "Browser" } -->|Sign in| Zitadel
 ```
 
 The hosting package belongs in the AppHost. PostgreSQL stores Zitadel's data, and Zitadel initializes the database when it starts. Your application uses an OpenID Connect library to authenticate users against the Zitadel endpoint.
diff --git a/src/frontend/src/styles/mermaid.css b/src/frontend/src/styles/mermaid.css
index 9510bd1f6..538550961 100644
--- a/src/frontend/src/styles/mermaid.css
+++ b/src/frontend/src/styles/mermaid.css
@@ -12,6 +12,45 @@ pre.mermaid svg {
   height: auto;
 }
 
+pre.mermaid .pele {
+  --pele-bg: var(--sl-color-bg);
+  --pele-fg: var(--sl-color-text);
+  --pele-muted: var(--sl-color-gray-3);
+  --pele-line: var(--sl-color-accent-high);
+  --pele-surface: var(--aspire-mermaid-node, var(--sl-color-gray-6));
+  --pele-surface-alt: var(--aspire-mermaid-surface-strong, var(--sl-color-gray-5));
+  --pele-border: var(--aspire-mermaid-border, var(--sl-color-gray-4));
+  --pele-accent: var(--sl-color-accent);
+  --pele-critical: var(--sl-color-red);
+  --pele-font: 'Poppins', sans-serif;
+  --pele-font-mono: var(--sl-font-system-mono);
+}
+
+pre.mermaid .pele-architecture .pele-cluster > rect {
+  fill: none;
+  stroke: var(--sl-color-gray-2);
+  stroke-dasharray: 6 4;
+}
+
+pre.mermaid .pele-architecture .pele-cluster-label {
+  fill: var(--pele-fg);
+}
+
+pre.mermaid .pele-service > svg.pele-icon {
+  /* Keep 60px icons centered inside Pele's 100px service boxes. */
+  transform: translateY(-10px) scale(1.2);
+  transform-origin: 0 0;
+}
+
+pre.mermaid .pele-icon[data-icon='logos:kafka-icon'] path {
+  fill: currentColor;
+}
+
+:root[data-theme='light'] pre.mermaid image[data-theme='dark'],
+:root[data-theme='dark'] pre.mermaid image[data-theme='light'] {
+  display: none;
+}
+
 :root .sl-markdown-content pre.mermaid {
   --aspire-mermaid-radius: 0.875rem;
   --aspire-mermaid-loading-min-height: 200px;
diff --git a/src/frontend/src/utils/mermaid.mjs b/src/frontend/src/utils/mermaid.mjs
new file mode 100644
index 000000000..8ead8de22
--- /dev/null
+++ b/src/frontend/src/utils/mermaid.mjs
@@ -0,0 +1,103 @@
+import { readFileSync } from 'node:fs';
+import { createRequire } from 'node:module';
+import logos from '@iconify-json/logos/icons.json' with { type: 'json' };
+import iconoir from '@iconify-json/iconoir/icons.json' with { type: 'json' };
+import { getIconData, iconToSVG, replaceIDs } from '@iconify/utils';
+import { render } from 'pele';
+import { create } from 'fontkitten';
+import aspire from '../../public/icons/aspire.json' with { type: 'json' };
+
+/** @type {Record<string, import('@iconify/types').IconifyJSON>} */
+const packs = { logos, iconoir, aspire: { ...aspire, icons: { ...aspire.icons } } };
+const localLogos = {
+  'azure-app-configuration': ['azure-appconfig-icon.png'],
+  'azure-app-service': ['azure-app-services.svg'],
+  'azure-container-registry': ['azure-container-registry-icon.svg'],
+  'azure-cosmos-db': ['azure-cosmosdb-icon.png'],
+  'azure-event-hubs': ['azure-eventhubs-icon.png'],
+  'azure-functions': ['azure-functionapps-icon.png'],
+  'azure-key-vault': ['azure-keyvault-icon.png'],
+  'azure-openai': ['azure-openai-icon.png'],
+  'azure-postgresql': ['azure-postgresql-icon.png'],
+  'azure-search': ['azure-search-icon.png'],
+  'azure-service-bus': ['azure-servicebus-icon.png'],
+  'azure-signalr': ['azure-signalr-icon.png'],
+  'azure-sql': ['azure-sqlserver-icon.png'],
+  'azure-storage': ['azure-storagecontainer-icon.png'],
+  'azure-storage-blobs': ['azure-blobpagestorage-icon.png'],
+  'azure-storage-queues': ['azure-storagequeue-icon.png'],
+  'azure-storage-tables': ['azure-table-icon.png'],
+  'azure-web-pubsub': ['azure-webpubsub-icon.png'],
+  clickhouse: ['clickhouse-icon.png'],
+  dapr: ['dapr-light-icon.png', 'dapr-icon.png'],
+  'data-api-builder': ['data-api-builder-icon.png'],
+  flagd: ['flagd-light-icon.svg', 'flagd-icon.svg'],
+  garnet: ['garnet-icon.png'],
+  'go-feature-flag': ['go-feature-flag.png'],
+  kurrentdb: ['kurrent-light-icon.png', 'kurrent-icon.png'],
+  k6: ['k6-icon.svg'],
+  lavinmq: ['lavinmq-icon.png'],
+  mailpit: ['mailpit-icon.svg', 'mailpit-light-icon.svg'],
+  'microsoft-foundry': ['azure-ai-foundry-icon.png'],
+  powershell: ['powershell-icon.png'],
+  ravendb: ['ravendb-light-icon.png', 'ravendb-icon.png'],
+  seq: ['seq-icon.png'],
+  'sql-projects': ['sql-database-projects-icon.png'],
+  'sql-server': ['sql-icon.png'],
+};
+for (const [name, files] of Object.entries(localLogos)) {
+  packs.aspire.icons[name] = {
+    width: 100,
+    height: 100,
+    body: files.map((file, index) => {
+      const mime = file.endsWith('.svg') ? 'image/svg+xml' : 'image/png';
+      const data = readFileSync(new URL(`../assets/icons/${file}`, import.meta.url)).toString('base64');
+      const theme = files.length > 1 ? ` data-theme="${index === 0 ? 'light' : 'dark'}"` : '';
+      return `<image${theme} href="data:${mime};base64,${data}" width="100" height="100" preserveAspectRatio="xMidYMid meet"/>`;
+    }).join(''),
+  };
+}
+const require = createRequire(import.meta.url);
+/** @param {string} path */
+function loadFont(path) {
+  const font = create(readFileSync(require.resolve(path)));
+  if (font.isCollection) throw new Error(`Expected a single Mermaid font: ${path}`);
+  return font;
+}
+const regular = loadFont('@fontsource/poppins/files/poppins-latin-400-normal.woff');
+const bold = loadFont('@fontsource/poppins/files/poppins-latin-700-normal.woff');
+const mono = loadFont('@fontsource-variable/fira-code/files/fira-code-latin-wght-normal.woff2');
+/** @type {import('pele').TextMeasurer} */
+const measurer = {
+  width(text, size, style) {
+    // Pele's generic server metrics underestimate Poppins and crowd group heading icons.
+    const font = style & 4 ? mono : style & 1 ? bold : regular;
+    return font.glyphsForString(text).reduce((width, glyph) => width + glyph.advanceWidth, 0)
+      * size / font.unitsPerEm;
+  },
+};
+let nextId = 0;
+
+/** @param {string} source */
+export function renderMermaid(source) {
+  const idPrefix = `aspire-pele-${++nextId}`;
+  return render(source, {
+    idPrefix,
+    fontFamily: 'Poppins, sans-serif',
+    fontFamilyMono: 'Fira Code Variable, monospace',
+    fontSize: 16,
+    measurer,
+    autoDirection: false,
+    config: { architecture: { iconSize: 100, padding: 44 } },
+    icons(name) {
+      if (!name.includes(':')) return null;
+      const [prefix, key] = name.split(':');
+      const pack = packs[prefix];
+      const icon = pack && getIconData(pack, key);
+      if (!icon) throw new Error(`Unknown Mermaid icon: ${name}`);
+      const { attributes, body } = iconToSVG(icon);
+      const viewBox = attributes.viewBox;
+      return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${viewBox}" fill="currentColor" stroke="none">${replaceIDs(body, `${idPrefix}-${prefix}-${key}-`)}</svg>`;
+    },
+  }).svg;
+}
diff --git a/src/frontend/tests/e2e/mermaid-navigation.spec.ts b/src/frontend/tests/e2e/mermaid-navigation.spec.ts
index 2d8e1e0a2..cacd6c5ea 100644
--- a/src/frontend/tests/e2e/mermaid-navigation.spec.ts
+++ b/src/frontend/tests/e2e/mermaid-navigation.spec.ts
@@ -1,5 +1,6 @@
 import { expect, test, type Page } from '@playwright/test';
 import { dismissCookieConsentIfVisible } from '@tests/e2e/helpers';
+import { renderMermaid } from '../../src/utils/mermaid.mjs';
 
 async function expectCenteredDiagrams(page: Page): Promise<void> {
   const diagrams = page.locator('.sl-markdown-content pre.mermaid:visible');
@@ -41,6 +42,165 @@ async function navigateClient(page: Page, destination: string): Promise<void> {
 }
 
 for (const theme of ['light', 'dark'] as const) {
+  test(`architecture labels and nested boxes have breathing room in ${theme} mode`, async ({ page }) => {
+    await page.addInitScript((value) => localStorage.setItem('starlight-theme', value), theme);
+    await page.goto('/integrations/caching/redis/redis-get-started/');
+    await dismissCookieConsentIfVisible(page);
+    await expect(page.locator('svg.pele-architecture')).toBeVisible();
+    const nested = renderMermaid(`architecture-beta
+      group outer(server)[Application resources]
+      group inner(server)[Wide WWW consuming application resources] in outer
+      service app(server)[Application] in inner
+      service cache(database)[Cache] in outer
+      app:R --> L:cache`);
+    await page.locator('pre.mermaid').evaluate((element, svg) => {
+      const fixture = element.cloneNode(false) as HTMLElement;
+      fixture.innerHTML = svg;
+      element.after(fixture);
+    }, nested);
+    await page.evaluate(() => document.fonts.ready);
+    const measurements = await page.locator('pre.mermaid').evaluateAll((diagrams) => {
+      const paragraph = document.querySelector('.sl-markdown-content p')!;
+      const contains = (outer: DOMRect, inner: DOMRect) => inner.left > outer.left
+        && inner.right < outer.right && inner.top > outer.top && inner.bottom < outer.bottom;
+      return diagrams.map((diagram) => {
+        const svg = diagram.querySelector('svg')!;
+        const svgBounds = svg.getBoundingClientRect();
+        const groups = [...svg.querySelectorAll<SVGGElement>('.pele-cluster')];
+        return {
+          fontSize: getComputedStyle(svg).fontSize,
+          bodyFontSize: getComputedStyle(paragraph).fontSize,
+          fitsFrame: contains(diagram.getBoundingClientRect(), svgBounds),
+          groups: groups.map((group) => {
+            const rect = group.querySelector('rect')!;
+            const bounds = rect.getBoundingClientRect();
+            const icon = group.querySelector<SVGSVGElement>('svg')!;
+            const label = group.querySelector('text')!;
+            const text = label.getBoundingClientRect();
+            return {
+              gap: text.left - icon.getBoundingClientRect().right,
+              fits: contains(bounds, text) && contains(svgBounds, bounds),
+              dashed: getComputedStyle(rect).strokeDasharray !== 'none',
+              fill: getComputedStyle(rect).fill,
+              matchesServiceLabel: getComputedStyle(label).fill
+                === getComputedStyle(svg.querySelector('.pele-service .pele-label')!).fill,
+            };
+          }),
+          services: [...svg.querySelectorAll<SVGRectElement>('.pele-service > rect')].map((rect) => {
+            const box = rect.getBoundingClientRect();
+            const iconElement = rect.parentElement!.querySelector<SVGSVGElement>('svg')!;
+            const icon = iconElement.getBoundingClientRect();
+            const viewport = iconElement.viewBox.baseVal;
+            // Center the viewport, not asymmetric artwork such as puzzle pieces and logos.
+            const iconCenter = new DOMPoint(
+              viewport.x + viewport.width / 2,
+              viewport.y + viewport.height / 2,
+            ).matrixTransform(iconElement.getScreenCTM()!);
+            const label = rect.parentElement!.querySelector('text')!.getBoundingClientRect();
+            // Check the innermost enclosing group so an ancestor cannot mask overlaps.
+            const group = groups.filter((candidate) => {
+              return contains(candidate.querySelector('rect')!.getBoundingClientRect(), box);
+            }).sort((a, b) => {
+              const first = a.querySelector('rect')!.getBoundingClientRect();
+              const second = b.querySelector('rect')!.getBoundingClientRect();
+              return first.width * first.height - second.width * second.height;
+            })[0];
+            const groupBounds = group?.querySelector('rect')!.getBoundingClientRect();
+            const header = group?.querySelector('text')!.getBoundingClientRect();
+            return {
+              iconFits: contains(box, icon),
+              // Allow subpixel rounding, not a particular icon or box size.
+              centerOffset: Math.max(
+                Math.abs(iconCenter.x - (box.x + box.width / 2)),
+                Math.abs(iconCenter.y - (box.y + box.height / 2)),
+              ),
+              labelBelowBox: label.top > box.bottom,
+              dash: getComputedStyle(rect).strokeDasharray,
+              contained: groupBounds !== undefined && header !== undefined
+                && contains(groupBounds, label) && box.top > header.bottom,
+            };
+          }),
+          nestedClearance: groups.length === 2 && groups[0].dataset.id === 'outer'
+            ? groups[1].querySelector('rect')!.getBoundingClientRect().top
+              - groups[0].querySelector('text')!.getBoundingClientRect().bottom
+            : null,
+        };
+      });
+    });
+    for (const diagram of measurements) {
+      expect(diagram.fontSize).toBe(diagram.bodyFontSize);
+      expect(diagram.fitsFrame).toBe(true);
+      for (const group of diagram.groups) {
+        expect(group.gap).toBeGreaterThan(0);
+        expect(group.fits).toBe(true);
+        expect(group.dashed).toBe(true);
+        expect(group.fill).toBe('none');
+        expect(group.matchesServiceLabel).toBe(true);
+      }
+      for (const service of diagram.services) {
+        expect(service.iconFits).toBe(true);
+        expect(service.centerOffset).toBeLessThan(1);
+        expect(service.labelBelowBox).toBe(true);
+        expect(service.dash).toBe('none');
+        expect(service.contained).toBe(true);
+      }
+      if (diagram.nestedClearance !== null) expect(diagram.nestedClearance).toBeGreaterThan(0);
+    }
+    expect(await page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)).toBe(true);
+  });
+
+  test(`monochrome technology logos follow the foreground in ${theme} mode`, async ({ page }) => {
+    await page.addInitScript((value) => localStorage.setItem('starlight-theme', value), theme);
+    await page.goto('/integrations/caching/redis/redis-get-started/');
+    await dismissCookieConsentIfVisible(page);
+    await expect(page.locator('html')).toHaveAttribute('data-theme', theme);
+    const names = ['logos:openai-icon', 'logos:ollama', 'logos:kafka-icon'];
+    const svg = renderMermaid(`architecture-beta\n${names.map(
+      (name, index) => `service brand${index}(${name})[${name.split(':')[1]}]`,
+    ).join('\n')}`);
+    const diagram = page.locator('pre.mermaid');
+    await diagram.evaluate((element, markup) => { element.innerHTML = markup; }, svg);
+    const foreground = await diagram.locator('.pele-label').first()
+      .evaluate((label) => getComputedStyle(label).fill);
+    for (const name of names) {
+      const path = diagram.locator(`svg[data-icon="${name}"] path`).first();
+      await expect(path).toHaveCSS('fill', foreground);
+      await expect(path).toHaveCSS('stroke', 'none');
+    }
+  });
+
+  test(`local brand artwork loads with the correct variant in ${theme} mode`, async ({ page }) => {
+    await page.addInitScript((value) => localStorage.setItem('starlight-theme', value), theme);
+    await page.goto('/integrations/cloud/azure/azure-ai-foundry/azure-ai-foundry-get-started/');
+    await dismissCookieConsentIfVisible(page);
+    await expect(page.locator('html')).toHaveAttribute('data-theme', theme);
+    const diagram = page.locator('pre.mermaid');
+    await expect(diagram.locator('.pele-label').filter({ hasText: /^Microsoft Foundry$/ })).toBeVisible();
+    await expect(diagram.locator('svg[data-icon="iconoir:sparks"]')).toBeVisible();
+    const names = ['microsoft-foundry', 'azure-key-vault', 'mailpit', 'ravendb'];
+    const svg = renderMermaid(`architecture-beta\n${names.map(
+      (name, index) => `service brand${index}(aspire:${name})[${name}]`,
+    ).join('\n')}`);
+    await diagram.evaluate((element, markup) => { element.innerHTML = markup; }, svg);
+    for (const name of names) {
+      const artwork = diagram.locator(`svg[data-icon="aspire:${name}"] image`);
+      await expect(artwork.filter({ visible: true })).toHaveCount(1);
+      if (name === 'mailpit' || name === 'ravendb') {
+        await expect(diagram.locator(`svg[data-icon="aspire:${name}"] image[data-theme="${theme}"]`))
+          .toBeVisible();
+      }
+    }
+    const sources = await diagram.locator('image:visible')
+      .evaluateAll((images) => images.map((image) => image.getAttribute('href')!));
+    await page.evaluate(async (urls) => {
+      await Promise.all(urls.map(async (url) => {
+        const image = new Image();
+        image.src = url;
+        await image.decode();
+      }));
+    }, sources);
+  });
+
   test(`Mermaid stays centered and responsive after client navigation in ${theme} mode`, async ({
     page,
     isMobile,
diff --git a/src/frontend/tests/e2e/site-ui-navigation.spec.ts b/src/frontend/tests/e2e/site-ui-navigation.spec.ts
index e4ec9bd73..1d60f1958 100644
--- a/src/frontend/tests/e2e/site-ui-navigation.spec.ts
+++ b/src/frontend/tests/e2e/site-ui-navigation.spec.ts
@@ -50,24 +50,10 @@ for (const fallback of [false, true]) {
             value: undefined,
           });
         }
-        const renders = new WeakMap<Element, number>();
-        new MutationObserver((mutations) => {
-          for (const { target } of mutations) {
-            if (!(target instanceof Element) || !target.matches('pre.mermaid[data-processed]'))
-              continue;
-            const count = (renders.get(target) ?? 0) + 1;
-            renders.set(target, count);
-            target.setAttribute('data-test-render-count', String(count));
-          }
-        }).observe(document, {
-          subtree: true,
-          attributes: true,
-          attributeFilter: ['data-processed'],
-        });
       }, fallback);
     });
 
-    test('renders two diagrams once per page/theme across repeat visits and history', async ({
+    test('preserves build-time diagrams across themes, repeat visits and history', async ({
       page,
     }) => {
       test.setTimeout(120000);
@@ -80,37 +66,37 @@ for (const fallback of [false, true]) {
       await dismissCookieConsentIfVisible(page);
       await page.evaluate(() => Reflect.set(window, '__dependencySession', true));
       const diagrams = page.locator('pre.mermaid');
-      const expectRenders = async (count: number) => {
+      const expectRenders = async () => {
         await expect(diagrams).toHaveCount(2);
         for (const diagram of await diagrams.all()) {
           await expect(diagram.locator(':scope > svg')).toHaveCount(1, { timeout: 30000 });
-          await expect(diagram).toHaveAttribute('data-test-render-count', String(count));
+          await expect(diagram).toHaveAttribute('data-processed', 'true');
+          await expect(diagram.locator(':scope > svg')).toHaveClass(/\bpele\b/);
         }
       };
       for (let visit = 0; visit < 2; visit++) {
         await navigateClient(page, '/get-started/first-app/');
         await expect(page.locator('html')).toHaveAttribute('data-theme', 'light');
-        await expectRenders(1);
+        await expectRenders();
+        const originalSvg = await diagrams.evaluateAll((elements) => elements.map((element) => element.innerHTML));
         await page.evaluate(() => {
           const html = document.documentElement;
           const theme = html.getAttribute('data-theme')!;
           html.removeAttribute('data-theme');
           html.setAttribute('data-theme', theme);
         });
-        await expectRenders(1);
-        for (const [theme, count] of [
-          ['dark', 2],
-          ['light', 3],
-        ] as const) {
+        await expectRenders();
+        for (const theme of ['dark', 'light'] as const) {
           await page.locator(`#footer-theme-toggle [data-theme-option="${theme}"]`).click();
           await expect(page.locator('html')).toHaveAttribute('data-theme', theme);
-          await expectRenders(count);
+          await expectRenders();
+          expect(await diagrams.evaluateAll((elements) => elements.map((element) => element.innerHTML))).toEqual(originalSvg);
         }
         await navigateClient(page, '/docs/');
         await expect(page.locator('html')).toHaveAttribute('data-theme', 'light');
       }
       await page.goBack();
-      await expectRenders(1);
+      await expectRenders();
       expect(await page.evaluate(() => Reflect.get(window, '__dependencySession'))).toBe(true);
       expect(errors).toEqual([]);
     });
diff --git a/src/frontend/tests/unit/custom-components.vitest.test.ts b/src/frontend/tests/unit/custom-components.vitest.test.ts
index 5ecd48b2a..a1066fa81 100644
--- a/src/frontend/tests/unit/custom-components.vitest.test.ts
+++ b/src/frontend/tests/unit/custom-components.vitest.test.ts
@@ -1373,7 +1373,8 @@ describe('custom Astro component render coverage', () => {
     expect(html).toContain('volume-data');
     expect(html).toContain('id="architecture"');
     expect(html).toContain('class="mermaid');
-    expect(html).toContain('Browser --&gt; Api');
+    expect(html).toContain('pele-flowchart');
+    expect(html).toContain('data-processed="true"');
     expect(html).toContain('expressive-code');
     expect(html).toContain('AppHost.cs');
     expect(html).toContain('Sample screenshots');
diff --git a/src/frontend/tests/unit/navigation-theme.vitest.test.ts b/src/frontend/tests/unit/navigation-theme.vitest.test.ts
index 7dc9139fa..4624e843d 100644
--- a/src/frontend/tests/unit/navigation-theme.vitest.test.ts
+++ b/src/frontend/tests/unit/navigation-theme.vitest.test.ts
@@ -17,7 +17,7 @@ const source = head.match(
   /<script>\s*import '@scripts\/deployment-guard';([\s\S]*?)<\/script>/
 )?.[1];
 if (!source) throw new Error('Shared navigation theme script not found.');
-const script = transpileModule(source.replace("import '@scripts/mermaid';", ''), {
+const script = transpileModule(source, {
   compilerOptions: { target: ScriptTarget.ES2022 },
 }).outputText;
 
diff --git a/src/frontend/tests/unit/pele-mermaid.vitest.test.ts b/src/frontend/tests/unit/pele-mermaid.vitest.test.ts
new file mode 100644
index 000000000..3244648e0
--- /dev/null
+++ b/src/frontend/tests/unit/pele-mermaid.vitest.test.ts
@@ -0,0 +1,95 @@
+import { readFileSync, readdirSync } from 'node:fs';
+import { join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { selectAll } from 'hast-util-select';
+import { fromHtml } from 'hast-util-from-html';
+import { expect, test } from 'vitest';
+import { renderMermaid } from '../../src/utils/mermaid.mjs';
+
+test('renders all existing documentation fences with the local icon packs', () => {
+  function* files(directory: string): Generator<string> {
+    for (const entry of readdirSync(directory, { withFileTypes: true })) {
+      const path = join(directory, entry.name);
+      if (entry.isDirectory()) yield* files(path);
+      else if (/\.mdx?$/.test(entry.name)) yield path;
+    }
+  }
+  let count = 0;
+  for (const path of files(fileURLToPath(new URL('../../src/content/docs', import.meta.url)))) {
+    const markdown = readFileSync(path, 'utf8');
+    for (const match of markdown.matchAll(/^[ \t]*```mermaid[ \t]*\r?\n([\s\S]*?)^[ \t]*```[ \t]*$/gm)) {
+      const tree = fromHtml(renderMermaid(match[1]), { fragment: true });
+      expect(selectAll('svg.pele', tree), path).toHaveLength(1);
+      count++;
+    }
+  }
+  expect(count).toBeGreaterThan(0);
+});
+
+test('renders custom Aspire icons and rejects unknown named icons', () => {
+  const svg = renderMermaid('architecture-beta\n service app(aspire:blazor)[App]');
+  const tree = fromHtml(svg, { fragment: true });
+  expect(selectAll('svg[data-icon="aspire:blazor"] svg path', tree).length).toBeGreaterThan(0);
+  expect(() => renderMermaid('architecture-beta\n service app(aspire:missing)[App]')).toThrow('Unknown Mermaid icon');
+});
+
+test('preserves logo fills without inheriting diagram strokes', () => {
+  const tree = fromHtml(renderMermaid(`architecture-beta
+    service redis(logos:redis)[Redis]
+    service openai(logos:openai-icon)[OpenAI]
+    redis:R --> L:openai`), { fragment: true });
+  for (const name of ['logos:redis', 'logos:openai-icon']) {
+    const [icon] = selectAll(`svg[data-icon="${name}"] > svg`, tree);
+    expect(icon.properties.fill).toBe('currentColor');
+    expect(icon.properties.stroke).toBe('none');
+  }
+  expect(selectAll('svg[data-icon="logos:redis"] path[fill]', tree).length).toBeGreaterThan(0);
+});
+
+test('embeds existing local logos with contained light and dark artwork', () => {
+  const tree = fromHtml(renderMermaid(`architecture-beta
+    service vault(aspire:azure-key-vault)[Key Vault]
+    service mail(aspire:mailpit)[Mailpit]`), { fragment: true });
+  const [vault] = selectAll('svg[data-icon="aspire:azure-key-vault"] image', tree);
+  expect(vault.properties.href).toMatch(/^data:image\/png;base64,/);
+  const variants = selectAll('svg[data-icon="aspire:mailpit"] image', tree);
+  expect(variants.map((image) => image.properties.dataTheme)).toEqual(['light', 'dark']);
+  expect(variants[0].properties.href).not.toBe(variants[1].properties.href);
+  for (const image of [vault, ...variants]) {
+    expect(image.properties.preserveAspectRatio).toBe('xMidYMid meet');
+    const data = String(image.properties.href).split(',')[1];
+    expect(Buffer.from(data, 'base64').length).toBeGreaterThan(0);
+  }
+});
+
+test('renders flowchart icons while retaining labeled and optional connections', () => {
+  const tree = fromHtml(renderMermaid(`flowchart LR
+    App@{ icon: "iconoir:code", form: "square", label: "Consuming app" }
+    Cache@{ icon: "logos:redis", form: "square", label: "Redis" }
+    App -. Optional cache .-> Cache`), { fragment: true });
+  expect(selectAll('svg[data-icon="logos:redis"] path', tree).length).toBeGreaterThan(0);
+  expect(selectAll('.pele-edge-label', tree).length).toBeGreaterThan(0);
+});
+
+test('gives repeated diagrams distinct SVG and accessibility IDs', () => {
+  const source = 'flowchart LR\n accTitle: Example flow\n accDescr: First connects to second\n A[First] --> B[Second]';
+  const ids = (svg: string) => [...svg.matchAll(/\sid="([^"]+)"/g)].map((match) => match[1]);
+  const first = ids(renderMermaid(source));
+  const second = ids(renderMermaid(source));
+  expect(first.length).toBeGreaterThan(0);
+  expect(first.filter((id) => second.includes(id))).toEqual([]);
+});
+
+test('renders generic API inheritance with interfaces', () => {
+  const svg = renderMermaid('classDiagram\n direction TB\n class ResourceBuilder~T~ {\n }\n class IResourceBuilder~T~ {\n <<interface>>\n }\n IResourceBuilder~T~ <|.. ResourceBuilder~T~');
+  expect(svg).toContain('pele-class');
+  expect(svg).toContain('ResourceBuilder');
+});
+
+test('the prototype has no browser-side renderer or icon fetching', () => {
+  const head = readFileSync(new URL('../../src/components/starlight/Head.astro', import.meta.url), 'utf8');
+  expect(head).not.toContain("import '@scripts/mermaid'");
+  const css = readFileSync(new URL('../../src/styles/mermaid.css', import.meta.url), 'utf8');
+  expect(css).toContain('--pele-fg: var(--sl-color-text)');
+  expect(css).toContain('--pele-surface: var(--aspire-mermaid-node');
+});
diff --git a/src/frontend/tests/unit/remark-mermaid.vitest.test.ts b/src/frontend/tests/unit/remark-mermaid.vitest.test.ts
index 5e34b1fcb..236871fa9 100644
--- a/src/frontend/tests/unit/remark-mermaid.vitest.test.ts
+++ b/src/frontend/tests/unit/remark-mermaid.vitest.test.ts
@@ -10,25 +10,25 @@ import { remarkMermaid } from '../../config/remark-mermaid.mjs';
 const definition = 'flowchart TD\nA{"Ready?"} --> B["<b>Yes & no</b>"]';
 const fence = '```mermaid\n' + definition + '\n```';
 
-test('renders Mermaid as escaped text, without a code-highlight wrapper', async () => {
+test('renders Mermaid as build-time SVG, without a code-highlight wrapper', async () => {
   const processor = await createMarkdownProcessor({ remarkPlugins: [remarkMermaid] });
   const result = await processor.render(fence + '\n\n```typescript\nconst answer = 42;\n```');
   const tree = unified().use(rehypeParse, { fragment: true }).parse(result.code);
   const diagrams = selectAll('pre.mermaid', tree);
   expect(diagrams).toHaveLength(1);
-  expect(diagrams[0].children).toEqual([
-    { type: 'text', value: definition, position: expect.anything() },
-  ]);
+  expect(diagrams[0].properties.dataProcessed).toBe('true');
+  expect(selectAll('pre.mermaid svg.pele-flowchart', tree)).toHaveLength(1);
+  expect(selectAll('pre.mermaid script, pre.mermaid foreignObject', tree)).toHaveLength(0);
   expect(selectAll('pre.mermaid code', tree)).toHaveLength(0);
   expect(selectAll('pre code', tree)).toHaveLength(1);
 });
 
-test('preserves diagram syntax in MDX and nested content', async () => {
+test('renders SVG inside nested MDX content', async () => {
   const compiled = await compile('<section>\n\n' + fence + '\n\n</section>', {
     remarkPlugins: [remarkMermaid],
     outputFormat: 'function-body',
   });
-  type Node = { tag: string; props: { children?: Node | string; className?: string } };
+  type Node = { tag: string; props: { children?: Node | string; className?: string; 'data-processed'?: string } };
   const jsx = (tag: string, props: Node['props']): Node => ({ tag, props });
   const module: { default: () => Node } = runInNewContext(
     `(function () { ${String(compiled)} })({ jsx, jsxs: jsx });`,
@@ -36,8 +36,17 @@ test('preserves diagram syntax in MDX and nested content', async () => {
   );
   const section = module.default();
   expect(section.tag).toBe('section');
-  expect(section.props.children).toEqual({
+  expect(section.props.children).toMatchObject({
     tag: 'pre',
-    props: { className: 'mermaid', children: definition },
+    props: {
+      className: 'mermaid',
+      'data-processed': 'true',
+      children: { tag: 'svg', props: { className: expect.stringContaining('pele-flowchart') } },
+    },
   });
 });
+
+test('fails compilation for invalid diagrams instead of shipping an empty placeholder', async () => {
+  const processor = await createMarkdownProcessor({ remarkPlugins: [remarkMermaid] });
+  await expect(processor.render('```mermaid\nnot a diagram\n```')).rejects.toThrow();
+});