diff --git a/docs-mintlify/docs.json b/docs-mintlify/docs.json
index 94abe87eb..2c6844bb0 100644
--- a/docs-mintlify/docs.json
+++ b/docs-mintlify/docs.json
@@ -69,7 +69,7 @@
"pages": [
{
"group": "Authentication",
- "icon": "lock",
+ "icon": "/images/app-icons/authentication.svg",
"pages": [
"guides/apps/authentication/overview",
"guides/apps/authentication/user-onboarding",
@@ -101,7 +101,7 @@
},
{
"group": "Teams",
- "icon": "users",
+ "icon": "/images/app-icons/teams.svg",
"pages": [
"guides/apps/teams/overview",
"guides/apps/teams/team-selection"
diff --git a/docs-mintlify/guides/apps/analytics/overview.mdx b/docs-mintlify/guides/apps/analytics/overview.mdx
index 92a4fb41f..153d7e932 100644
--- a/docs-mintlify/guides/apps/analytics/overview.mdx
+++ b/docs-mintlify/guides/apps/analytics/overview.mdx
@@ -1,7 +1,7 @@
---
title: "Analytics"
description: "Explore events, session replays, and SQL queries in your project's analytics dataset"
-icon: "chart-bar"
+icon: "/images/app-icons/analytics.svg"
---
The Analytics app gives you direct access to your project's analytics dataset in Stack Auth. You can inspect raw event tables, run ClickHouse SQL queries, and watch session replays to debug real user behavior.
diff --git a/docs-mintlify/guides/apps/api-keys/overview.mdx b/docs-mintlify/guides/apps/api-keys/overview.mdx
index 15c1d2adb..8ceb4fc68 100644
--- a/docs-mintlify/guides/apps/api-keys/overview.mdx
+++ b/docs-mintlify/guides/apps/api-keys/overview.mdx
@@ -1,7 +1,7 @@
---
title: "API Keys"
description: "Create and manage API keys for users and teams"
-icon: "key"
+icon: "/images/app-icons/api-keys.svg"
---
The API Keys app enables your users to generate and manage API keys for programmatic access to your backend services. API keys provide a secure way to authenticate requests, allowing developers to associate API calls with specific users or teams. Stack Auth provides prebuilt UI components for users and teams to manage their own API keys.
diff --git a/docs-mintlify/guides/apps/data-vault/overview.mdx b/docs-mintlify/guides/apps/data-vault/overview.mdx
index db1c42d58..0ba3fbf36 100644
--- a/docs-mintlify/guides/apps/data-vault/overview.mdx
+++ b/docs-mintlify/guides/apps/data-vault/overview.mdx
@@ -1,7 +1,7 @@
---
title: "Data Vault"
description: "An encrypted key-value store for sensitive data, with zero-knowledge security"
-icon: "vault"
+icon: "/images/app-icons/data-vault.svg"
---
Data Vault is an encrypted key-value store built into Stack Auth. It lets you securely store sensitive data — API tokens, connection strings, secrets, or any other values — without ever exposing plaintext to Stack Auth's database or operators.
diff --git a/docs-mintlify/guides/apps/emails/overview.mdx b/docs-mintlify/guides/apps/emails/overview.mdx
index ef8188e19..30b106e46 100644
--- a/docs-mintlify/guides/apps/emails/overview.mdx
+++ b/docs-mintlify/guides/apps/emails/overview.mdx
@@ -1,7 +1,7 @@
---
title: "Emails"
description: "Send custom emails, manage templates, and track delivery - all from Stack Auth."
-icon: "envelope"
+icon: "/images/app-icons/emails.svg"
---
Stack Auth includes a full email system for sending transactional and marketing emails to your users. It handles rendering, delivery, scheduling, notification preferences, and tracking out of the box.
diff --git a/docs-mintlify/guides/apps/fraud-protection/overview.mdx b/docs-mintlify/guides/apps/fraud-protection/overview.mdx
index f19f88361..ae983c28b 100644
--- a/docs-mintlify/guides/apps/fraud-protection/overview.mdx
+++ b/docs-mintlify/guides/apps/fraud-protection/overview.mdx
@@ -1,6 +1,7 @@
---
title: Fraud Protection
description: Protect your project from fraud and abuse
+icon: "/images/app-icons/fraud-protection.svg"
---
Fraud Protection helps you block abusive sign-ups and enforce safer onboarding rules.
diff --git a/docs-mintlify/guides/apps/launch-checklist/overview.mdx b/docs-mintlify/guides/apps/launch-checklist/overview.mdx
index f15078468..2970142f6 100644
--- a/docs-mintlify/guides/apps/launch-checklist/overview.mdx
+++ b/docs-mintlify/guides/apps/launch-checklist/overview.mdx
@@ -1,7 +1,7 @@
---
title: "Launch Checklist"
description: "Steps to prepare Stack for production use"
-icon: "clipboard-check"
+icon: "/images/app-icons/launch-checklist.svg"
---
Stack makes development easy with various default settings, but these settings need to be optimized for security and user experience when moving to production. Here's a checklist of things you need to do before switching to production mode:
diff --git a/docs-mintlify/guides/apps/payments/overview.mdx b/docs-mintlify/guides/apps/payments/overview.mdx
index 5b2dc6ec8..509f6a222 100644
--- a/docs-mintlify/guides/apps/payments/overview.mdx
+++ b/docs-mintlify/guides/apps/payments/overview.mdx
@@ -1,7 +1,7 @@
---
title: "Payments"
description: "Accept payments and manage billing with Stack Auth's Stripe integration"
-icon: "credit-card"
+icon: "/images/app-icons/payments.svg"
---
import { PaymentsConcepts } from "/snippets/payments-concepts.jsx";
diff --git a/docs-mintlify/guides/apps/rbac/overview.mdx b/docs-mintlify/guides/apps/rbac/overview.mdx
index e247ab6ee..2060876d3 100644
--- a/docs-mintlify/guides/apps/rbac/overview.mdx
+++ b/docs-mintlify/guides/apps/rbac/overview.mdx
@@ -2,7 +2,7 @@
title: "RBAC Permissions"
description: "Control what each user can do and access within your application"
sidebarTitle: RBAC
-icon: "user-cog"
+icon: "/images/app-icons/rbac.svg"
---
Permissions are a way to control what each user can do and access within your application.
diff --git a/docs-mintlify/guides/apps/webhooks/overview.mdx b/docs-mintlify/guides/apps/webhooks/overview.mdx
index 777f279c1..67550211a 100644
--- a/docs-mintlify/guides/apps/webhooks/overview.mdx
+++ b/docs-mintlify/guides/apps/webhooks/overview.mdx
@@ -1,7 +1,7 @@
---
title: "Webhooks"
description: "Receive real-time updates when events occur in your Stack project"
-icon: "webhook"
+icon: "/images/app-icons/webhooks.svg"
---
Webhooks are a powerful way to keep your backend in sync with Stack. They allow you to receive real-time updates when events occur in your Stack project, such as when a user or team is created, updated, or deleted.
diff --git a/docs-mintlify/images/app-icons/LICENSE b/docs-mintlify/images/app-icons/LICENSE
new file mode 100644
index 000000000..6ce38de53
--- /dev/null
+++ b/docs-mintlify/images/app-icons/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020-2024 Phosphor Icons
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/docs-mintlify/images/app-icons/analytics.svg b/docs-mintlify/images/app-icons/analytics.svg
new file mode 100644
index 000000000..dc1b2625e
--- /dev/null
+++ b/docs-mintlify/images/app-icons/analytics.svg
@@ -0,0 +1 @@
+
diff --git a/docs-mintlify/images/app-icons/api-keys.svg b/docs-mintlify/images/app-icons/api-keys.svg
new file mode 100644
index 000000000..3e5e05c19
--- /dev/null
+++ b/docs-mintlify/images/app-icons/api-keys.svg
@@ -0,0 +1 @@
+
diff --git a/docs-mintlify/images/app-icons/authentication.svg b/docs-mintlify/images/app-icons/authentication.svg
new file mode 100644
index 000000000..eae54fbde
--- /dev/null
+++ b/docs-mintlify/images/app-icons/authentication.svg
@@ -0,0 +1 @@
+
diff --git a/docs-mintlify/images/app-icons/data-vault.svg b/docs-mintlify/images/app-icons/data-vault.svg
new file mode 100644
index 000000000..24fc51118
--- /dev/null
+++ b/docs-mintlify/images/app-icons/data-vault.svg
@@ -0,0 +1 @@
+
diff --git a/docs-mintlify/images/app-icons/emails.svg b/docs-mintlify/images/app-icons/emails.svg
new file mode 100644
index 000000000..bfa427708
--- /dev/null
+++ b/docs-mintlify/images/app-icons/emails.svg
@@ -0,0 +1 @@
+
diff --git a/docs-mintlify/images/app-icons/fraud-protection.svg b/docs-mintlify/images/app-icons/fraud-protection.svg
new file mode 100644
index 000000000..c8c0a7729
--- /dev/null
+++ b/docs-mintlify/images/app-icons/fraud-protection.svg
@@ -0,0 +1 @@
+
diff --git a/docs-mintlify/images/app-icons/launch-checklist.svg b/docs-mintlify/images/app-icons/launch-checklist.svg
new file mode 100644
index 000000000..5d0d6f924
--- /dev/null
+++ b/docs-mintlify/images/app-icons/launch-checklist.svg
@@ -0,0 +1 @@
+
diff --git a/docs-mintlify/images/app-icons/payments.svg b/docs-mintlify/images/app-icons/payments.svg
new file mode 100644
index 000000000..815e7ab1c
--- /dev/null
+++ b/docs-mintlify/images/app-icons/payments.svg
@@ -0,0 +1 @@
+
diff --git a/docs-mintlify/images/app-icons/rbac.svg b/docs-mintlify/images/app-icons/rbac.svg
new file mode 100644
index 000000000..b05d5efaa
--- /dev/null
+++ b/docs-mintlify/images/app-icons/rbac.svg
@@ -0,0 +1 @@
+
diff --git a/docs-mintlify/images/app-icons/teams.svg b/docs-mintlify/images/app-icons/teams.svg
new file mode 100644
index 000000000..11f0118c5
--- /dev/null
+++ b/docs-mintlify/images/app-icons/teams.svg
@@ -0,0 +1 @@
+
diff --git a/docs-mintlify/images/app-icons/webhooks.svg b/docs-mintlify/images/app-icons/webhooks.svg
new file mode 100644
index 000000000..385b3c8da
--- /dev/null
+++ b/docs-mintlify/images/app-icons/webhooks.svg
@@ -0,0 +1 @@
+
diff --git a/docs-mintlify/style.css b/docs-mintlify/style.css
new file mode 100644
index 000000000..6d4da7f9a
--- /dev/null
+++ b/docs-mintlify/style.css
@@ -0,0 +1,28 @@
+ul#sidebar-group > li > button > img {
+ /* AppIcon-like shell */
+ border: 1px solid transparent !important;
+ border-radius: 30% !important;
+ padding: 2px;
+ box-sizing: content-box;
+ background:
+ linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) padding-box,
+ linear-gradient(135deg, #cbd5e1 0%, #94a3b8 52%, #cbd5e1 100%) border-box !important;
+ box-shadow:
+ 0 2px 6px rgba(15, 23, 42, 0.18),
+ inset 0 0 0 1px rgba(255, 255, 255, 0.55);
+}
+
+html.dark ul#sidebar-group > li > button > img,
+html.dark ul#sidebar-group > li > a > div:first-child > img,
+:root[data-theme="dark"] ul#sidebar-group > li > button > img,
+:root[data-theme="dark"] ul#sidebar-group > li > a > div:first-child > img {
+ border: 1px solid transparent !important;
+ /* Use inverted shell colors so post-filter background stays blue */
+ background:
+ linear-gradient(135deg, #e9cfaf 0%, #f6f3ee 100%) padding-box,
+ linear-gradient(135deg, #b18a67 0%, #f2dcc2 52%, #b18a67 100%) border-box !important;
+ box-shadow:
+ 0 6px 14px rgba(245, 186, 104, 0.22),
+ inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+ filter: invert(1);
+}