diff --git a/.github/tests/integration-icon-css.html b/.github/tests/integration-icon-css.html
new file mode 100644
index 00000000..1402e27a
--- /dev/null
+++ b/.github/tests/integration-icon-css.html
@@ -0,0 +1,81 @@
+
+
+
+
+ Integration icon CSS regression test
+
+
+
+
+
+ Running…
+
+
+
diff --git a/docs.json b/docs.json
index 45148ed3..b239b73b 100644
--- a/docs.json
+++ b/docs.json
@@ -188,6 +188,7 @@
"integrations/browser-use",
{
"group": "Claude",
+ "icon": "/images/integration-icons/claude.svg",
"pages": [
"integrations/claude/overview",
"integrations/claude/claude-code-and-desktop",
@@ -197,6 +198,7 @@
},
{
"group": "Computer Use Models",
+ "icon": "/images/integration-icons/computer-cursor-rounded.svg",
"pages": [
"integrations/computer-use/overview",
"integrations/computer-use/anthropic",
@@ -212,6 +214,7 @@
"integrations/stagehand",
{
"group": "Stripe Projects",
+ "icon": "/images/integration-icons/stripe.svg",
"pages": [
"integrations/stripe-projects",
"integrations/stripe-projects-browser"
@@ -221,6 +224,7 @@
"integrations/valtown",
{
"group": "Vercel",
+ "icon": "/images/integration-icons/vercel.svg",
"pages": [
"integrations/vercel/overview",
"integrations/vercel/agent-browser",
diff --git a/images/integration-icons/1password-logo-transparent.svg b/images/integration-icons/1password-logo-transparent.svg
new file mode 100644
index 00000000..72def670
--- /dev/null
+++ b/images/integration-icons/1password-logo-transparent.svg
@@ -0,0 +1,4 @@
+
diff --git a/images/integration-icons/browser-use-logo-transparent.svg b/images/integration-icons/browser-use-logo-transparent.svg
new file mode 100644
index 00000000..d7338f24
--- /dev/null
+++ b/images/integration-icons/browser-use-logo-transparent.svg
@@ -0,0 +1,9 @@
+
diff --git a/images/integration-icons/claude.svg b/images/integration-icons/claude.svg
new file mode 100644
index 00000000..d967dfcf
--- /dev/null
+++ b/images/integration-icons/claude.svg
@@ -0,0 +1,4 @@
+
diff --git a/images/integration-icons/computer-cursor-rounded.svg b/images/integration-icons/computer-cursor-rounded.svg
new file mode 100644
index 00000000..f0c539ec
--- /dev/null
+++ b/images/integration-icons/computer-cursor-rounded.svg
@@ -0,0 +1 @@
+
diff --git a/images/integration-icons/laminar-outline.svg b/images/integration-icons/laminar-outline.svg
new file mode 100644
index 00000000..eef38331
--- /dev/null
+++ b/images/integration-icons/laminar-outline.svg
@@ -0,0 +1,4 @@
+
diff --git a/images/integration-icons/nousresearch.svg b/images/integration-icons/nousresearch.svg
new file mode 100644
index 00000000..becdf295
--- /dev/null
+++ b/images/integration-icons/nousresearch.svg
@@ -0,0 +1 @@
+
diff --git a/images/integration-icons/stagehand-logo-transparent.svg b/images/integration-icons/stagehand-logo-transparent.svg
new file mode 100644
index 00000000..35e9fde1
--- /dev/null
+++ b/images/integration-icons/stagehand-logo-transparent.svg
@@ -0,0 +1,4 @@
+
diff --git a/images/integration-icons/stripe.svg b/images/integration-icons/stripe.svg
new file mode 100644
index 00000000..71fd5439
--- /dev/null
+++ b/images/integration-icons/stripe.svg
@@ -0,0 +1,4 @@
+
diff --git a/images/integration-icons/terraform.svg b/images/integration-icons/terraform.svg
new file mode 100644
index 00000000..f499b67b
--- /dev/null
+++ b/images/integration-icons/terraform.svg
@@ -0,0 +1,4 @@
+
diff --git a/images/integration-icons/val-town.svg b/images/integration-icons/val-town.svg
new file mode 100644
index 00000000..826bb40d
--- /dev/null
+++ b/images/integration-icons/val-town.svg
@@ -0,0 +1,4 @@
+
diff --git a/images/integration-icons/vercel.svg b/images/integration-icons/vercel.svg
new file mode 100644
index 00000000..78a9a6e5
--- /dev/null
+++ b/images/integration-icons/vercel.svg
@@ -0,0 +1,4 @@
+
diff --git a/images/integration-icons/vibium.svg b/images/integration-icons/vibium.svg
new file mode 100644
index 00000000..aace095b
--- /dev/null
+++ b/images/integration-icons/vibium.svg
@@ -0,0 +1,4 @@
+
diff --git a/integrations/1password.mdx b/integrations/1password.mdx
index b6f0a10f..985ac5e5 100644
--- a/integrations/1password.mdx
+++ b/integrations/1password.mdx
@@ -1,6 +1,7 @@
---
title: "1Password"
description: "Use credentials from your 1Password vaults for Managed Auth"
+icon: "/images/integration-icons/1password-logo-transparent.svg"
---
Connect 1Password to automatically use credentials from your existing vaults with [Managed Auth](/auth/overview). No need to manually create credentials in Kernel—1Password items are discovered by domain matching.
diff --git a/integrations/browser-use.mdx b/integrations/browser-use.mdx
index 041f0779..7c1b85a4 100644
--- a/integrations/browser-use.mdx
+++ b/integrations/browser-use.mdx
@@ -1,5 +1,6 @@
---
title: "Browser Use"
+icon: "/images/integration-icons/browser-use-logo-transparent.svg"
---
[Browser Use](https://github.com/browser-use/browser-use) is the AI browser agent that empowers anyone to automate repetitive online tasks, no code required. By integrating with Kernel, you can run Browser Use Agents and automations with cloud-hosted browsers.
diff --git a/integrations/hermes-agent.mdx b/integrations/hermes-agent.mdx
index e59c5755..ed3a9268 100644
--- a/integrations/hermes-agent.mdx
+++ b/integrations/hermes-agent.mdx
@@ -1,6 +1,7 @@
---
title: "Hermes Agent"
description: "Run Hermes Agent browser tools on Kernel cloud browsers"
+icon: "/images/integration-icons/nousresearch.svg"
---
[Hermes Agent](https://github.com/NousResearch/hermes-agent) is an AI agent with browser automation, terminal access, skills, and messaging integrations. The [Kernel browser plugin](https://github.com/kernel/hermes-browser-plugin) routes Hermes's `browser_*` tools through Kernel cloud browsers and handles browser creation and cleanup for you.
diff --git a/integrations/laminar.mdx b/integrations/laminar.mdx
index 57e258d1..c1bf66f7 100644
--- a/integrations/laminar.mdx
+++ b/integrations/laminar.mdx
@@ -1,5 +1,6 @@
---
title: "Laminar"
+icon: "/images/integration-icons/laminar-outline.svg"
---
[Laminar](https://www.laminar.sh/) is an open-source observability and evaluation platform for autonomous AI agents. You can create a cloud account or self-host Laminar for your infrastructure. By integrating Laminar with Kernel, you can trace and monitor your browser automations with full visibility into LLM calls, browser actions, session recordings, and performance metrics.
diff --git a/integrations/stagehand.mdx b/integrations/stagehand.mdx
index 8789124a..90314317 100644
--- a/integrations/stagehand.mdx
+++ b/integrations/stagehand.mdx
@@ -1,5 +1,6 @@
---
title: "Stagehand"
+icon: "/images/integration-icons/stagehand-logo-transparent.svg"
---
[Stagehand](https://github.com/browserbase/stagehand) is an open source AI browser automation framework. It lets developers choose what to write in code vs. natural language. By integrating with Kernel, you can run Stagehand automations with cloud-hosted browsers.
diff --git a/integrations/terraform.mdx b/integrations/terraform.mdx
index ae834d88..991bf297 100644
--- a/integrations/terraform.mdx
+++ b/integrations/terraform.mdx
@@ -1,6 +1,7 @@
---
title: "Terraform"
description: "Manage durable Kernel infrastructure with Terraform"
+icon: "/images/integration-icons/terraform.svg"
---
Use the official Kernel Terraform provider to manage durable infrastructure such as projects and browser pools.
diff --git a/integrations/valtown.mdx b/integrations/valtown.mdx
index 376120c2..6a40373e 100644
--- a/integrations/valtown.mdx
+++ b/integrations/valtown.mdx
@@ -1,5 +1,6 @@
---
title: "Val Town"
+icon: "/images/integration-icons/val-town.svg"
---
[Val Town](https://www.val.town/) is a serverless platform to run Typescript automations. You can think of it like Zapier for software developers.
diff --git a/integrations/vibium.mdx b/integrations/vibium.mdx
index e418f858..eaeae647 100644
--- a/integrations/vibium.mdx
+++ b/integrations/vibium.mdx
@@ -1,5 +1,6 @@
---
title: "Vibium"
+icon: "/images/integration-icons/vibium.svg"
---
[Vibium](https://github.com/VibiumDev/vibium) is a brand-new browser automation framework for AI agents that is built on WebDriver BiDi, a W3C standard. As of [v26.3.9](https://github.com/VibiumDev/vibium/releases/tag/v26.3.9), any agent can now use Vibium to connect to Kernel cloud browsers to navigate pages, fill forms, click buttons, and take screenshots. We're really excited to keep working with Jason Huggins and to keep supporting open web standards.
diff --git a/style.css b/style.css
index 367a4992..2b7c61b5 100644
--- a/style.css
+++ b/style.css
@@ -252,3 +252,59 @@ html.dark .callout[class*="yellow"] svg {
.dark .link {
border-bottom-color: #EDEEF0
}
+
+#navigation-items img[src*="/images/integration-icons/"] {
+ width: 14px;
+ height: 14px;
+ opacity: 0.68;
+}
+
+#navigation-items img[src*="/images/integration-icons/nousresearch.svg"] {
+ opacity: 0.72;
+ transform: scale(1.06);
+}
+
+#navigation-items img[src*="/images/integration-icons/browser-use-logo-transparent.svg"] {
+ transform: scale(0.9);
+}
+
+#navigation-items img[src*="/images/integration-icons/computer-cursor-rounded.svg"] {
+ transform: scale(0.95);
+}
+
+#navigation-items img[src*="/images/integration-icons/laminar-outline.svg"] {
+ transform: scale(0.9);
+}
+
+#navigation-items img[src*="/images/integration-icons/stagehand-logo-transparent.svg"] {
+ transform: scale(0.88);
+}
+
+#navigation-items img[src*="/images/integration-icons/stripe.svg"] {
+ transform: scale(0.82);
+}
+
+#navigation-items img[src*="/images/integration-icons/vercel.svg"] {
+ transform: scale(0.76);
+}
+
+#navigation-items img[src*="/images/integration-icons/1password-logo-transparent.svg"] {
+ opacity: 0.6;
+ transform: scale(0.82);
+}
+
+#navigation-items li > button:has(img[src*="/images/integration-icons/"]) > div:has(> svg) {
+ order: 1;
+}
+
+#navigation-items li > button:has(img[src*="/images/integration-icons/"]) > div:has(> img[src*="/images/integration-icons/"]) {
+ order: 3;
+}
+
+#navigation-items li > button:has(img[src*="/images/integration-icons/"]) > div:not(:has(> svg)):not(:has(> img[src*="/images/integration-icons/"])) {
+ order: 2;
+}
+
+html.dark #navigation-items img[src*="/images/integration-icons/"] {
+ filter: invert(1);
+}