From 5d97a5b0409907a7549fdd288a23608b3ad7f808 Mon Sep 17 00:00:00 2001
From: bryantgillespie <hey@bryantgillespie.com>
Date: Tue, 2 Jun 2026 12:25:57 -0400
Subject: [PATCH] Switch site icons to Lucide

---
 app/app.config.ts                             | 24 ++++++-------
 app/components/CopyDocButton.vue              | 10 +++---
 app/components/DocsBanner.vue                 |  4 +--
 app/components/DocsSearchPalette.vue          | 30 ++++++++--------
 app/components/DocsSearchPreview.vue          |  4 +--
 app/components/DocsSearchTrigger.vue          |  2 +-
 app/components/DocsToc.vue                    |  2 +-
 app/components/DocsTocFeedback.vue            |  6 ++--
 app/components/FrameworkLinkList.vue          |  2 +-
 app/components/HomeHero.vue                   |  6 ++--
 app/components/HomePersonalized.vue           | 26 +++++++-------
 app/components/InlinePersonalize.vue          |  4 +--
 app/components/MobileNavSectionSwitcher.vue   |  2 +-
 app/components/PersonalizeIdleCta.vue         |  6 ++--
 app/components/SettingsDrawer.vue             | 10 +++---
 app/components/SettingsDrawerTrigger.vue      |  2 +-
 app/components/TutorialsCategory.vue          |  2 +-
 app/components/content/AgentPrompt.vue        |  6 ++--
 app/components/content/Chat.vue               |  6 ++--
 app/components/content/DocCliSnippet.vue      |  2 +-
 app/components/content/Example.vue            |  2 +-
 app/components/content/HomeFeatures.vue       | 12 +++----
 app/components/content/VideoEmbed.vue         |  2 +-
 app/composables/useSectionLinks.ts            | 10 +++---
 app/layouts/docs.vue                          |  2 +-
 app/pages/[...slug].vue                       |  8 ++---
 app/pages/frameworks/index.vue                |  4 +--
 app/pages/tutorials/[category]/[...slug].vue  |  8 ++---
 app/pages/tutorials/[category]/index.vue      |  4 +--
 app/pages/tutorials/index.vue                 |  4 +--
 app/utils/deployments.ts                      |  4 +--
 app/utils/experience.ts                       |  6 ++--
 app/utils/libraries.ts                        |  2 +-
 app/utils/roles.ts                            |  4 +--
 app/utils/useCases.ts                         | 14 ++++----
 content/_partials/authentication.md           |  2 +-
 content/_partials/config-env-vars.md          |  2 +-
 .../_partials/deployment-public-instance.md   |  2 +-
 .../extension-hook-system-collections.md      |  2 +-
 content/_partials/extensions-api-internals.md |  2 +-
 content/_partials/extensions-app-internals.md |  6 ++--
 content/_partials/extensions-theme.md         |  2 +-
 content/_partials/extensions-uid.md           |  2 +-
 content/_partials/license.md                  |  2 +-
 .../cloud/1.getting-started/1.introduction.md |  4 +--
 content/cloud/1.getting-started/2.teams.md    | 10 +++---
 content/cloud/1.getting-started/3.accounts.md |  4 +--
 content/cloud/2.projects/2.destroy.md         |  2 +-
 .../cloud/2.projects/3.version-upgrades.md    |  2 +-
 .../2.environment-variables.md                |  4 +--
 .../cloud/4.billing/3.cancel-subscription.md  |  2 +-
 .../community/3.codebase/2.dev-environment.md |  6 ++--
 content/community/3.codebase/3.testing.md     |  2 +-
 content/configuration/1.general.md            |  4 +--
 content/configuration/ai.md                   |  8 ++---
 content/configuration/auth-sso.md             | 16 ++++-----
 content/configuration/cache.md                |  6 ++--
 content/configuration/database.md             |  2 +-
 content/configuration/extensions.md           |  4 +--
 content/configuration/files.md                |  6 ++--
 content/configuration/flows.md                |  2 +-
 content/configuration/logging.md              |  2 +-
 content/configuration/metrics.md              |  2 +-
 content/configuration/migrations.md           |  2 +-
 content/configuration/realtime.md             |  6 ++--
 content/configuration/security-limits.md      |  4 +--
 content/configuration/theming.md              |  4 +--
 content/frameworks/.navigation.yml            |  2 +-
 .../frameworks/01.nextjs/01.data-fetching.md  |  2 +-
 .../08.live-preview-content-versioning.md     |  2 +-
 .../frameworks/03.astro/01.data-fetching.md   |  2 +-
 .../04.sveltekit/01.data-fetching.md          |  6 ++--
 .../frameworks/06.angular/01.data-fetching.md |  4 +--
 .../frameworks/09.flask/01.data-fetching.md   |  6 ++--
 .../14.eleventy/01.data-fetching.md           |  2 +-
 .../15.solidstart/01.data-fetching.md         |  4 +--
 content/getting-started/1.overview.md         |  2 +-
 content/getting-started/2.create-a-project.md |  6 ++--
 content/getting-started/4.use-the-api.md      |  8 ++---
 .../getting-started/5.authenticate-user.md    |  4 +--
 content/getting-started/6.upload-files.md     |  4 +--
 content/getting-started/9.resources.md        | 36 +++++++++----------
 content/guides/01.data-model/1.collections.md | 18 +++++-----
 content/guides/01.data-model/2.fields.md      | 12 +++----
 content/guides/01.data-model/3.interfaces.md  | 12 +++----
 .../guides/01.data-model/4.relationships.md   |  8 ++---
 content/guides/02.content/2.editor.md         | 10 +++---
 content/guides/02.content/3.layouts.md        |  8 ++---
 content/guides/02.content/4.import-export.md  |  6 ++--
 content/guides/02.content/5.live-preview.md   |  4 +--
 .../guides/02.content/6.content-versioning.md | 18 +++++-----
 content/guides/02.content/7.translations.md   | 12 +++----
 .../8.visual-editor/1.frontend-library.md     | 16 ++++-----
 .../8.visual-editor/2.studio-module.md        |  6 ++--
 .../9.collaborative-editing/0.index.md        |  8 ++---
 .../1.configuration.md                        |  2 +-
 content/guides/03.auth/1.tokens-cookies.md    |  6 ++--
 content/guides/03.auth/2.access-control.md    |  6 ++--
 content/guides/03.auth/3.creating-users.md    | 10 +++---
 content/guides/03.auth/4.email-login.md       |  8 ++---
 content/guides/03.auth/6.accountability.md    |  2 +-
 content/guides/03.auth/7.sso/1.index.md       |  6 ++--
 content/guides/03.auth/7.sso/2.seamless.md    |  4 +--
 content/guides/04.connect/1.authentication.md |  2 +-
 .../guides/04.connect/3.query-parameters.md   | 18 +++++-----
 content/guides/04.connect/5.errors.md         |  4 +--
 content/guides/04.connect/6.sdk.md            | 16 ++++-----
 .../04.connect/7.json/2.advanced-querying.md  | 16 ++++-----
 content/guides/05.files/1.upload.md           |  4 +--
 content/guides/05.files/3.manage.md           |  6 ++--
 content/guides/05.files/4.access.md           |  2 +-
 content/guides/05.files/5.transform.md        |  4 +--
 content/guides/06.flows/3.triggers.md         | 14 ++++----
 content/guides/06.flows/4.operations.md       | 26 +++++++-------
 content/guides/06.flows/index.md              |  6 ++--
 content/guides/07.realtime/2.subscriptions.md |  2 +-
 content/guides/07.realtime/3.actions.md       |  2 +-
 .../guides/07.realtime/4.custom-handlers.md   |  6 ++--
 content/guides/08.insights/1.overview.md      |  2 +-
 content/guides/08.insights/2.panels.md        | 14 ++++----
 content/guides/09.extensions/0.overview.md    |  2 +-
 content/guides/09.extensions/1.quickstart.md  |  2 +-
 .../09.extensions/2.api-extensions/1.hooks.md |  6 ++--
 .../2.api-extensions/2.endpoints.md           |  2 +-
 .../2.api-extensions/3.operations.md          |  4 +--
 .../2.api-extensions/4.services.md            | 14 ++++----
 .../3.app-extensions/5.modules.md             |  2 +-
 .../3.app-extensions/6.themes.md              |  2 +-
 .../3.app-extensions/7.ui-library.md          |  4 +--
 .../09.extensions/5.marketplace/0.index.md    |  4 +--
 .../5.marketplace/1.publishing.md             |  2 +-
 content/guides/09.extensions/6.cli.md         |  8 ++---
 content/guides/11.ai/0.index.md               |  6 ++--
 content/guides/11.ai/1.assistant/0.index.md   | 14 ++++----
 content/guides/11.ai/1.assistant/1.setup.md   | 34 +++++++++---------
 content/guides/11.ai/1.assistant/2.usage.md   | 16 ++++-----
 content/guides/11.ai/1.assistant/3.tools.md   | 12 +++----
 content/guides/11.ai/1.assistant/4.tips.md    |  6 ++--
 .../guides/11.ai/1.assistant/5.security.md    |  8 ++---
 content/guides/11.ai/2.mcp/0.index.md         | 18 +++++-----
 content/guides/11.ai/2.mcp/1.installation.md  | 18 +++++-----
 content/guides/11.ai/2.mcp/3.tools.md         |  4 +--
 content/guides/11.ai/2.mcp/4.prompts.md       |  4 +--
 content/guides/11.ai/2.mcp/6.oauth.md         |  2 +-
 content/guides/11.ai/2.mcp/7.security.md      |  4 +--
 .../guides/11.ai/2.mcp/8.local-mcp/0.index.md |  4 +--
 .../guides/11.ai/2.mcp/8.local-mcp/1.tools.md |  2 +-
 .../11.ai/2.mcp/8.local-mcp/2.prompts.md      |  4 +--
 .../guides/12.integrations/1.n8n/0.index.md   |  8 ++---
 .../1.n8n/directus-n8n-actions.md             |  4 +--
 .../1.n8n/directus-n8n-advanced.md            |  8 ++---
 .../1.n8n/directus-n8n-triggers.md            |  4 +--
 .../use-clay-templates-with-directus.md       |  2 +-
 .../12.integrations/3.zapier/0.index.md       |  4 +--
 .../12.integrations/3.zapier/actions.md       | 14 ++++----
 .../12.integrations/3.zapier/advanced.md      |  4 +--
 .../12.integrations/3.zapier/triggers.md      |  2 +-
 .../12.integrations/4.vercel/0.index.md       |  6 ++--
 .../12.integrations/5.netlify/0.index.md      |  6 ++--
 .../12.integrations/6.framer/0.index.md       |  2 +-
 .../guides/13.security/1.best-practices.md    |  6 ++--
 content/index.md                              | 18 +++++-----
 content/licensing/1.overview.md               | 12 +++----
 content/mcp-help.md                           |  2 +-
 content/releases/0.index.md                   |  8 ++---
 .../3.breaking-changes/1.version-10.md        | 16 ++++-----
 .../3.breaking-changes/2.version-11.md        |  4 +--
 .../3.breaking-changes/3.version-12.md        |  2 +-
 content/self-hosting/1.overview.md            |  2 +-
 content/self-hosting/2.requirements.md        |  2 +-
 content/self-hosting/3.deploying.md           |  6 ++--
 ...e-blocks-with-many-to-any-relationships.md |  8 ++---
 .../advanced-types-with-the-directus-sdk.md   |  6 ++--
 .../migrate-from-wordpress-to-directus.md     |  4 +--
 ...hanges-between-environments-in-directus.md |  2 +-
 .../check-permissions-in-a-custom-endpoint.md |  2 +-
 ...reate-collection-items-in-custom-panels.md |  4 +--
 ...ew-customers-in-stripe-in-a-custom-hook.md |  2 +-
 ...l-api-data-from-vonage-in-custom-panels.md |  2 +-
 ...mat-dates-in-a-custom-display-extension.md |  2 +-
 ...-navigation-in-multipage-custom-modules.md | 10 +++---
 ...rnal-api-in-a-custom-endpoint-extension.md |  4 +--
 .../read-collection-data-in-custom-layouts.md |  4 +--
 ...ssages-with-twilio-in-custom-operations.md |  2 +-
 ...s-messages-with-twilio-in-custom-panels.md |  2 +-
 ...nal-items-in-a-custom-display-extension.md |  2 +-
 ...stand-available-slots-in-custom-modules.md | 10 +++---
 .../use-npm-packages-in-custom-operations.md  |  2 +-
 ...ne-numbers-with-twilio-in-a-custom-hook.md |  2 +-
 .../deploy-directus-to-an-ubuntu-server.md    |  8 ++---
 .../deploy-directus-to-aws-ec2.md             |  2 +-
 .../deploy-directus-to-azure-web-apps.md      |  6 ++--
 .../deploy-directus-to-digital-ocean.md       |  2 +-
 ...eploy-directus-to-google-cloud-platform.md |  6 ++--
 .../deploy-directus-to-railway.md             |  2 +-
 content/tutorials/6.self-hosting/index.md     |  4 +--
 ...roval-workflows-with-custom-permissions.md |  4 +--
 ...te-github-issues-with-directus-automate.md |  2 +-
 ...ata-with-clearbit-and-directus-automate.md |  2 +-
 ...pts-with-deepgram-and-directus-automate.md |  2 +-
 ...ent-workflows-with-inngest-and-directus.md |  2 +-
 ...e-future-content-with-directus-automate.md |  6 ++--
 ...lify-site-builds-with-directus-automate.md |  4 +--
 ...rcel-site-builds-with-directus-automate.md |  4 +--
 nuxt.config.ts                                |  2 +-
 package.json                                  |  3 +-
 pnpm-lock.yaml                                | 22 ++++--------
 shared/utils/docsSections.ts                  | 30 ++++++++--------
 208 files changed, 653 insertions(+), 664 deletions(-)

diff --git a/app/app.config.ts b/app/app.config.ts
index 7d8b27f3..cab43c92 100644
--- a/app/app.config.ts
+++ b/app/app.config.ts
@@ -134,7 +134,7 @@ export default defineAppConfig({
 					{
 						label: 'Security',
 						to: '/guides/security/best-practices',
-						icon: 'material-symbols:verified-user-outline',
+						icon: 'i-lucide-shield-check',
 					},
 					{
 						label: 'AI',
@@ -154,12 +154,12 @@ export default defineAppConfig({
 					{
 						label: 'Cloud',
 						to: '/cloud/getting-started/introduction',
-						icon: 'material-symbols:cloud-outline',
+						icon: 'i-lucide-cloud',
 					},
 					{
 						label: 'Self-Hosting',
 						to: '/self-hosting/overview',
-						icon: 'material-symbols:dns-outline',
+						icon: 'i-lucide-server',
 					},
 				],
 			},
@@ -173,22 +173,22 @@ export default defineAppConfig({
 					{
 						label: 'Frameworks',
 						to: '/frameworks',
-						icon: 'material-symbols:data-object',
+						icon: 'i-lucide-braces',
 					},
 					{
 						label: 'Tutorials',
 						to: '/tutorials',
-						icon: 'material-symbols:article-outline',
+						icon: 'i-lucide-file-text',
 					},
 					{
 						label: 'Community',
 						to: '/community/overview/welcome',
-						icon: 'material-symbols:volunteer-activism-outline',
+						icon: 'i-lucide-heart-handshake',
 					},
 					{
 						label: 'Releases',
 						to: '/releases',
-						icon: 'material-symbols:menu-book-outline',
+						icon: 'i-lucide-book-open',
 					},
 				],
 			},
@@ -223,7 +223,7 @@ export default defineAppConfig({
 		// Has "edit page" dynamically added in the first position in DocsTocAuthors.vue
 		links: [
 			{
-				icon: 'material-symbols:star-outline',
+				icon: 'i-lucide-star',
 				label: 'Star on GitHub',
 				to: 'https://github.com/directus/directus',
 			},
@@ -250,22 +250,22 @@ export default defineAppConfig({
 	preFooter: {
 		links: [
 			{
-				icon: 'ic:baseline-support',
+				icon: 'i-lucide-headset',
 				label: 'Need help? Contact Support.',
 				to: 'https://directus.com/support',
 			},
 			{
-				icon: 'ic:baseline-people-alt',
+				icon: 'i-lucide-users',
 				label: 'Join our Community Platform.',
 				to: 'https://community.directus.io',
 			},
 			{
-				icon: 'ic:baseline-rocket-launch',
+				icon: 'i-lucide-rocket',
 				label: 'Check out our product changelog.',
 				to: '/releases/changelog',
 			},
 			{
-				icon: 'ic:outline-help-outline',
+				icon: 'i-lucide-circle-question-mark',
 				label: 'Need a license? Contact Sales.',
 				to: 'https://directus.com/contact',
 			},
diff --git a/app/components/CopyDocButton.vue b/app/components/CopyDocButton.vue
index 0121f3b8..93c63166 100644
--- a/app/components/CopyDocButton.vue
+++ b/app/components/CopyDocButton.vue
@@ -70,12 +70,12 @@ const items = computed<CopyMenuItem[][]>(() => [
 	[
 		{
 			label: isMarkdownLinkCopied.value ? 'Copied Markdown link!' : 'Copy Markdown link',
-			icon: 'material-symbols:link',
+			icon: 'i-lucide-link',
 			onSelect: () => copyMarkdownLink(),
 		},
 		{
 			label: 'View as Markdown',
-			icon: 'material-symbols:markdown-outline',
+			icon: 'i-lucide-file-code',
 			external: true,
 			onSelect: () => openExternal(markdownUrl.value),
 		},
@@ -96,7 +96,7 @@ const items = computed<CopyMenuItem[][]>(() => [
 		{
 			label: isMcpUrlCopied.value ? 'Copied MCP URL!' : 'Copy MCP server URL',
 			description: 'Use with any MCP-compatible client',
-			icon: 'material-symbols:link',
+			icon: 'i-lucide-link',
 			onSelect: () => copyMcpUrl(),
 		},
 		...MCP_IDES.map(ide => ({
@@ -115,7 +115,7 @@ const items = computed<CopyMenuItem[][]>(() => [
 			color="neutral"
 			size="sm"
 			variant="soft"
-			leading-icon="material-symbols:content-copy-outline"
+			leading-icon="i-lucide-copy"
 			:label="isCopied ? 'Copied!' : 'Copy page'"
 			@click="copyPage"
 		/>
@@ -128,7 +128,7 @@ const items = computed<CopyMenuItem[][]>(() => [
 				size="sm"
 				variant="soft"
 				color="neutral"
-				icon="material-symbols:keyboard-arrow-down"
+				icon="i-lucide-chevron-down"
 			/>
 			<template #item="{ item }">
 				<div class="flex gap-2 text-left">
diff --git a/app/components/DocsBanner.vue b/app/components/DocsBanner.vue
index 85310377..59f3b438 100644
--- a/app/components/DocsBanner.vue
+++ b/app/components/DocsBanner.vue
@@ -42,7 +42,7 @@ useHead(computed(() => ({
 				/>
 				<Icon
 					class="hidden md:block transform duration-150 ease-out ml-1 group-hover:translate-x-1 size-5"
-					name="material-symbols:arrow-forward"
+					name="i-lucide-arrow-right"
 				/>
 			</NuxtLink>
 
@@ -51,7 +51,7 @@ useHead(computed(() => ({
 				@click="dismiss(banner.id)"
 			>
 				<Icon
-					name="material-symbols:close"
+					name="i-lucide-x"
 					class="size-5"
 				/>
 			</button>
diff --git a/app/components/DocsSearchPalette.vue b/app/components/DocsSearchPalette.vue
index daa3364a..8e8678d3 100644
--- a/app/components/DocsSearchPalette.vue
+++ b/app/components/DocsSearchPalette.vue
@@ -58,7 +58,7 @@ const paletteGroups = computed(() => {
 					id: 'header:recents',
 					slot: 'group-header',
 					disabled: true,
-					headerIcon: 'i-ph-clock-counter-clockwise',
+					headerIcon: 'i-lucide-history',
 					headerIconClass: 'size-3.5 opacity-60',
 					headerLabel: 'Recently viewed',
 					headerCount: visibleRecents.length,
@@ -72,7 +72,7 @@ const paletteGroups = computed(() => {
 						label: r.title,
 						path: r.path,
 						visitedAt: r.visitedAt,
-						icon: section?.icon ?? 'i-ph-file-text',
+						icon: section?.icon ?? 'i-lucide-file-text',
 						sectionLabel: section?.label ?? '',
 						onSelect: () => {
 							void navigateToResult(r.path);
@@ -93,7 +93,7 @@ const paletteGroups = computed(() => {
 					id: 'header:favorites',
 					slot: 'group-header',
 					disabled: true,
-					headerIcon: 'i-ph-star-fill',
+					headerIcon: 'i-lucide-star',
 					headerIconClass: 'size-3.5 text-warning',
 					headerLabel: 'Favorites',
 					headerCount: visibleFavorites.length,
@@ -106,7 +106,7 @@ const paletteGroups = computed(() => {
 						to: f.path,
 						label: f.title,
 						path: f.path,
-						icon: section?.icon ?? 'i-ph-file-text',
+						icon: section?.icon ?? 'i-lucide-file-text',
 						sectionLabel: section?.label ?? '',
 						onSelect: () => {
 							void navigateToResult(f.path);
@@ -126,7 +126,7 @@ const paletteGroups = computed(() => {
 				id: 'header:jump',
 				slot: 'group-header',
 				disabled: true,
-				headerIcon: 'i-ph-compass',
+				headerIcon: 'i-lucide-compass',
 				headerIconClass: 'size-3.5 opacity-60',
 				headerLabel: 'Jump to a section',
 				muted: true,
@@ -174,7 +174,7 @@ const visibleSections = computed(() => {
 });
 
 const sectionIcon = (id: DocsSectionId) =>
-	docsSections.find(s => s.id === id)?.icon ?? 'i-ph-file-text';
+	docsSections.find(s => s.id === id)?.icon ?? 'i-lucide-file-text';
 
 const clientOrigin = () => import.meta.client ? window.location.origin : 'http://localhost';
 const parseResultUrl = (url: string) => new URL(url, clientOrigin());
@@ -219,9 +219,9 @@ function handleClear() {
 }
 
 const suggestions = [
-	{ label: 'API Reference', to: '/api', icon: 'i-ph-code' },
-	{ label: 'Guides', to: '/guides/data-model/collections', icon: 'i-ph-book-open' },
-	{ label: 'Tutorials', to: '/tutorials', icon: 'i-ph-article' },
+	{ label: 'API Reference', to: '/api', icon: 'i-lucide-code' },
+	{ label: 'Guides', to: '/guides/data-model/collections', icon: 'i-lucide-book-open' },
+	{ label: 'Tutorials', to: '/tutorials', icon: 'i-lucide-file-text' },
 ];
 
 // Apply scroll shadow to the palette's scrollable viewport.
@@ -457,7 +457,7 @@ onUnmounted(() => {
 							/>
 							<UIcon
 								v-else
-								name="i-ph-arrow-right"
+								name="i-lucide-arrow-right"
 								class="size-3.5 text-primary shrink-0 self-center opacity-0 -translate-x-1 transition-all duration-150 group-data-[highlighted]:opacity-100 group-data-[highlighted]:translate-x-0"
 							/>
 						</div>
@@ -488,7 +488,7 @@ onUnmounted(() => {
 							{{ relativeTime(item.visitedAt) }}
 						</span>
 						<UIcon
-							name="i-ph-arrow-right"
+							name="i-lucide-arrow-right"
 							class="size-3.5 text-dimmed opacity-0 -translate-x-1 transition-all duration-150 group-data-[highlighted]:opacity-100 group-data-[highlighted]:translate-x-0 group-data-[highlighted]:text-primary"
 						/>
 					</template>
@@ -512,7 +512,7 @@ onUnmounted(() => {
 							class="font-mono uppercase tracking-wider"
 						/>
 						<UIcon
-							name="i-ph-arrow-right"
+							name="i-lucide-arrow-right"
 							class="size-3.5 text-dimmed opacity-0 -translate-x-1 transition-all duration-150 group-data-[highlighted]:opacity-100 group-data-[highlighted]:translate-x-0 group-data-[highlighted]:text-primary"
 						/>
 					</template>
@@ -528,7 +528,7 @@ onUnmounted(() => {
 					</template>
 					<template #section-trailing>
 						<UIcon
-							name="i-ph-arrow-right"
+							name="i-lucide-arrow-right"
 							class="size-3.5 text-dimmed opacity-0 -translate-x-1 transition-all duration-150 group-data-[highlighted]:opacity-100 group-data-[highlighted]:translate-x-0 group-data-[highlighted]:text-primary"
 						/>
 					</template>
@@ -582,7 +582,7 @@ onUnmounted(() => {
 							<div class="flex items-start gap-3">
 								<div class="size-7 rounded-lg flex items-center justify-center text-muted bg-elevated shrink-0">
 									<UIcon
-										name="i-ph-keyboard"
+										name="i-lucide-keyboard"
 										class="size-4"
 									/>
 								</div>
@@ -605,7 +605,7 @@ onUnmounted(() => {
 							<div class="flex items-start gap-3">
 								<div class="size-7 rounded-lg flex items-center justify-center text-muted bg-elevated shrink-0">
 									<UIcon
-										name="i-ph-magnifying-glass"
+										name="i-lucide-search"
 										class="size-4"
 									/>
 								</div>
diff --git a/app/components/DocsSearchPreview.vue b/app/components/DocsSearchPreview.vue
index 3b644647..c790bc76 100644
--- a/app/components/DocsSearchPreview.vue
+++ b/app/components/DocsSearchPreview.vue
@@ -21,7 +21,7 @@ const navigation = inject<Ref<ContentNavigationItem[]> | null>('navigation', nul
 const { app } = useRuntimeConfig();
 
 const sectionIcon = (id: DocsSearchItem['section']) =>
-	docsSections.find(section => section.id === id)?.icon ?? 'i-ph-file-text';
+	docsSections.find(section => section.id === id)?.icon ?? 'i-lucide-file-text';
 
 const previewDisplayPath = computed(() => {
 	const to = props.result?.to;
@@ -118,7 +118,7 @@ const previewBreadcrumb = computed(() => {
 		>
 			<div class="palette-empty-icon">
 				<UIcon
-					name="i-ph-magnifying-glass"
+					name="i-lucide-search"
 					class="size-4"
 				/>
 			</div>
diff --git a/app/components/DocsSearchTrigger.vue b/app/components/DocsSearchTrigger.vue
index 849cd0ee..7671b304 100644
--- a/app/components/DocsSearchTrigger.vue
+++ b/app/components/DocsSearchTrigger.vue
@@ -18,7 +18,7 @@ defineShortcuts({
 
 <template>
 	<UButton
-		icon="heroicons:magnifying-glass-20-solid"
+		icon="i-lucide-search"
 		variant="subtle"
 		color="neutral"
 		:aria-label="label"
diff --git a/app/components/DocsToc.vue b/app/components/DocsToc.vue
index 084e6f78..94be593d 100644
--- a/app/components/DocsToc.vue
+++ b/app/components/DocsToc.vue
@@ -22,7 +22,7 @@ const { style: scrollShadowStyle } = useScrollShadow(tocEl, { size: 48 });
 const communityLinks = computed(() => {
 	return [
 		{
-			icon: 'material-symbols:edit-document-outline',
+			icon: 'i-lucide-file-pen-line',
 			label: 'Edit this page',
 			to: `https://github.com/directus/docs/edit/main/${props.file}`,
 		},
diff --git a/app/components/DocsTocFeedback.vue b/app/components/DocsTocFeedback.vue
index 0b23ef13..79134442 100644
--- a/app/components/DocsTocFeedback.vue
+++ b/app/components/DocsTocFeedback.vue
@@ -5,8 +5,8 @@ const savedValue = ref<'good' | 'bad' | null>(null);
 const buttonLoading = ref(false);
 
 const options = [
-	{ value: 'good', icon: 'material-symbols:thumb-up-outline' },
-	{ value: 'bad', icon: 'material-symbols:thumb-down-outline' },
+	{ value: 'good', icon: 'i-lucide-thumbs-up' },
+	{ value: 'bad', icon: 'i-lucide-thumbs-down' },
 ] as const;
 
 const handleFeedback = (feedback: 'good' | 'bad') => {
@@ -31,7 +31,7 @@ const handleFeedback = (feedback: 'good' | 'bad') => {
 			<UButton
 				v-for="option in options"
 				:key="option.value"
-				:icon="savedValue === option.value ? 'material-symbols:check' : option.icon"
+				:icon="savedValue === option.value ? 'i-lucide-check' : option.icon"
 				square
 				size="xl"
 				variant="ghost"
diff --git a/app/components/FrameworkLinkList.vue b/app/components/FrameworkLinkList.vue
index 2189b23c..df28c277 100644
--- a/app/components/FrameworkLinkList.vue
+++ b/app/components/FrameworkLinkList.vue
@@ -27,7 +27,7 @@ defineProps<{
 					</span>
 				</span>
 				<Icon
-					name="material-symbols:arrow-forward"
+					name="i-lucide-arrow-right"
 					class="mt-1 size-4 shrink-0 text-muted transition group-hover:translate-x-0.5 group-hover:text-primary"
 				/>
 			</NuxtLink>
diff --git a/app/components/HomeHero.vue b/app/components/HomeHero.vue
index 025b5b19..dc7ea26b 100644
--- a/app/components/HomeHero.vue
+++ b/app/components/HomeHero.vue
@@ -37,7 +37,7 @@ function openSearch() {
 				@click="openSearch"
 			>
 				<UIcon
-					name="heroicons:magnifying-glass-20-solid"
+					name="i-lucide-search"
 					class="size-4 shrink-0 text-white/60"
 				/>
 				<span class="flex-1">Search the docs...</span>
@@ -46,14 +46,14 @@ function openSearch() {
 			<div class="mt-6 flex flex-wrap gap-2.5">
 				<UButton
 					label="Get Started"
-					trailing-icon="i-ph-arrow-right"
+					trailing-icon="i-lucide-arrow-right"
 					color="primary"
 					size="lg"
 					to="/getting-started/overview"
 				/>
 				<UButton
 					label="What is Directus?"
-					trailing-icon="i-ph-play"
+					trailing-icon="i-lucide-play"
 					color="neutral"
 					variant="subtle"
 					size="lg"
diff --git a/app/components/HomePersonalized.vue b/app/components/HomePersonalized.vue
index 93604da0..ca51e960 100644
--- a/app/components/HomePersonalized.vue
+++ b/app/components/HomePersonalized.vue
@@ -26,7 +26,7 @@ const chips = computed(() => {
 	if (role.value) out.push({ icon: role.value.icon, label: role.value.label });
 	if (primaryInstanceUrl.value) {
 		try {
-			out.push({ icon: 'material-symbols:link', label: new URL(primaryInstanceUrl.value).host });
+			out.push({ icon: 'i-lucide-link', label: new URL(primaryInstanceUrl.value).host });
 		}
 		catch { /* ignore */ }
 	}
@@ -93,8 +93,8 @@ function relativeTime(ts?: number): string {
 			<DocsEyebrow>Welcome Back</DocsEyebrow>
 			<UButton
 				label="Personalize"
-				icon="material-symbols:tune"
-				trailing-icon="material-symbols:arrow-forward"
+				icon="i-lucide-sliders-horizontal"
+				trailing-icon="i-lucide-arrow-right"
 				variant="ghost"
 				color="neutral"
 				size="xs"
@@ -106,7 +106,7 @@ function relativeTime(ts?: number): string {
 			<div class="p-6 pb-7">
 				<div v-if="resume">
 					<DocsEyebrow
-						icon="material-symbols:bookmark-outline"
+						icon="i-lucide-bookmark"
 						class="mb-2.5"
 					>
 						Continue reading
@@ -117,7 +117,7 @@ function relativeTime(ts?: number): string {
 					>
 						<span>{{ resume.title }}</span>
 						<UIcon
-							name="material-symbols:open-in-new"
+							name="i-lucide-arrow-up-right"
 							class="size-5 inline-block ml-1 -mt-1 text-muted group-hover:text-primary transition-colors"
 						/>
 					</NuxtLink>
@@ -133,7 +133,7 @@ function relativeTime(ts?: number): string {
 
 				<div v-else>
 					<DocsEyebrow
-						icon="material-symbols:explore-outline"
+						icon="i-lucide-compass"
 						class="mb-2.5"
 					>
 						Start here
@@ -144,7 +144,7 @@ function relativeTime(ts?: number): string {
 					>
 						<span>Pick a place to begin</span>
 						<UIcon
-							name="material-symbols:open-in-new"
+							name="i-lucide-arrow-up-right"
 							class="size-5 inline-block ml-1 -mt-1 text-muted group-hover:text-primary transition-colors"
 						/>
 					</NuxtLink>
@@ -155,7 +155,7 @@ function relativeTime(ts?: number): string {
 			</div>
 
 			<aside class="flex flex-col gap-3.5 p-6 pb-7">
-				<DocsEyebrow icon="material-symbols:person-search-outline">
+				<DocsEyebrow icon="i-lucide-user-search">
 					Your context
 				</DocsEyebrow>
 
@@ -177,7 +177,7 @@ function relativeTime(ts?: number): string {
 				<UButton
 					v-else
 					label="Tell us about your stack"
-					trailing-icon="material-symbols:arrow-forward"
+					trailing-icon="i-lucide-arrow-right"
 					variant="link"
 					color="neutral"
 					size="xs"
@@ -188,7 +188,7 @@ function relativeTime(ts?: number): string {
 				<UButton
 					v-if="chips.length"
 					label="Edit"
-					trailing-icon="material-symbols:arrow-forward"
+					trailing-icon="i-lucide-arrow-right"
 					variant="link"
 					color="neutral"
 					size="xs"
@@ -204,7 +204,7 @@ function relativeTime(ts?: number): string {
 		>
 			<div class="px-6 pt-5 pb-6">
 				<DocsEyebrow
-					icon="material-symbols:star-outline"
+					icon="i-lucide-star"
 					class="mb-2.5"
 				>
 					Favorites
@@ -226,7 +226,7 @@ function relativeTime(ts?: number): string {
 							<span class="truncate">{{ f.title }}</span>
 						</NuxtLink>
 						<UButton
-							icon="material-symbols:close"
+							icon="i-lucide-x"
 							variant="ghost"
 							color="neutral"
 							size="xs"
@@ -249,7 +249,7 @@ function relativeTime(ts?: number): string {
 				class="px-6 pt-5 pb-6"
 			>
 				<DocsEyebrow
-					icon="material-symbols:history"
+					icon="i-lucide-history"
 					class="mb-2.5"
 				>
 					Recently viewed
diff --git a/app/components/InlinePersonalize.vue b/app/components/InlinePersonalize.vue
index 59b3393e..d94f7de4 100644
--- a/app/components/InlinePersonalize.vue
+++ b/app/components/InlinePersonalize.vue
@@ -111,7 +111,7 @@ const optionBase = 'inline-flex min-w-0 cursor-pointer items-center gap-2 rounde
 						<template v-if="currentKey === 'framework'">
 							<UInput
 								v-model="frameworkQuery"
-								icon="material-symbols:search"
+								icon="i-lucide-search"
 								size="sm"
 								placeholder="Search frameworks..."
 								class="w-full mb-2"
@@ -185,7 +185,7 @@ const optionBase = 'inline-flex min-w-0 cursor-pointer items-center gap-2 rounde
 				class="flex items-center gap-2 py-1 text-sm text-highlighted"
 			>
 				<UIcon
-					name="material-symbols:check-circle-outline"
+					name="i-lucide-circle-check"
 					class="size-5 text-primary"
 				/>
 				<span>All set — your docs are personalized.</span>
diff --git a/app/components/MobileNavSectionSwitcher.vue b/app/components/MobileNavSectionSwitcher.vue
index c506c5e6..8baa87c9 100644
--- a/app/components/MobileNavSectionSwitcher.vue
+++ b/app/components/MobileNavSectionSwitcher.vue
@@ -36,7 +36,7 @@ const dropdownItems = computed(() =>
 				variant="outline"
 				class="w-full rounded-md"
 				:ui="{ trailingIcon: 'ms-auto' }"
-				trailing-icon="material-symbols:unfold-more"
+				trailing-icon="i-lucide-chevrons-up-down"
 			/>
 		</UDropdownMenu>
 		<USeparator type="dashed" class="mt-4" />
diff --git a/app/components/PersonalizeIdleCta.vue b/app/components/PersonalizeIdleCta.vue
index e3b5a8f0..54d7be01 100644
--- a/app/components/PersonalizeIdleCta.vue
+++ b/app/components/PersonalizeIdleCta.vue
@@ -6,7 +6,7 @@ defineEmits<{ start: []; dismiss: [] }>();
 	<div class="flex items-center gap-3.5 rounded-xl border border-default bg-default px-4 py-3.5 @max-[40rem]/docs-pane:flex-wrap">
 		<div class="inline-flex size-7 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
 			<UIcon
-				name="material-symbols:auto-awesome-outline"
+				name="i-lucide-sparkles"
 				class="size-4"
 			/>
 		</div>
@@ -21,14 +21,14 @@ defineEmits<{ start: []; dismiss: [] }>();
 		<div class="flex shrink-0 items-center gap-1 @max-[40rem]/docs-pane:w-full @max-[40rem]/docs-pane:justify-end">
 			<UButton
 				label="Start"
-				trailing-icon="material-symbols:arrow-forward"
+				trailing-icon="i-lucide-arrow-right"
 				color="primary"
 				variant="soft"
 				size="sm"
 				@click="$emit('start')"
 			/>
 			<UButton
-				icon="material-symbols:close"
+				icon="i-lucide-x"
 				color="neutral"
 				variant="ghost"
 				size="sm"
diff --git a/app/components/SettingsDrawer.vue b/app/components/SettingsDrawer.vue
index f31b585d..650c02f3 100644
--- a/app/components/SettingsDrawer.vue
+++ b/app/components/SettingsDrawer.vue
@@ -73,7 +73,7 @@ const selectedUseCase = computed({
 					</p>
 				</div>
 				<UButton
-					icon="material-symbols:close"
+					icon="i-lucide-x"
 					variant="ghost"
 					color="neutral"
 					size="sm"
@@ -112,7 +112,7 @@ const selectedUseCase = computed({
 							/>
 							<UIcon
 								v-else
-								name="material-symbols:code"
+								name="i-lucide-code"
 								class="size-4 text-dimmed"
 							/>
 						</template>
@@ -151,7 +151,7 @@ const selectedUseCase = computed({
 							/>
 							<UIcon
 								v-else
-								name="material-symbols:ads-click"
+								name="i-lucide-mouse-pointer-click"
 								class="size-4 text-dimmed"
 							/>
 						</template>
@@ -322,7 +322,7 @@ const selectedUseCase = computed({
 							v-model="instanceUrlInput"
 							type="url"
 							placeholder="https://your-instance.directus.app"
-							icon="material-symbols:link"
+							icon="i-lucide-link"
 							class="flex-1"
 						/>
 						<UButton
@@ -348,7 +348,7 @@ const selectedUseCase = computed({
 					variant="ghost"
 					color="neutral"
 					size="sm"
-					icon="material-symbols:undo"
+					icon="i-lucide-undo-2"
 					@click="resetAll()"
 				/>
 				<span class="text-xs text-muted">Saved automatically</span>
diff --git a/app/components/SettingsDrawerTrigger.vue b/app/components/SettingsDrawerTrigger.vue
index 531f47a6..a6ba36e4 100644
--- a/app/components/SettingsDrawerTrigger.vue
+++ b/app/components/SettingsDrawerTrigger.vue
@@ -6,7 +6,7 @@ const settings = useSettingsOverlay();
 
 <template>
 	<UButton
-		icon="material-symbols:tune"
+		icon="i-lucide-sliders-horizontal"
 		variant="ghost"
 		color="neutral"
 		size="sm"
diff --git a/app/components/TutorialsCategory.vue b/app/components/TutorialsCategory.vue
index 4d199048..77ce65ca 100644
--- a/app/components/TutorialsCategory.vue
+++ b/app/components/TutorialsCategory.vue
@@ -26,7 +26,7 @@ defineProps<{
 		<ProseCallout
 			class=" my-10 font-bold"
 			:to="path"
-			icon="material-symbols:arrow-outward"
+			icon="i-lucide-arrow-up-right"
 		>
 			See all {{ title }} tutorials
 		</ProseCallout>
diff --git a/app/components/content/AgentPrompt.vue b/app/components/content/AgentPrompt.vue
index 7aa930e8..96cd4794 100644
--- a/app/components/content/AgentPrompt.vue
+++ b/app/components/content/AgentPrompt.vue
@@ -9,7 +9,7 @@ const props = withDefaults(defineProps<{
 	prompt?: string;
 	icon?: string;
 }>(), {
-	icon: 'material-symbols:auto-awesome-outline',
+	icon: 'i-lucide-sparkles',
 });
 
 const slots = useSlots();
@@ -78,13 +78,13 @@ function toggleOpen() {
 				class="ms-auto"
 			>
 				<UButton
-					:icon="copied ? 'material-symbols:check' : 'material-symbols:content-copy-outline'"
+					:icon="copied ? 'i-lucide-check' : 'i-lucide-copy'"
 					:label="copied ? 'Copied' : 'Copy prompt'"
 					color="primary"
 					@click="copyPrompt"
 				/>
 				<UButton
-					:icon="open ? 'material-symbols:visibility-off-outline' : 'material-symbols:visibility-outline'"
+					:icon="open ? 'i-lucide-eye-off' : 'i-lucide-eye'"
 					color="primary"
 					square
 					@click="toggleOpen"
diff --git a/app/components/content/Chat.vue b/app/components/content/Chat.vue
index e00df94c..4543475d 100644
--- a/app/components/content/Chat.vue
+++ b/app/components/content/Chat.vue
@@ -41,13 +41,13 @@ const messages = computed(() => {
 				side: 'right',
 				variant: 'subtle',
 				avatar: {
-					icon: 'material-symbols:person-outline',
+					icon: 'i-lucide-user',
 				},
 			}"
 			:assistant="{
 				side: 'left',
 				avatar: {
-					icon: 'material-symbols:smart-toy-outline',
+					icon: 'i-lucide-bot',
 				},
 
 			}"
@@ -70,7 +70,7 @@ const messages = computed(() => {
 						class="flex items-center gap-2 text-sm px-3 py-2 rounded-md bg-muted border border-muted"
 					>
 						<UIcon
-							name="material-symbols:check-circle-outline"
+							name="i-lucide-circle-check"
 							class="w-4 h-4 flex-shrink-0 text-muted"
 						/>
 						<span
diff --git a/app/components/content/DocCliSnippet.vue b/app/components/content/DocCliSnippet.vue
index a51afcd9..ffc5cc25 100644
--- a/app/components/content/DocCliSnippet.vue
+++ b/app/components/content/DocCliSnippet.vue
@@ -50,7 +50,7 @@ const copyToClipboard = async () => {
 			</template>
 			<UIcon
 				class="w-5 h-5"
-				name="material-symbols:content-copy-outline"
+				name="i-lucide-copy"
 			/>
 		</div>
 	</div>
diff --git a/app/components/content/Example.vue b/app/components/content/Example.vue
index 8d17c7e3..b2cef19c 100644
--- a/app/components/content/Example.vue
+++ b/app/components/content/Example.vue
@@ -4,7 +4,7 @@ withDefaults(defineProps<{
 	icon?: string;
 }>(), {
 	title: 'Example',
-	icon: 'material-symbols:info-outline',
+	icon: 'i-lucide-info',
 });
 </script>
 
diff --git a/app/components/content/HomeFeatures.vue b/app/components/content/HomeFeatures.vue
index c5d21307..0d9851e4 100644
--- a/app/components/content/HomeFeatures.vue
+++ b/app/components/content/HomeFeatures.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 const features = [
-	{ title: 'Instant APIs', description: 'REST, GraphQL, and SDKs out of the box.', icon: 'material-symbols:code' },
-	{ title: 'Flexible data modeling', description: 'Design your data exactly how you need it.', icon: 'material-symbols:deployed-code-outline' },
-	{ title: 'Permissions baked in', description: 'Granular access control at every level.', icon: 'material-symbols:verified-user-outline' },
-	{ title: 'Extensions', description: 'Extend and customize anything.', icon: 'material-symbols:extension-outline' },
-	{ title: 'Automations', description: 'Automate tasks and business logic with Flows.', icon: 'material-symbols:bolt-outline' },
-	{ title: 'Dashboards', description: 'Visualize data with Insights panels.', icon: 'material-symbols:bar-chart' },
+	{ title: 'Instant APIs', description: 'REST, GraphQL, and SDKs out of the box.', icon: 'i-lucide-code' },
+	{ title: 'Flexible data modeling', description: 'Design your data exactly how you need it.', icon: 'i-lucide-boxes' },
+	{ title: 'Permissions baked in', description: 'Granular access control at every level.', icon: 'i-lucide-shield-check' },
+	{ title: 'Extensions', description: 'Extend and customize anything.', icon: 'i-lucide-puzzle' },
+	{ title: 'Automations', description: 'Automate tasks and business logic with Flows.', icon: 'i-lucide-zap' },
+	{ title: 'Dashboards', description: 'Visualize data with Insights panels.', icon: 'i-lucide-chart-column' },
 ];
 </script>
 
diff --git a/app/components/content/VideoEmbed.vue b/app/components/content/VideoEmbed.vue
index 9423c230..d7455b5f 100644
--- a/app/components/content/VideoEmbed.vue
+++ b/app/components/content/VideoEmbed.vue
@@ -48,7 +48,7 @@ const show = props.videoId
 				<template #awaitingLoad>
 					<div class="absolute inset-0 flex items-center justify-center">
 						<UButton
-							icon="material-symbols:play-circle-outline"
+							icon="i-lucide-circle-play"
 							size="xl"
 						/>
 					</div>
diff --git a/app/composables/useSectionLinks.ts b/app/composables/useSectionLinks.ts
index 9b7b1360..ea79aeea 100644
--- a/app/composables/useSectionLinks.ts
+++ b/app/composables/useSectionLinks.ts
@@ -6,31 +6,31 @@ export default function useSectionLinks() {
 			{
 				label: 'Get Started',
 				href: '/getting-started/overview',
-				icon: 'material-symbols:rocket-outline',
+				icon: 'i-lucide-rocket',
 				active: route.path.startsWith('/getting-started'),
 			},
 			{
 				label: 'Guides',
 				href: '/guides/data-model/collections',
-				icon: 'material-symbols:book-outline',
+				icon: 'i-lucide-book-open',
 				active: route.path.startsWith('/guides'),
 			},
 			{
 				label: 'Tutorials',
 				href: '/tutorials',
-				icon: 'material-symbols:school-outline',
+				icon: 'i-lucide-graduation-cap',
 				active: route.path.startsWith('/tutorials'),
 			},
 			{
 				label: 'API Reference',
 				href: '/api',
-				icon: 'material-symbols:code',
+				icon: 'i-lucide-code',
 				active: route.path.startsWith('/api'),
 			},
 			{
 				label: 'Licensing',
 				href: '/licensing/overview',
-				icon: 'material-symbols:key-outline',
+				icon: 'i-lucide-key-round',
 				active: route.path.startsWith('/licensing'),
 			},
 		];
diff --git a/app/layouts/docs.vue b/app/layouts/docs.vue
index 864303fb..6972df46 100644
--- a/app/layouts/docs.vue
+++ b/app/layouts/docs.vue
@@ -113,7 +113,7 @@ const frameworkNavigation = computed(() => {
 							class="mt-4 flex items-center gap-2 border-t border-dashed border-default pt-4 text-sm font-medium text-muted transition hover:text-primary"
 						>
 							<Icon
-								name="material-symbols:arrow-back"
+								name="i-lucide-arrow-left"
 								class="size-4"
 							/>
 							All Frameworks
diff --git a/app/pages/[...slug].vue b/app/pages/[...slug].vue
index 455315c1..8e33ce99 100644
--- a/app/pages/[...slug].vue
+++ b/app/pages/[...slug].vue
@@ -115,7 +115,7 @@ const breadcrumb = computed(() => {
 	}
 
 	return [
-		{ 'icon': 'material-symbols:home-outline', 'to': '/', 'aria-label': 'Home' },
+		{ 'icon': 'i-lucide-house', 'to': '/', 'aria-label': 'Home' },
 		...trail,
 	];
 });
@@ -136,7 +136,7 @@ const breadcrumb = computed(() => {
 			>
 				<UButton
 					label="Menu"
-					icon="material-symbols:menu"
+					icon="i-lucide-menu"
 					color="neutral"
 					variant="link"
 					size="xs"
@@ -167,7 +167,7 @@ const breadcrumb = computed(() => {
 			>
 				<UButton
 					label="On this page"
-					trailing-icon="material-symbols:chevron-right"
+					trailing-icon="i-lucide-chevron-right"
 					color="neutral"
 					variant="link"
 					size="xs"
@@ -221,7 +221,7 @@ const breadcrumb = computed(() => {
 				#links
 			>
 				<UButton
-					:icon="favorited ? 'material-symbols:star' : 'material-symbols:star-outline'"
+					:icon="favorited ? 'i-lucide-star' : 'i-lucide-star'"
 					:label="favorited ? 'Favorited' : 'Favorite'"
 					color="neutral"
 					variant="ghost"
diff --git a/app/pages/frameworks/index.vue b/app/pages/frameworks/index.vue
index 457734ce..1b04fef4 100644
--- a/app/pages/frameworks/index.vue
+++ b/app/pages/frameworks/index.vue
@@ -36,7 +36,7 @@ const frameworkCards = computed<FrameworkCard[]>(() => {
 			return {
 				slug,
 				label: item.title ?? slug,
-				icon: item.icon ?? 'material-symbols:data-object',
+				icon: item.icon ?? 'i-lucide-braces',
 				count,
 			};
 		});
@@ -58,7 +58,7 @@ await useDocsOgImage({
 			<template #headline>
 				<UBreadcrumb
 					:items="[
-						{ 'icon': 'material-symbols:home-outline', 'to': '/', 'aria-label': 'Home' },
+						{ 'icon': 'i-lucide-house', 'to': '/', 'aria-label': 'Home' },
 						{ label: 'Frameworks' },
 					]"
 				>
diff --git a/app/pages/tutorials/[category]/[...slug].vue b/app/pages/tutorials/[category]/[...slug].vue
index dbfb1ce5..adc15417 100644
--- a/app/pages/tutorials/[category]/[...slug].vue
+++ b/app/pages/tutorials/[category]/[...slug].vue
@@ -51,7 +51,7 @@ const breadcrumb = computed(() => {
 		}));
 
 	return [
-		{ 'icon': 'material-symbols:home-outline', 'to': '/', 'aria-label': 'Home' },
+		{ 'icon': 'i-lucide-house', 'to': '/', 'aria-label': 'Home' },
 		...trail,
 	];
 });
@@ -92,7 +92,7 @@ await useDocsOgImage({
 				:handle="false"
 				:ui="{ content: 'w-full max-w-2/3' }"
 			>
-				<UButton label="Menu" icon="material-symbols:menu" color="neutral" variant="link" size="xs" aria-label="Open navigation" />
+				<UButton label="Menu" icon="i-lucide-menu" color="neutral" variant="link" size="xs" aria-label="Open navigation" />
 				<template #body>
 					<MobileNavSectionSwitcher :items="allSectionItems" :current-section="currentSection" />
 					<p class="text-xs font-medium text-dimmed uppercase font-mono tracking-widest mb-2 flex items-center gap-1">
@@ -111,7 +111,7 @@ await useDocsOgImage({
 				:handle="false"
 				:ui="{ content: 'w-full max-w-2/3' }"
 			>
-				<UButton label="On this page" trailing-icon="material-symbols:chevron-right" color="neutral" variant="link" size="xs" aria-label="Open on this page" />
+				<UButton label="On this page" trailing-icon="i-lucide-chevron-right" color="neutral" variant="link" size="xs" aria-label="Open on this page" />
 				<template #body>
 					<DocsToc :links="page!.body?.toc?.links" :authors="page!.authors" :file="page!.id!" mobile />
 				</template>
@@ -165,7 +165,7 @@ await useDocsOgImage({
 				#links
 			>
 				<UButton
-					:icon="favorited ? 'material-symbols:star' : 'material-symbols:star-outline'"
+					:icon="favorited ? 'i-lucide-star' : 'i-lucide-star'"
 					:label="favorited ? 'Favorited' : 'Favorite'"
 					color="neutral"
 					variant="ghost"
diff --git a/app/pages/tutorials/[category]/index.vue b/app/pages/tutorials/[category]/index.vue
index 6115b58d..6ca70a3a 100644
--- a/app/pages/tutorials/[category]/index.vue
+++ b/app/pages/tutorials/[category]/index.vue
@@ -20,7 +20,7 @@ if (!page.value) {
 	<DocsPage>
 		<div class="flex @min-[40rem]/docs-pane:hidden sticky top-(--ui-header-height) z-10 -mx-4 mb-4 items-center border-b border-dashed border-default bg-default/75 px-4 py-3 backdrop-blur">
 			<UDrawer v-model:open="menuDrawerOpen" direction="left" side="left" inset :handle="false" :ui="{ content: 'w-full max-w-2/3' }">
-				<UButton label="Menu" icon="material-symbols:menu" color="neutral" variant="link" size="xs" aria-label="Open navigation" />
+				<UButton label="Menu" icon="i-lucide-menu" color="neutral" variant="link" size="xs" aria-label="Open navigation" />
 				<template #body>
 					<MobileNavSectionSwitcher :items="allSectionItems" :current-section="currentSection" />
 					<p class="text-xs font-medium text-dimmed uppercase font-mono tracking-widest mb-2 flex items-center gap-1">
@@ -40,7 +40,7 @@ if (!page.value) {
 			<template #headline>
 				<UBreadcrumb
 					:items="[
-						{ 'icon': 'material-symbols:home-outline', 'to': '/', 'aria-label': 'Home' },
+						{ 'icon': 'i-lucide-house', 'to': '/', 'aria-label': 'Home' },
 						{ label: 'Tutorials', to: '/tutorials' },
 						{ label: page!.title },
 					]"
diff --git a/app/pages/tutorials/index.vue b/app/pages/tutorials/index.vue
index 35e1fa38..6f683bb6 100644
--- a/app/pages/tutorials/index.vue
+++ b/app/pages/tutorials/index.vue
@@ -23,7 +23,7 @@ if (!page.value) {
 	<DocsPage>
 		<div class="flex @min-[40rem]/docs-pane:hidden sticky top-(--ui-header-height) z-10 -mx-4 mb-4 items-center border-b border-dashed border-default bg-default/75 px-4 py-3 backdrop-blur">
 			<UDrawer v-model:open="menuDrawerOpen" direction="left" side="left" inset :handle="false" :ui="{ content: 'w-full max-w-2/3' }">
-				<UButton label="Menu" icon="material-symbols:menu" color="neutral" variant="link" size="xs" aria-label="Open navigation" />
+				<UButton label="Menu" icon="i-lucide-menu" color="neutral" variant="link" size="xs" aria-label="Open navigation" />
 				<template #body>
 					<MobileNavSectionSwitcher :items="allSectionItems" :current-section="currentSection" />
 					<p class="text-xs font-medium text-dimmed uppercase font-mono tracking-widest mb-2 flex items-center gap-1">
@@ -42,7 +42,7 @@ if (!page.value) {
 			<template #headline>
 				<UBreadcrumb
 					:items="[
-						{ 'icon': 'material-symbols:home-outline', 'to': '/', 'aria-label': 'Home' },
+						{ 'icon': 'i-lucide-house', 'to': '/', 'aria-label': 'Home' },
 						{ label: 'Tutorials' },
 					]"
 				>
diff --git a/app/utils/deployments.ts b/app/utils/deployments.ts
index 1c9caa91..5e5b5df4 100644
--- a/app/utils/deployments.ts
+++ b/app/utils/deployments.ts
@@ -8,8 +8,8 @@ export interface DeploymentOption {
 }
 
 export const deployments: DeploymentOption[] = [
-	{ slug: 'cloud', label: 'Directus Cloud', icon: 'material-symbols:cloud-outline', description: 'Managed hosting by Directus.' },
-	{ slug: 'self-hosted', label: 'Self-Hosted', icon: 'material-symbols:dns-outline', description: 'Run Directus on your own infrastructure.' },
+	{ slug: 'cloud', label: 'Directus Cloud', icon: 'i-lucide-cloud', description: 'Managed hosting by Directus.' },
+	{ slug: 'self-hosted', label: 'Self-Hosted', icon: 'i-lucide-server', description: 'Run Directus on your own infrastructure.' },
 ];
 
 export const getDeployment = (slug: string): DeploymentOption | undefined =>
diff --git a/app/utils/experience.ts b/app/utils/experience.ts
index 16931f82..b65ee86d 100644
--- a/app/utils/experience.ts
+++ b/app/utils/experience.ts
@@ -8,9 +8,9 @@ export interface ExperienceOption {
 }
 
 export const experiences: ExperienceOption[] = [
-	{ slug: 'new', label: 'New to Directus', icon: 'material-symbols:auto-awesome-outline', description: 'First time or just evaluating.' },
-	{ slug: 'familiar', label: 'Some Experience', icon: 'material-symbols:potted-plant-outline', description: 'Built something, still learning.' },
-	{ slug: 'experienced', label: 'Power User', icon: 'material-symbols:forest-outline', description: 'Daily / production use.' },
+	{ slug: 'new', label: 'New to Directus', icon: 'i-lucide-sparkles', description: 'First time or just evaluating.' },
+	{ slug: 'familiar', label: 'Some Experience', icon: 'i-lucide-sprout', description: 'Built something, still learning.' },
+	{ slug: 'experienced', label: 'Power User', icon: 'i-lucide-trees', description: 'Daily / production use.' },
 ];
 
 export const getExperience = (slug: string): ExperienceOption | undefined =>
diff --git a/app/utils/libraries.ts b/app/utils/libraries.ts
index d5a9f14c..4e49e5e5 100644
--- a/app/utils/libraries.ts
+++ b/app/utils/libraries.ts
@@ -7,7 +7,7 @@ export interface LibraryOption {
 
 export const libraries: LibraryOption[] = [
 	{ value: '0', label: 'SDK', icon: 'simple-icons:directus', matchLabels: ['Directus SDK', 'SDK'] },
-	{ value: '1', label: 'REST', icon: 'material-symbols:language', matchLabels: ['REST'] },
+	{ value: '1', label: 'REST', icon: 'i-lucide-globe', matchLabels: ['REST'] },
 	{ value: '2', label: 'GraphQL', icon: 'simple-icons:graphql', matchLabels: ['GraphQL'] },
 ];
 
diff --git a/app/utils/roles.ts b/app/utils/roles.ts
index 05d09461..69b86d5d 100644
--- a/app/utils/roles.ts
+++ b/app/utils/roles.ts
@@ -8,8 +8,8 @@ export interface RoleOption {
 }
 
 export const roles: RoleOption[] = [
-	{ slug: 'developer', label: 'Developer', icon: 'material-symbols:code', description: 'Show code-first content and technical detail.' },
-	{ slug: 'non-developer', label: 'Non-Developer', icon: 'material-symbols:person-outline', description: 'Focus on UI workflows and concepts.' },
+	{ slug: 'developer', label: 'Developer', icon: 'i-lucide-code', description: 'Show code-first content and technical detail.' },
+	{ slug: 'non-developer', label: 'Non-Developer', icon: 'i-lucide-user', description: 'Focus on UI workflows and concepts.' },
 ];
 
 export const getRole = (slug: string): RoleOption | undefined =>
diff --git a/app/utils/useCases.ts b/app/utils/useCases.ts
index 1387e285..b1ffa156 100644
--- a/app/utils/useCases.ts
+++ b/app/utils/useCases.ts
@@ -6,13 +6,13 @@ export interface UseCase {
 }
 
 export const useCases: UseCase[] = [
-	{ slug: 'headless-cms', label: 'Headless CMS', icon: 'material-symbols:article-outline', description: 'Power websites and apps with structured content.' },
-	{ slug: 'client-website', label: 'Client Website', icon: 'material-symbols:language', description: 'Marketing sites and client projects.' },
-	{ slug: 'internal-tool', label: 'Internal App', icon: 'material-symbols:corporate-fare', description: 'Admin panels and internal tooling.' },
-	{ slug: 'api-backend', label: 'API Backend', icon: 'material-symbols:api', description: 'Data platform and backend-as-a-service.' },
-	{ slug: 'multi-tenant-app', label: 'Multi-Tenant App', icon: 'material-symbols:groups-outline', description: 'SaaS apps serving multiple customers.' },
-	{ slug: 'ecommerce', label: 'Ecommerce', icon: 'material-symbols:shopping-cart-outline', description: 'Storefronts and product catalogs.' },
-	{ slug: 'other', label: 'Other', icon: 'material-symbols:more-horiz', description: 'Something else.' },
+	{ slug: 'headless-cms', label: 'Headless CMS', icon: 'i-lucide-file-text', description: 'Power websites and apps with structured content.' },
+	{ slug: 'client-website', label: 'Client Website', icon: 'i-lucide-globe', description: 'Marketing sites and client projects.' },
+	{ slug: 'internal-tool', label: 'Internal App', icon: 'i-lucide-building-2', description: 'Admin panels and internal tooling.' },
+	{ slug: 'api-backend', label: 'API Backend', icon: 'i-lucide-braces', description: 'Data platform and backend-as-a-service.' },
+	{ slug: 'multi-tenant-app', label: 'Multi-Tenant App', icon: 'i-lucide-users', description: 'SaaS apps serving multiple customers.' },
+	{ slug: 'ecommerce', label: 'Ecommerce', icon: 'i-lucide-shopping-cart', description: 'Storefronts and product catalogs.' },
+	{ slug: 'other', label: 'Other', icon: 'i-lucide-ellipsis', description: 'Something else.' },
 ];
 
 export const getUseCase = (slug: string): UseCase | undefined =>
diff --git a/content/_partials/authentication.md b/content/_partials/authentication.md
index 3377cf9a..77c76b48 100644
--- a/content/_partials/authentication.md
+++ b/content/_partials/authentication.md
@@ -25,7 +25,7 @@ Requests can be authenticated in the following ways:
   ---
   Append the following query parameter: `?access_token=<token>`.
 
-    ::callout{icon="material-symbols:info-outline"}
+    ::callout{icon="i-lucide-info"}
       **Exercise caution when using query parameters for authentication**  
       Using a query parameter for authentication can lead to it being revealed or logged. If possible, use another method.
     ::
diff --git a/content/_partials/config-env-vars.md b/content/_partials/config-env-vars.md
index 0192e129..a311472e 100644
--- a/content/_partials/config-env-vars.md
+++ b/content/_partials/config-env-vars.md
@@ -1,4 +1,4 @@
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Environment Variables**  
 Environment variables are configurable for Directus Enterprise Cloud projects via our Customer Success team. You can also set environment variables in self-hosted projects.
 ::
diff --git a/content/_partials/deployment-public-instance.md b/content/_partials/deployment-public-instance.md
index 52761a28..894e15b3 100644
--- a/content/_partials/deployment-public-instance.md
+++ b/content/_partials/deployment-public-instance.md
@@ -1,4 +1,4 @@
-::callout{icon="material-symbols:warning-outline" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 **Public instance required**
 Real-time deployment status updates rely on webhooks sent from your provider to your Directus instance. Your instance must be publicly accessible for these webhooks to reach it. If you're developing locally, use a tunneling tool like [ngrok](https://ngrok.com/) or [untun](https://github.com/unjs/untun) to expose your local API.
 ::
diff --git a/content/_partials/extension-hook-system-collections.md b/content/_partials/extension-hook-system-collections.md
index 0dac6ca6..6969e90a 100644
--- a/content/_partials/extension-hook-system-collections.md
+++ b/content/_partials/extension-hook-system-collections.md
@@ -1,4 +1,4 @@
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **System Collections**
 
 - `<system-collection>` should be replaced with the system collection name without the `directus_` prefix. For example, listening for new records in the `directus_users` collection becomes `users.create`.
diff --git a/content/_partials/extensions-api-internals.md b/content/_partials/extensions-api-internals.md
index b9204a60..c283f56a 100644
--- a/content/_partials/extensions-api-internals.md
+++ b/content/_partials/extensions-api-internals.md
@@ -2,7 +2,7 @@
 
 To access systems like permission checks and your collections, you can use internal Directus services, available through an API extension's `context` parameter.
 
-::callout{icon="material-symbols:menu-book-outline" color="primary" to="/guides/extensions/api-extensions/services"}
+::callout{icon="i-lucide-book-open" color="primary" to="/guides/extensions/api-extensions/services"}
 Learn more about using internal Directus services.
 ::
 
diff --git a/content/_partials/extensions-app-internals.md b/content/_partials/extensions-app-internals.md
index 29dd7ab1..92105d64 100644
--- a/content/_partials/extensions-app-internals.md
+++ b/content/_partials/extensions-app-internals.md
@@ -2,13 +2,13 @@
 
 To access internal systems like the API or the stores in app extensions, you can use the `useApi()` and `useStores()` composables exported by the `@directus/extensions-sdk` package.
 
-::callout{icon="material-symbols:menu-book-outline" color="primary" to="/guides/extensions/app-extensions/composables"}
+::callout{icon="i-lucide-book-open" color="primary" to="/guides/extensions/app-extensions/composables"}
 Learn more about using Directus composables.
 ::
 
 Directus UI components are globally registered, making them accessible throughout your extension without the need to import them.
 
-::callout{icon="material-symbols:menu-book-outline" color="primary" to="/guides/extensions/app-extensions/ui-library"}
+::callout{icon="i-lucide-book-open" color="primary" to="/guides/extensions/app-extensions/ui-library"}
 Learn more about using the Directus UI library.
 ::
 
@@ -16,6 +16,6 @@ Learn more about using the Directus UI library.
 
 To avoid Cross Site Request Forgery (CSRF), app extensions cannot make requests to external servers by default. A common approach to achieve this is to create a bundle containing an endpoint that makes the external request, and an app extension that uses the now-internal endpoint to retrieve data.
 
-::callout{icon="material-symbols:school-outline" color="secondary" to="/tutorials/extensions"}
+::callout{icon="i-lucide-graduation-cap" color="secondary" to="/tutorials/extensions"}
 Learn more about building extensions through our tutorials.
 ::
diff --git a/content/_partials/extensions-theme.md b/content/_partials/extensions-theme.md
index fa653878..45cd512f 100644
--- a/content/_partials/extensions-theme.md
+++ b/content/_partials/extensions-theme.md
@@ -1,4 +1,4 @@
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Theme-Aware Previews**  
 In your SVG, use available theme CSS variables such as `--theme--primary` and `--theme--primary-subdued` to match your panel preview with the project theme.
 ::
diff --git a/content/_partials/extensions-uid.md b/content/_partials/extensions-uid.md
index 5a3d3395..48e43e95 100644
--- a/content/_partials/extensions-uid.md
+++ b/content/_partials/extensions-uid.md
@@ -1,4 +1,4 @@
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Unique Identifiers**  
 The extension id must not conflict with other extensions, so consider prefixing with author name.
 ::
diff --git a/content/_partials/license.md b/content/_partials/license.md
index a7bfe40b..9cc85c69 100644
--- a/content/_partials/license.md
+++ b/content/_partials/license.md
@@ -1,4 +1,4 @@
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
   **Licensing**
   Directus is licensed under the [Monospace Sustainable Core License (MSCL)](https://directus.com/license). The free **core tier** does not require a license. Higher limits and additional features require a paid license, or qualifying entities can apply for the [Open Innovation Grant](https://directus.com/oig) for free commercial use. [Learn more about licensing](/licensing/overview).
 ::
diff --git a/content/cloud/1.getting-started/1.introduction.md b/content/cloud/1.getting-started/1.introduction.md
index 20c6540d..c9ec5e2b 100644
--- a/content/cloud/1.getting-started/1.introduction.md
+++ b/content/cloud/1.getting-started/1.introduction.md
@@ -27,7 +27,7 @@ Accounts can be members on multiple teams. All team members have permissions to
 | Database Entries        | 75,000       | * |
 | Maximum Studio Users    | 15           | * |
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Support**  
 Enterprise projects include support from the Directus team.
 ::
@@ -46,6 +46,6 @@ Projects also have the ability to scale beyond this minimum allocation based on
 
 Databases on enterprise projects are single-tenant, 100% dedicated to your project - no neighbors! Ready to upgrade to enterprise? [Contact us](https://directus.com/contact).
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 This section refers to how your cloud project is stored alongside other cloud projects and has nothing to do with how you design your project's data model. You can implement single or multi-tenant architecture within any Directus Cloud project.
 ::
diff --git a/content/cloud/1.getting-started/2.teams.md b/content/cloud/1.getting-started/2.teams.md
index d581f0af..7f1cd529 100644
--- a/content/cloud/1.getting-started/2.teams.md
+++ b/content/cloud/1.getting-started/2.teams.md
@@ -16,7 +16,7 @@ To create a team, open the team menu in the dashboard header and click "Create a
 
 Enter a team name and team slug, then click "Save".
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Team Name and Team Slug**
 The team name is a text name assigned to a team, used in the cloud dashboard. The team slug lies within the full URL `https://directus.cloud/TEAM-SLUG/projects`. These are purely organizational, allowing you to easily remember the team and link to specific cloud dashboards. They do not impact cloud projects or billing and can be updated at any time.
 ::
@@ -43,7 +43,7 @@ All team members can invite new members via email. Each invitee will be emailed
 
 To invite team members, open the team menu in the dashboard header and select the desired team. Click "Members" to enter the members page. Scroll down to the invite new members section. Enter one or more email(s), comma separated. Click "Send Invites."
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 Clicking the emailed invitation link does not automatically create an account for you. Invitees will need to
 create an account before accepting an invitation to join a team.
 ::
@@ -56,7 +56,7 @@ All team members have the ability to remove other members or invites from a team
 
 To remove members or leave a team yourself, open the team menu in the dashboard header and select the desired team. Click "Members" to enter the members page and the :icon{name="material-symbols:exit-to-app" title="Exit Button"} or :icon{name="material-symbols:close" title="Close Button"} button on the desired member and confirm.
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 If an account leaves or is removed from a team, it will be fully "locked out" of the team until re-invited by another member.
 ::
 
@@ -66,11 +66,11 @@ If an account leaves or is removed from a team, it will be fully "locked out" of
 
 To destroy a team, open the team menu in the dashboard header and select the desired team. Click "Settings" to enter the team settings page. Scroll down to the "Destroy this Team" section. Toggle :icon{name="material-symbols:local-fire-department-rounded" title="Fire Button"} and an input box will appear, prompting you to type the team name into the input box. Click on "Destroy Team".
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 Destroying a team completely removes all its data from Directus Cloud. This action is permanent and irreversible.
 ::
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Teams with Active Projects**
 To delete a team, you must first delete any active projects within it.
 ::
diff --git a/content/cloud/1.getting-started/3.accounts.md b/content/cloud/1.getting-started/3.accounts.md
index 14e1c218..c177020e 100644
--- a/content/cloud/1.getting-started/3.accounts.md
+++ b/content/cloud/1.getting-started/3.accounts.md
@@ -41,14 +41,14 @@ To destroy your Directus Cloud account, click :icon{name="material-symbols:accou
 
 Type in your password, then click the "Destroy Account" button.
 
-::callout{icon="material-symbols:dangerous-outline" class="max-w-2xl" color="error"}
+::callout{icon="i-lucide-circle-x" class="max-w-2xl" color="error"}
 
 Destroying your account completely removes your account and data from Directus Cloud. This action is permanent and
 irreversible. Proceed with caution!
 
 ::
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 **Must leave all Teams before deleting**<br/>
 
diff --git a/content/cloud/2.projects/2.destroy.md b/content/cloud/2.projects/2.destroy.md
index d8395314..baa357c7 100644
--- a/content/cloud/2.projects/2.destroy.md
+++ b/content/cloud/2.projects/2.destroy.md
@@ -11,6 +11,6 @@ Destroying a Directus Cloud project completely removes all its data, assets, set
 To destroy a Directus Cloud project, open the project you wish to delete. Click on "Edit" to enter the project details page, and scroll to the bottom of the page and toggle :icon{name="material-symbols:local-fire-department-rounded" title="Fire Button"}. Type in the project name and confirm.
 
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 This action will break any external apps connecting to the project's API or linking to project files, and is permanent and irreversible. **Directus is not responsible for data or files lost due to this action!**
 ::
diff --git a/content/cloud/2.projects/3.version-upgrades.md b/content/cloud/2.projects/3.version-upgrades.md
index ddab4835..a7d40936 100644
--- a/content/cloud/2.projects/3.version-upgrades.md
+++ b/content/cloud/2.projects/3.version-upgrades.md
@@ -9,7 +9,7 @@ security patches.
 
 You'll get notified in the Cloud dashboard when an update takes place. If there are significant breaking changes, we will notify you with enough time to migrate any of your logic before the upgrade.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Version Locking**  
 Want to stay on a specific version of Directus? Version Locking is available on enterprise projects. [Contact us](https://directus.com/contact) to get started.
 ::
diff --git a/content/cloud/3.configuration/2.environment-variables.md b/content/cloud/3.configuration/2.environment-variables.md
index 28f640f3..3e9dfa14 100644
--- a/content/cloud/3.configuration/2.environment-variables.md
+++ b/content/cloud/3.configuration/2.environment-variables.md
@@ -6,13 +6,13 @@ description: Learn about environment variables in Directus Cloud.
 
 You can configure your Directus project using a number of environment variable presets which can be configured in the Cloud dashboard.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 Directus Cloud Enterprise customers are able to customize a wider variety of environment variables. Enterprise customers should [contact&nbsp;support](https://directus.com/contact) for help with updating their environment variables.
 ::
 
 ![Cloud dashboard project configuration screen showing a number of configurable settings such as CORS and maximum file upload size.](/img/363335e4-59bb-4233-bca5-94bb1f39f3fd.webp)
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 Once you save these changes, your project will redeploy.
 ::
 
diff --git a/content/cloud/4.billing/3.cancel-subscription.md b/content/cloud/4.billing/3.cancel-subscription.md
index 0f06b582..3ca46a16 100644
--- a/content/cloud/4.billing/3.cancel-subscription.md
+++ b/content/cloud/4.billing/3.cancel-subscription.md
@@ -12,7 +12,7 @@ To cancel a subscription, navigate to the projects list and click on :icon{name=
 
 Scroll down and click on " :icon{name="material-symbols:local-fire-department-rounded" title="Fire Button"} Cancel Subscription". Enter the name of your project to confirm, and confirm. Your project will now be deleted.
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 - This is irreversible.
 - Your instances, database, data, configuration, files, thumbnails, and backups will all be permanently destroyed.
 - There are no refunds for the remaining time on your subscription
diff --git a/content/community/3.codebase/2.dev-environment.md b/content/community/3.codebase/2.dev-environment.md
index 47a0d4ef..93eda4f8 100644
--- a/content/community/3.codebase/2.dev-environment.md
+++ b/content/community/3.codebase/2.dev-environment.md
@@ -6,7 +6,7 @@ description: How to set up and run a development environment for Directus so tha
 
 This guide explains how to set up and run a development environment for Directus so that you can work on the platform's source code.
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 **Not For Production**
 This is specifically for contributing to the codebase of Directus. To run Directus, refer to [our guide on creating a project](/getting-started/overview).
 ::
@@ -32,7 +32,7 @@ Create an `.env` file in the `api` directory and populate with [configuration op
 
 You will need to configure a database. You might want to use the Directus team's `docker-compose.yml` file to spin up a test database or a local mail server.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Docker Compose Example For Services**
 ```yaml
 # This compose file is meant to spin up a copy of supported database vendors,
@@ -228,7 +228,7 @@ You can run all packages in development with the following command:
 pnpm --recursive dev
 ```
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 **Race Conditions**
 When running multiple or all packages, sometimes `ts-node` may not start up the API properly because of race conditions due to changes happening to other packages. You can either rerun the command to restart the API or choose what packages to work on as described below.
 ::
diff --git a/content/community/3.codebase/3.testing.md b/content/community/3.codebase/3.testing.md
index 16d360d2..ba545889 100644
--- a/content/community/3.codebase/3.testing.md
+++ b/content/community/3.codebase/3.testing.md
@@ -32,7 +32,7 @@ pnpm --filter api test -- app.test.ts
 pnpm --filter api test -- utils
 ```
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Relative Commands**  
 
 If you are already in a directory of a specific package, you may omit the `--filter` flag in `pnpm` commands since the commands will be executed relative to the current directory.
diff --git a/content/configuration/1.general.md b/content/configuration/1.general.md
index f02dd67c..e24da184 100644
--- a/content/configuration/1.general.md
+++ b/content/configuration/1.general.md
@@ -25,7 +25,7 @@ description: Configuration for the general system, server, first admin user, and
 | `PROJECT_OWNER`                            | Registered owner and primary contact responsible for your Directus instance.   |                              |
 
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 `PUBLIC_URL` must be a qualified URL when using [licensing](/licensing/overview) features beyond Core Plan and/or when configuring [SSO](/configuration/auth-sso)
 ::
 
@@ -38,7 +38,7 @@ See [Licensing](/licensing/overview) for a full explanation of license keys, lic
 | `LICENSE_KEY`   | License key in the format `DXXXX-XXXXX-XXXXX-XXXXX-XXXXC`. Activated against the Directus licensing service on first use and revalidated periodically. Takes precedence over `LICENSE_TOKEN` and any key set through the Studio.            |               |
 | `LICENSE_TOKEN` | Pre-issued license token for offline use. Validated locally on each startup and never contacts the licensing service. Mutually exclusive with `LICENSE_KEY` — setting both is a configuration error and Directus will refuse to start. |               |
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 When `LICENSE_KEY` or `LICENSE_TOKEN` is set in the environment, any license key management actions are disabled. To change the license, update the environment variable and restart Directus.
 ::
 
diff --git a/content/configuration/ai.md b/content/configuration/ai.md
index 8d72f15f..01504b2d 100644
--- a/content/configuration/ai.md
+++ b/content/configuration/ai.md
@@ -12,7 +12,7 @@ description: Configuration for AI Assistant and Model Context Protocol (MCP) fea
 | -------- | ----------- | ------------- |
 | `AI_ENABLED` | Whether AI Assistant features are available. Set to `false` to completely disable AI Assistant across the entire instance, hiding the sidebar for all users and disabling the settings for administrators. | `true` |
 
-::callout{icon="material-symbols:info-outline" color="info"}
+::callout{icon="i-lucide-info" color="info"}
 When `AI_ENABLED` is set to `false`:
 - The API routes for the assistant are not mounted
 - AI Assistant sidebar is hidden from all users
@@ -27,7 +27,7 @@ This is useful for compliance requirements where AI features must be completely
 | -------- | ----------- | ------------- |
 | `MCP_ENABLED` | Whether the Model Context Protocol server is available for system administrators to enable in project settings. Set to `false` to completely disable MCP functionality across the entire instance. | `true` |
 
-::callout{icon="material-symbols:info-outline" color="info"}
+::callout{icon="i-lucide-info" color="info"}
 When `MCP_ENABLED` is set to `false`, the MCP server cannot be enabled through **Settings → AI → Model Context Protocol** in the admin interface, providing system administrators with complete control over AI integration features. See the [MCP Server](/guides/ai/mcp/installation) guide for more information.
 ::
 
@@ -58,7 +58,7 @@ The MCP OAuth authorization endpoint and Dynamic Client Registration endpoint us
 | `MCP_OAUTH_CIMD_ALLOWED_DOMAINS` | Comma-separated list of domains allowed to use Client ID Metadata Document registration. Leave empty to allow any valid metadata document domain. | `''` |
 | `MCP_OAUTH_CIMD_BLOCKED_TLDS` | Comma-separated list of top-level domains blocked for Client ID Metadata Document registration. | `test,localhost,invalid,example,local,onion` |
 
-::callout{icon="material-symbols:menu-book-outline" color="primary" to="/guides/ai/mcp/oauth"}
+::callout{icon="i-lucide-book-open" color="primary" to="/guides/ai/mcp/oauth"}
 Read the MCP OAuth guide for setup steps, client registration behavior, and revocation.
 ::
 
@@ -72,7 +72,7 @@ Send AI Assistant traces to an external observability platform for monitoring us
 | `AI_TELEMETRY_PROVIDER` | Telemetry provider to use. Supported values: `langfuse`, `braintrust`. | `langfuse` |
 | `AI_TELEMETRY_RECORD_IO` | Include full prompt inputs and response outputs in traces. | `false` |
 
-::callout{icon="material-symbols:warning-outline" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 Enabling `AI_TELEMETRY_RECORD_IO` will send the full content of user messages and AI responses to your telemetry provider. Only enable this if your telemetry provider meets your data privacy requirements.
 ::
 
diff --git a/content/configuration/auth-sso.md b/content/configuration/auth-sso.md
index ff0cd108..96b211a7 100644
--- a/content/configuration/auth-sso.md
+++ b/content/configuration/auth-sso.md
@@ -23,13 +23,13 @@ For each of the auth providers listed, you must provide the following configurat
 | `AUTH_<PROVIDER>_DRIVER` | Which driver to use, either `local`, `oauth2`, `openid`, `ldap`, `saml`.                                                                    |               |
 | `AUTH_<PROVIDER>_MODE`   | Whether to use `'cookie'` or `'session'` authentication mode when redirecting. Applies to the following drivers `oauth2`, `openid`, `saml`. | `session`     |
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 Cookie and session configuration settings such as `REFRESH_TOKEN_COOKIE_*`, `SESSION_COOKIE_*`, and related security parameters can be found in [Security & Limits](/configuration/security-limits).
 ::
 
 Based on your configured drivers, you must also provide additional variables, where `<PROVIDER>` is the capitalized name of the item in the `AUTH_PROVIDERS` value.
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 **PUBLIC_URL and AUTH_ALLOWED_PUBLIC_URLS**
 
 - Our `oauth2`, `openid` and `saml` SSO drivers rely on `PUBLIC_URL` for redirection, with `oauth2` and `openid` also using it for the callback URL generation. If set incorrectly, the login process for these drivers may behave unexpectedly.
@@ -192,7 +192,7 @@ SAML is an open-standard, XML-based authentication framework for authentication
 
 The `SP_metadata` and `IDP_metadata` variables should be set to the XML metadata provided by the service provider and identity provider respectively.
 
-:::callout{icon="material-symbols:warning-rounded" color="warning"}
+:::callout{icon="i-lucide-triangle-alert" color="warning"}
 **SAML Attribute Keys**\
 \
 Most identity providers send simple attribute names like `email` rather than the full XML schema URIs shown as defaults above. Set `IDENTIFIER_KEY` and `EMAIL_KEY` to match your identity provider's attribute names. Make sure to check the attribute statements in your IdP's SAML configuration.\
@@ -225,7 +225,7 @@ AUTH_FACEBOOK_ICON="facebook"
 AUTH_FACEBOOK_LABEL="Facebook"
 ```
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Multiple Providers**
 Directus users can only authenticate using the auth provider they are created with. It is not possible to authenticate with multiple providers for the same user.
 ::
@@ -348,7 +348,7 @@ AUTH_GITHUB_ACCESS_URL="https://github.com/login/oauth/access_token"
 AUTH_GITHUB_PROFILE_URL="https://api.github.com/user"
 ```
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 
 If the authenticating user has not marked their email as "public" in GitHub, it will not be accessible by Directus.
 
@@ -367,7 +367,7 @@ AUTH_TWITTER_IDENTIFIER_KEY="data.username"
 AUTH_TWITTER_SCOPE="tweet.read users.read"
 ```
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 
 Twitter does not provide "email" so we define "username" as the identifier.
 
@@ -387,7 +387,7 @@ AUTH_AWS_IDENTIFIER_KEY="email"
 AUTH_AWS_EMAIL_KEY="email"
 ```
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 **Metadata**
 
 - AWS IAM Docs are not that verbose. Users have found that the `SP_metadata` environment variable can be supplied empty.
@@ -425,7 +425,7 @@ AUTH_GOOGLE_IDENTIFIER_KEY="email"
 AUTH_GOOGLE_EMAIL_KEY="email"
 ```
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 **SP Metadata**
 
 - The `entityID` should be the same as the one configured in Google in the `EntityDescriptor` tag
diff --git a/content/configuration/cache.md b/content/configuration/cache.md
index c07c8870..c127f40a 100644
--- a/content/configuration/cache.md
+++ b/content/configuration/cache.md
@@ -12,17 +12,17 @@ subsequent requests are served straight from this cache. Enabling cache will als
 cache-control headers. Depending on your setup, this will further improve performance by caching the request in
 middleman servers (like CDNs) and even the browser.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Internal Caching**
 In addition to data-caching, Directus also does some internal caching. Note `CACHE_SCHEMA` which is enabled by default.
 This speed up the overall performance of Directus, as we don't want to introspect the whole database on every request.
 ::
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 These settings are shared across all cache drivers. If `CACHE_ENABLED` is disabled, settings marked with **superscript 5** may be used by Directus's caching system. This behavior cannot be turned off.
 ::
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Assets Cache**
 `Cache-Control` and `Last-Modified` headers for the `/assets` endpoint are separate from the regular data-cache.
 `Last-Modified` comes from `modified_on` DB field. This is useful as it's often possible to cache assets for far longer
diff --git a/content/configuration/database.md b/content/configuration/database.md
index fa042574..be76d456 100644
--- a/content/configuration/database.md
+++ b/content/configuration/database.md
@@ -30,7 +30,7 @@ This includes:
 - `DB_POOL__` prefixed options which are passed to [`tarn.js`](https://github.com/vincit/tarn.js#usage).
 - `DB_SSL__` prefixed options which are passed to the respective database driver. For example, `DB_SSL__CA` which can be used to specify a custom Certificate Authority (CA) certificate for SSL connections. This is required if the database server CA is not part of [Node.js' trust store](https://nodejs.org/api/tls.html).
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Note**  
 `DB_SSL__CA_FILE` may be preferred to load the CA directly from a file.
 ::
diff --git a/content/configuration/extensions.md b/content/configuration/extensions.md
index 5725c7f5..ca07d399 100644
--- a/content/configuration/extensions.md
+++ b/content/configuration/extensions.md
@@ -6,7 +6,7 @@ description: Configuration for extensions and the Directus Marketplace.
 
 :partial{content="config-env-vars"}
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 For guidance on restricting who can install or manage extensions, see [Security Best Practices](/guides/security/best-practices#extensions).
 ::
 
@@ -39,7 +39,7 @@ For guidance on restricting who can install or manage extensions, see [Security
 | `MARKETPLACE_TRUST`    | One of `sandbox`, `all`                           | `sandbox`                      |
 | `MARKETPLACE_REGISTRY` | The registry to use for the Directus Marketplace. | `https://registry.directus.com` |
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Sandbox**  
 By default, the Directus Marketplace will allow installation of all [App extension types](/guides/extensions/app-extensions) and only [API extension types](/guides/extensions/api-extensions) that use our secure sandbox.
 ::
diff --git a/content/configuration/files.md b/content/configuration/files.md
index cb669aaf..05e17408 100644
--- a/content/configuration/files.md
+++ b/content/configuration/files.md
@@ -6,7 +6,7 @@ description: Configuration for storage locations, metadata, upload limits, and t
 
 :partial{content="config-env-vars"}
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 For guidance on file-upload permissions, asset access tokens, and blocking internal IPs for file imports, see [Security Best Practices](/guides/security/best-practices#files--assets).
 ::
 
@@ -121,13 +121,13 @@ Large files can be uploaded in chunks to improve reliability and efficiency, esp
 | `TUS_UPLOAD_EXPIRATION` | The expiry duration for uncompleted files with no upload activity. | `10m`         |
 | `TUS_CLEANUP_SCHEDULE`  | Cron schedule to clean up the expired uncompleted uploads.         | `0 * * * *`   |
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 This feature requires the `PUBLIC_URL` to be set correctly to [where your API is publicly accessible](https://directus.com/docs/configuration/general).
 
 ::
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 
 **Chunked Upload Restrictions**<br/>
 
diff --git a/content/configuration/flows.md b/content/configuration/flows.md
index ef43b2fa..7405822f 100644
--- a/content/configuration/flows.md
+++ b/content/configuration/flows.md
@@ -7,7 +7,7 @@ description: Configure environment variables, memory, and timeout for Flows.
 
 :partial{content="config-env-vars"}
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 For guidance on who should be able to create and edit flows, and how to secure webhook triggers, see [Security Best Practices](/guides/security/best-practices#flows).
 ::
 
diff --git a/content/configuration/logging.md b/content/configuration/logging.md
index fcb6ac40..d49cb736 100644
--- a/content/configuration/logging.md
+++ b/content/configuration/logging.md
@@ -39,7 +39,7 @@ The WebSocket Logs endpoint is accessible at `/websocket/logs`. The method of au
 | `WEBSOCKETS_LOGS_STYLE`      | Stream just the message (pretty) or the full JSON log. One of `pretty`, `raw`.                         | `pretty`      |
 | `WEBSOCKETS_LOGS_CONN_LIMIT` | How many simultaneous connections are allowed.                                                         | `Infinity`    |
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Ephemeral Logs**  
 Realtime system logs are ephemeral and not stored in the database. They are only available while the realtime connection is
 active. Refreshing the page will clear the logs.
diff --git a/content/configuration/metrics.md b/content/configuration/metrics.md
index c20cfbc2..7a9ae309 100644
--- a/content/configuration/metrics.md
+++ b/content/configuration/metrics.md
@@ -15,7 +15,7 @@ To enable performance and error measurement of connected services, Directus can
 | `METRICS_NAME_PREFIX`         | Prefix applied to all Prometheus metric names.                                                                          | `directus_`                    |
 | `METRICS_HEALTH_CHECK_PREFIX` | Prefix for health check keys used in cache, Redis, and storage checks.                                                  | `directus-metric-`             |
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 **Metric Aggregation**
 If Directus is running within a PM2 context, then metrics will be aggregated on a per scheduled job frequency. Ensure
 Prometheus' scrape frequency takes that into account.
diff --git a/content/configuration/migrations.md b/content/configuration/migrations.md
index 4c9284ba..0dc000dc 100644
--- a/content/configuration/migrations.md
+++ b/content/configuration/migrations.md
@@ -31,7 +31,7 @@ export async function down(knex) {
 }
 ```
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 **Backup Your Database**
 Proceed at your own risk and backup your database before adding custom migrations.
 ::
diff --git a/content/configuration/realtime.md b/content/configuration/realtime.md
index c879ecd3..fb19c16e 100644
--- a/content/configuration/realtime.md
+++ b/content/configuration/realtime.md
@@ -27,7 +27,7 @@ It's recommended to keep the `WEBSOCKETS_HEARTBEAT_PERIOD` between 30 and 120 se
 | `WEBSOCKETS_REST_AUTH`         | The method of authentication to require for this connection. One of `public`, `handshake` or `strict`. | `handshake`   |
 | `WEBSOCKETS_REST_AUTH_TIMEOUT` | The amount of time in seconds to wait before closing an unauthenticated connection.                    | 30            |
 
-::callout{icon="material-symbols:menu-book-outline" color="primary" to="/guides/realtime/authentication"}
+::callout{icon="i-lucide-book-open" color="primary" to="/guides/realtime/authentication"}
 Read more about different authentication methods with Directus Realtime.
 ::
 
@@ -42,13 +42,13 @@ Read more about different authentication methods with Directus Realtime.
 | `WEBSOCKETS_GRAPHQL_AUTH_TIMEOUT` | The amount of time in seconds to wait before closing an unauthenticated connection.                    | 30            |
 
 
-::callout{icon="material-symbols:menu-book-outline" color="primary" to="/guides/realtime/authentication"}
+::callout{icon="i-lucide-book-open" color="primary" to="/guides/realtime/authentication"}
 Read more about different authentication methods with Directus Realtime.
 ::
 
 ## Collaborative Editing
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 Multi-instance collaboration requires a shared Redis instance for coordination.
 ::
 
diff --git a/content/configuration/security-limits.md b/content/configuration/security-limits.md
index e606ed27..e790d151 100644
--- a/content/configuration/security-limits.md
+++ b/content/configuration/security-limits.md
@@ -6,7 +6,7 @@ description: Configuration for access tokens, cookies, CSP, hashing, CORS, rate
 
 :partial{content="config-env-vars"}
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 This page documents environment variables. For in-app security configuration (permissions, system collections, public access), see [Security Best Practices](/guides/security/best-practices).
 ::
 
@@ -61,7 +61,7 @@ Argon2's hashing function is used by Directus to hash user passwords, generate h
 
 All `HASH_*` environment variable parameters are passed to the `argon2.hash` function. See the [node-argon2 library options page](https://github.com/ranisalt/node-argon2/wiki/Options) for reference.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Memory Usage**  
 Modifying `HASH_MEMORY_COST` and/or `HASH_PARALLELISM` will affect the amount of memory directus uses when computing hashes; each thread gets `HASH_MEMORY_COST` amount of memory, so the total additional memory will be these two values multiplied. This may cause out of memory errors, especially when running in containerized environments.
 ::
diff --git a/content/configuration/theming.md b/content/configuration/theming.md
index 62a34299..1645f93d 100644
--- a/content/configuration/theming.md
+++ b/content/configuration/theming.md
@@ -24,7 +24,7 @@ The branding section contains global settings that are applied as defaults throu
 - **Public Note** — A helpful note displayed at the bottom of the public page's right-pane, supports markdown for rich-text formatting.
 - **Default Appearance** — Light or Dark theme (or based on system preference).
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Public Background Video Limitations**  
 * Not all video formats/encodings can be streamed by browsers resulting in the video needing to be downloaded fully before playing.
 * Both supported and the optimal formats/settings can vary per browser.
@@ -57,7 +57,7 @@ body {
 
 This example is better served using the Theming Engine, but is a good example of Directus' flexibility of approach.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 Custom CSS can be an injection vector, see [Harden Content Security Policy When Using Custom CSS](/guides/security/best-practices#harden-content-security-policy-when-using-custom-css) for configuration guidance.
 ::
 
diff --git a/content/frameworks/.navigation.yml b/content/frameworks/.navigation.yml
index 9fccf896..96eb8c0a 100644
--- a/content/frameworks/.navigation.yml
+++ b/content/frameworks/.navigation.yml
@@ -1,2 +1,2 @@
 title: Frameworks
-icon: material-symbols:data-object
+icon: i-lucide-braces
diff --git a/content/frameworks/01.nextjs/01.data-fetching.md b/content/frameworks/01.nextjs/01.data-fetching.md
index 6d228d58..9a36035e 100644
--- a/content/frameworks/01.nextjs/01.data-fetching.md
+++ b/content/frameworks/01.nextjs/01.data-fetching.md
@@ -70,7 +70,7 @@ const directus = createDirectus('https://directus.example.com').with(rest());
 export default directus;
 ```
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 Next.js extends the native fetch API with a `force-cache` configuration by default. This means you may sometimes run
 into scenarios where Next.js returns stale data. To fix this, update the `rest()` composable as follows:
diff --git a/content/frameworks/01.nextjs/08.live-preview-content-versioning.md b/content/frameworks/01.nextjs/08.live-preview-content-versioning.md
index 06451dde..acf46b71 100644
--- a/content/frameworks/01.nextjs/08.live-preview-content-versioning.md
+++ b/content/frameworks/01.nextjs/08.live-preview-content-versioning.md
@@ -141,7 +141,7 @@ To configure your Directus Studio App to preview different versions of your cont
 - Update the preview url with the version by selecting Version from the dropdown and entering it in this format: `http://<your-site>/api/draft?secret=MY_SECRET_TOKEN&id=ID&version=Version`
 - Save your changes.
 
-::callout{icon="material-symbols:info-outline" title="Replace Values"}
+::callout{icon="i-lucide-info" title="Replace Values"}
 
 Remember to replace `<your-site>` with your actual website domain and `MY_SECRET_TOKEN` with the secret you have in your Next.js project.
 
diff --git a/content/frameworks/03.astro/01.data-fetching.md b/content/frameworks/03.astro/01.data-fetching.md
index 60739741..bd0021e7 100644
--- a/content/frameworks/03.astro/01.data-fetching.md
+++ b/content/frameworks/03.astro/01.data-fetching.md
@@ -171,7 +171,7 @@ Because all routes must be determined at build time in Astro, a dynamic route mu
 
 Go to `http://localhost:4321/about`, replacing `about` with any of your item slugs. Using the Directus JavaScript SDK, the item with that slug is retrieved, and the page should show your data.
 
-::callout{icon="material-symbols:warning-outline-rounded"}
+::callout{icon="i-lucide-triangle-alert"}
 
 Non-existing slugs will result in a 404 error. Additionally,
 [`set:html` should only be used for trusted content.](https://docs.astro.build/en/reference/directives-reference/#sethtml)_
diff --git a/content/frameworks/04.sveltekit/01.data-fetching.md b/content/frameworks/04.sveltekit/01.data-fetching.md
index d0c46e34..e22a4248 100644
--- a/content/frameworks/04.sveltekit/01.data-fetching.md
+++ b/content/frameworks/04.sveltekit/01.data-fetching.md
@@ -67,7 +67,7 @@ export async function handle({ event, resolve }) {
 }
 ```
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 Theoretically you could also make HTTP requests to your Directus server endpoint directly via SvelteKit's `fetch`
 implementation. However the Directus SDK offers some nice [additional features](/guides/connect/sdk).
@@ -181,7 +181,7 @@ single item with that slug is retrieved, and the page should show your data. `re
 `slug` field.
 SvelteKit populates the data property and also updates it on the client automatically should any dependency(variable, url, etc.) used inside our load function change. In this case whenever `params.slug` changes.
 
-::callout{icon="material-symbols:warning-outline-rounded"}
+::callout{icon="i-lucide-triangle-alert"}
 
 Non-existing IDs will result in a forbidden error, which we catch and then throw svelte's internal error
 object to respond with a 404. Additionally,
@@ -305,7 +305,7 @@ Click on any of the blog post links, and it will take you to a blog post page co
 ![A blog post page shows an image, a title, and a number of paragraphs.](/img/5811ee82-f600-4855-9620-bafca0bb98d8.webp)
 
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 If the image is not showing up for you, you might have forgotten to also give the `directus_files` collection read
 access as described above. This is due to that by default the file object only includes the image name, but not the
diff --git a/content/frameworks/06.angular/01.data-fetching.md b/content/frameworks/06.angular/01.data-fetching.md
index e94a06ce..135ff0b9 100644
--- a/content/frameworks/06.angular/01.data-fetching.md
+++ b/content/frameworks/06.angular/01.data-fetching.md
@@ -22,7 +22,7 @@ navigation:
 - [Node.js](https://nodejs.org/en/download) and a development environment of your choice
 - Install the Angular CLI - use the Angular [guide](https://angular.io/guide/setup-local) to achieve this.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 Note that Angular and TypeScript versions must be compatible. Since the SDK requires a minimum TypeScript version of 5.0, you need to use Angular version 17 for your project.
 
@@ -340,7 +340,7 @@ Go to `src/app/app.routes.ts` file and add the following route in the `Routes` a
 ```
 Once the application reloads, go to `http://localhost:4200/blog` and the list of posts will be displayed on the page.
 
-::callout{icon="material-symbols:info-outline" title="Navigation"}
+::callout{icon="i-lucide-info" title="Navigation"}
 
 In Angular, the order in which you put the routes in the `Routes` array will affect how components are loaded in your application. In this case, you don't want the path to `blog` to be consumed as a `slug`. As a result, ensure the blog route is put before slug in the Routes array.
 
diff --git a/content/frameworks/09.flask/01.data-fetching.md b/content/frameworks/09.flask/01.data-fetching.md
index 7345a21d..dc05364f 100644
--- a/content/frameworks/09.flask/01.data-fetching.md
+++ b/content/frameworks/09.flask/01.data-fetching.md
@@ -233,7 +233,7 @@ def get_posts():
     return response.json().get("data")
 ```
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 The `fields` parameter tells Directus to return only the specified fields. The `sort` parameter tells Directus to return the most recent posts first.
 
@@ -293,7 +293,7 @@ def get_post_by_slug(slug):
     return post
 ```
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 Note that this code is reassigning `post["image"]`, this is because Directus returns the image ID, and you need to explicitly say where it is placed in your code, following this structure: `<directus-base-url>/assets/<image-id>`.
 You can read more about it [in the files reference](/getting-started/upload-files).
@@ -316,7 +316,7 @@ Then create the page template on the `templates/post.html` file:
 </article>
 {% endblock %}
 ```
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 Note that the template code appends a query string to the image URL, it is used to dynamically convert the image to the webp format and set a width of 400px to it, allowing you to prevent users from loading an excessively large image.
 You can learn more about this [in the files reference](/guides/files/transform).
diff --git a/content/frameworks/14.eleventy/01.data-fetching.md b/content/frameworks/14.eleventy/01.data-fetching.md
index 41bd27ed..fa8a5657 100644
--- a/content/frameworks/14.eleventy/01.data-fetching.md
+++ b/content/frameworks/14.eleventy/01.data-fetching.md
@@ -30,7 +30,7 @@ npm init -y
 npm install @11ty/eleventy@3.0.0-alpha.2 @directus/sdk
 ```
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 When Eleventy 3.0 leaves alpha, we'll update this post with any changes required.
 
diff --git a/content/frameworks/15.solidstart/01.data-fetching.md b/content/frameworks/15.solidstart/01.data-fetching.md
index 486ea002..aaf602f0 100644
--- a/content/frameworks/15.solidstart/01.data-fetching.md
+++ b/content/frameworks/15.solidstart/01.data-fetching.md
@@ -64,7 +64,7 @@ export const directus = createDirectus("YOUR_DIRECTUS_PROJECT_URL").with(rest())
 
 We have some unused `import` statements at the moment since now we are only instantiating the Directus client.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 Remember to replace `YOUR_DIRECTUS_PROJECT_URL` with your real project URL.
 
@@ -182,7 +182,7 @@ export default function UserPage() {
 }
 ```
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 It's important to note that exact matches take precedence over dynamic routes. If it exists, a `about.jsx` file will render instead of `[slug].jsx` for the `/about` URL.
 
diff --git a/content/getting-started/1.overview.md b/content/getting-started/1.overview.md
index 53007684..c6ecb359 100644
--- a/content/getting-started/1.overview.md
+++ b/content/getting-started/1.overview.md
@@ -31,7 +31,7 @@ With your Directus Cloud account, you can set up teams to organize projects and
 
 If you want to run Directus on your own infrastructure, start with [Create a project](/getting-started/create-a-project).
 
-::callout{icon="material-symbols:school-outline" color="secondary" to="/tutorials/self-hosting"}
+::callout{icon="i-lucide-graduation-cap" color="secondary" to="/tutorials/self-hosting"}
 See all deployment options (Cloud, Docker, and platform-specific guides).
 ::
 
diff --git a/content/getting-started/2.create-a-project.md b/content/getting-started/2.create-a-project.md
index b721230e..de96f27e 100644
--- a/content/getting-started/2.create-a-project.md
+++ b/content/getting-started/2.create-a-project.md
@@ -32,7 +32,7 @@ Login to your new project using the URL in your email inbox or on your Directus
 
 You will need Docker installed and running on your machine. You can [download it here](https://docs.docker.com/get-docker/).
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **What is Docker?**
 Docker is a developer tool that allows software-creators to distribute their work along with all dependencies and required environment settings. This means that applications can run reliably and consistently, making it the perfect way to use Directus both locally and in-production.
 
@@ -78,7 +78,7 @@ services:
 			WEBSOCKETS_ENABLED: "true"
 ```
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Breakdown of Docker Compose File**
 - This file defines a single Docker container that will use the specified version of the `directus/directus` image.
 - The `ports` list maps internal port `8055` is made available to our machine using the same port number, meaning we can access it from our computer's browser.
@@ -103,7 +103,7 @@ The project that runs from this `docker-compose.yml` file is not production-read
 
 We also have a number of guides on self-hosting Directus on various cloud providers, like Amazon Web Services, Microsoft Azure, and Google Cloud Platform.
 
-::callout{icon="material-symbols:school-outline" color="secondary" to="/tutorials/self-hosting"}
+::callout{icon="i-lucide-graduation-cap" color="secondary" to="/tutorials/self-hosting"}
 See how to deploy Directus (all options).
 ::
 
diff --git a/content/getting-started/4.use-the-api.md b/content/getting-started/4.use-the-api.md
index 94222504..678e6e6d 100644
--- a/content/getting-started/4.use-the-api.md
+++ b/content/getting-started/4.use-the-api.md
@@ -22,7 +22,7 @@ Create a `posts` collection with at least a `title` and `content` field. [Follow
 
 You also need an admin static token. In the Data Studio, go to your user detail page. Create a new token, take note of it, and then save.
 
-::callout{icon="material-symbols:menu-book-outline" color="primary" to="/guides/auth/tokens-cookies"}
+::callout{icon="i-lucide-book-open" color="primary" to="/guides/auth/tokens-cookies"}
 Read more about tokens and cookies in Directus Auth.
 ::
 
@@ -36,7 +36,7 @@ curl \
 --url 'https://directus.example.com/items/posts'
 ```
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Replace values**
 - The Base URL (`https://directus.example.com`) must be replaced with your project URL.
 - In the Authorization Header, replace `YOUR_ACCESS_TOKEN` with your admin static token.
@@ -57,7 +57,7 @@ curl \
 
 This request will only show items with a `status` value of `published`, and only return the `id` and `title` fields.
 
-::callout{icon="material-symbols:menu-book-outline" color="primary" to="/guides/connect/query-parameters"}
+::callout{icon="i-lucide-book-open" color="primary" to="/guides/connect/query-parameters"}
 See all available query parameters in Directus.
 ::
 
@@ -80,6 +80,6 @@ curl \
 
 All endpoints in Directus are documented in our API Reference, which also shows all expected parameters and properties in the payload. The API reference shows examples using the REST API, GraphQL API, and the Directus SDK.
 
-::callout{icon="material-symbols:code-blocks-rounded" color="green" to="/api"}
+::callout{icon="i-lucide-square-code" color="green" to="/api"}
 Explore the Directus API Reference.
 ::
diff --git a/content/getting-started/5.authenticate-user.md b/content/getting-started/5.authenticate-user.md
index b1b67890..9d7ce036 100644
--- a/content/getting-started/5.authenticate-user.md
+++ b/content/getting-started/5.authenticate-user.md
@@ -106,7 +106,7 @@ curl \
 --url 'https://directus.example.com/items/posts'
 ```
 
-::callout{icon="material-symbols:menu-book-outline" color="primary" to="/guides/auth/email-login"}
+::callout{icon="i-lucide-book-open" color="primary" to="/guides/auth/email-login"}
 Read more about refreshing tokens.
 ::
 
@@ -114,6 +114,6 @@ Read more about refreshing tokens.
 
 Read more about [access tokens](/guides/auth/tokens-cookies), [access control](/guides/auth/access-control), and then refer to the Users API reference to manage user accounts.
 
-::callout{icon="material-symbols:code-blocks-rounded" color="green" to="/api/users"}
+::callout{icon="i-lucide-square-code" color="green" to="/api/users"}
 Explore the Users API Reference.
 ::
diff --git a/content/getting-started/6.upload-files.md b/content/getting-started/6.upload-files.md
index 2ab87fad..de6edf0e 100644
--- a/content/getting-started/6.upload-files.md
+++ b/content/getting-started/6.upload-files.md
@@ -32,7 +32,7 @@ https://example.directus.app/assets/<file-id>?access_token=token
 
 The token must belong to a user who has access to read files in the `directus_files` collection. If the public role has read access, you can omit the `access_token` parameter.
 
-::callout{icon="material-symbols:menu-book-outline" color="primary" to="/guides/auth/access-control"}
+::callout{icon="i-lucide-book-open" color="primary" to="/guides/auth/access-control"}
 Learn how to limit access to data in your project through custom permissions.
 ::
 
@@ -58,6 +58,6 @@ The asset will be transformed, saved to your asset storage, and returned to the
 
 Read more about [uploading files](/guides/files/upload), [advanced transformations](/guides/files/access), and then refer to the Files API reference to manage user accounts.
 
-::callout{icon="material-symbols:code-blocks-rounded" color="green" to="/api/files"}
+::callout{icon="i-lucide-square-code" color="green" to="/api/files"}
 Explore the Files API Reference.
 ::
diff --git a/content/getting-started/9.resources.md b/content/getting-started/9.resources.md
index 88ceeaeb..e8db7fd9 100644
--- a/content/getting-started/9.resources.md
+++ b/content/getting-started/9.resources.md
@@ -6,85 +6,85 @@ title: Resources & Links
 
 ## Documentation Areas
 
-::callout{icon="material-symbols:menu-book-outline" color="primary" to="/guides/data-model/collections"}
+::callout{icon="i-lucide-book-open" color="primary" to="/guides/data-model/collections"}
 **Guides**: Detailed documentation about the Directus platform
 ::
 
-::callout{icon="material-symbols:code-blocks-rounded" color="green" to="/api"}
+::callout{icon="i-lucide-square-code" color="green" to="/api"}
 **API Reference**: Comprehensive list of endpoints available in your projects.
 ::
 
-::callout{icon="material-symbols:school-outline" color="secondary" to="/tutorials"}
+::callout{icon="i-lucide-graduation-cap" color="secondary" to="/tutorials"}
 **Tutorials**: Framework, project, and other implementation guides.
 ::
 
-::callout{icon="material-symbols:groups-outline" color="error" to="/community/overview/welcome"}
+::callout{icon="i-lucide-users" color="error" to="/community/overview/welcome"}
 **Community**: Get involved through feature requests, code contribution, education, and more.
 ::
 
 ## Directus Cloud
 
-::callout{icon="material-symbols:link" to="https://directus.cloud"}
+::callout{icon="i-lucide-link" to="https://directus.cloud"}
 **Directus Cloud**: The best way to get your Directus project up and running.
 ::
 
-::callout{icon="material-symbols:link" to="https://directus.com/contact"}
+::callout{icon="i-lucide-link" to="https://directus.com/contact"}
 **Enterprise Cloud**: Custom-tailored solutions for industrial-scale projects.
 ::
 
-::callout{icon="material-symbols:link" to="https://status.directus.cloud"}
+::callout{icon="i-lucide-link" to="https://status.directus.cloud"}
 **System Status**: Up-to-date information on our various cloud systems.
 ::
 
 
 ## Directus Websites
 
-::callout{icon="material-symbols:link" to="https://directus.com"}
+::callout{icon="i-lucide-link" to="https://directus.com"}
 **Website**: General information, resources, and team info.
 ::
 
-::callout{icon="material-symbols:link" to="https://directus.com/tv"}
+::callout{icon="i-lucide-link" to="https://directus.com/tv"}
 **Directus TV**: Hours of video series across dozens of shows.
 ::
 
-::callout{icon="material-symbols:link" to="https://directus.com/resources/directus-plus-full-launch"}
+::callout{icon="i-lucide-link" to="https://directus.com/resources/directus-plus-full-launch"}
 **Directus+**: Starter kits to help you build projects quicker.
 ::
 
 
 ## Developer Resources
 
-::callout{icon="material-symbols:link" to="https://github.com/directus/directus"}
+::callout{icon="i-lucide-link" to="https://github.com/directus/directus"}
 **GitHub**: The open-source repository and version control.
 ::
 
-::callout{icon="material-symbols:link" to="https://www.npmjs.com/package/directus"}
+::callout{icon="i-lucide-link" to="https://www.npmjs.com/package/directus"}
 **NPM Package**: The official Directus node package.
 ::
 
-::callout{icon="material-symbols:link" to="https://hub.docker.com/r/directus/directus"}
+::callout{icon="i-lucide-link" to="https://hub.docker.com/r/directus/directus"}
 **DockerHub**: The official Directus docker image.
 ::
 
-::callout{icon="material-symbols:link" to="https://locales.directus.io"}
+::callout{icon="i-lucide-link" to="https://locales.directus.io"}
 **Crowdin**: Service for managing the App's many language translations.
 ::
 
 
 ## Directus Around The Web
 
-::callout{icon="material-symbols:link" to="https://www.youtube.com/c/DirectusVideos"}
+::callout{icon="i-lucide-link" to="https://www.youtube.com/c/DirectusVideos"}
 **YouTube**: Checkout our channel with video tutorials and feature overviews.
 ::
 
-::callout{icon="material-symbols:link" to="https://community.directus.io"}
+::callout{icon="i-lucide-link" to="https://community.directus.io"}
 **Community Platform**: Our main community chat with thousands of Directus developers.
 ::
 
-::callout{icon="material-symbols:link" to="https://x.com/directus"}
+::callout{icon="i-lucide-link" to="https://x.com/directus"}
 **X**: The latest product info and sneak-peeks.
 ::
 
-::callout{icon="material-symbols:link" to="https://bsky.app/profile/directus.com"}
+::callout{icon="i-lucide-link" to="https://bsky.app/profile/directus.com"}
 **Bluesky**: Be part of the conversation with our team.
 ::
diff --git a/content/guides/01.data-model/1.collections.md b/content/guides/01.data-model/1.collections.md
index 8e7e435b..9bd36883 100644
--- a/content/guides/01.data-model/1.collections.md
+++ b/content/guides/01.data-model/1.collections.md
@@ -22,7 +22,7 @@ You can create collections from the Data Model settings in the Directus Data Stu
 
 The unique name for your collection must be set on creation, is case sensitive, and will be used throughout the Data Studio and Directus APIs.
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 **Collection names are immutable**
 The collection name cannot be modified after collection creation, which includes casing. However, you can override how it is displayed in the Data Studio with collection naming translations.
 ::
@@ -43,7 +43,7 @@ Additionally, Directus can create some common fields, including an archived fiel
 - **Generated UUID**: Universally Unique Identifier. Creates a completely unique ID. IDs generated with this system (not just in your database, but anywhere this system is used) are so statistically unlikely to be repeated that for all practical purposes they are unique.
 - **Manually Entered String**: you manually type out a unique string as the ID for each item. Directus will ensure they are unique by forbidding new item creation with a duplicate ID.
 
-::callout{icon="material-symbols:code-blocks-rounded" color="green" to="/api/collections"}
+::callout{icon="i-lucide-square-code" color="green" to="/api/collections"}
 Explore the Collections API to create and manage collections.
 ::
 
@@ -69,7 +69,7 @@ Content versioning is used on the [item page](/guides/content/editor) and allows
 
 This feature can be enabled for specific collections. Once enabled, new items open automatically in a draft version, where edits can be made and saved without affecting the published content. When ready, the draft can be published — promoting it to the published version.
 
-::callout{icon="material-symbols:menu-book-outline" color="primary" to="/guides/content/content-versioning"}
+::callout{icon="i-lucide-book-open" color="primary" to="/guides/content/content-versioning"}
 Read the content versioning user guide.
 ::
 
@@ -79,7 +79,7 @@ Live preview is used on the [item page](/guides/content/editor) and allows for y
 
 Use item field values to construct the live preview URL, including unique identifiers and the content version, so you can preview draft content before publishing it.
 
-::callout{icon="material-symbols:school-outline" color="secondary" to="/guides/content/live-preview"}
+::callout{icon="i-lucide-graduation-cap" color="secondary" to="/guides/content/live-preview"}
 Read the Live Preview guide.
 ::
 
@@ -91,7 +91,7 @@ Read the Live Preview guide.
 
 By default, your Directus project tracks all activity and revisions for collections. However, you can override this and choose to only track activity, or nothing.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Accountability vs Telemetry**
 Accountability is a log of who does what in your project. It is for your team's own use. This is different from telemetry, which is configured in environment variables.
 ::
@@ -100,7 +100,7 @@ Accountability is a log of who does what in your project. It is for your team's
 
 The sort feature enables users to manually sort items in the Data Studio and via the API. If not selected as an optional field when creating a collection, you will need to create a new field with an integer type. It can then be selected as the sort field.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Sorting Relational Fields**
 To configure manual sorting within a [relational field](/guides/data-model/relationships) (e.g., M2M, O2M, or M2A), also set the sort field within the relationship section of the field's configuration drawer.
 ::
@@ -111,7 +111,7 @@ Once configured, click :icon{name="material-symbols:sort" title="Sort Button"} i
 
 The **Save as Copy** option on the [item page](/guides/content/editor) offers a way to effectively duplicate the current item. Duplication settings define which field values will be copied.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 **Duplicating Items with Relationships**<br/>
 
@@ -134,7 +134,7 @@ To configure an archive field, set the following four input fields as desired.
 - **Archive Value**: assigned value to archive field when an item is archived.
 - **Unarchive Value**: assigned value to archive field when an item is unarchived.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Archived Items via API**
 Archived items are hidden in the app by default, but they are still returned normally via the API unless explicitly filtered out. This gives you the flexibility to manage archived items however you want when working with the API.
 ::
@@ -187,7 +187,7 @@ To access the collection without an admin role, you must also configure [access
 
 Finally, any relationships not configured in the database must also be set up inside of Directus.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Composite Keys & SQL Views**
 Directus does not currently support composite keys, or the creation of virtual tables via SQL views.
 ::
diff --git a/content/guides/01.data-model/2.fields.md b/content/guides/01.data-model/2.fields.md
index 1e8aeb75..84bb3717 100644
--- a/content/guides/01.data-model/2.fields.md
+++ b/content/guides/01.data-model/2.fields.md
@@ -36,7 +36,7 @@ The **key** is the unique name for a field within a collection. This value is us
 
 The **type** defines the underlying data type configured in the database. When creating fields, the available types will correspond to the interface selected.
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 **Field names and types are immutable**
 The field key and type cannot be modified after collection creation, which includes casing. However, you can override how the key is displayed in the Data Studio with field name translations.
 ::
@@ -61,7 +61,7 @@ This section also allows for a note - which is displayed in the editor and provi
 
 This section describes how the user will create, edit, and view data in the editor, and are effectively different form inputs. Each interface will have its own configuration options.
 
-::callout{icon="material-symbols:menu-book-outline" color="primary" to="/guides/data-model/interfaces"}
+::callout{icon="i-lucide-book-open" color="primary" to="/guides/data-model/interfaces"}
 See all available interfaces in Directus.
 ::
 
@@ -77,7 +77,7 @@ This section allows for the configuration of rules to determine valid user input
 
 These validations apply to data added via Directus and are not database-level validations.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Validation Stages**
 When an item is submitted, validation first runs in the `Studio` (client-side) using the field rules. Once any reported errors are resolved and the item is submitted again, the request is sent to the `Server`. The `Server` then re-runs the validation rules, along with permission checks. Any validation errors from either step are displayed on the form.
 ::
@@ -86,7 +86,7 @@ When an item is submitted, validation first runs in the `Studio` (client-side) u
 
 This section alters the current field's configuration based on the values of other fields in the item. Conditional configuration include whether a field is read-only, hidden, or required, along with any editable interface-specific configuration.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Conditionally Show Fields**
 To show a field conditionally, set hidden to `true` in the field settings. Then, create a condition with a rule checking the value of another field. The condition should set hidden to `false`.
 ::
@@ -97,7 +97,7 @@ This section will only appear when the field is relational, and describes the re
 
 Relational triggers configure what will happen to the relational field data when related values are deselected or deleted. This includes setting values to `null`, their default, or cascading/preventing the deletion.
 
-::callout{icon="material-symbols:menu-book-outline" color="primary" to="/guides/data-model/relationships"}
+::callout{icon="i-lucide-book-open" color="primary" to="/guides/data-model/relationships"}
 See all available relationship types in Directus.
 ::
 
@@ -107,7 +107,7 @@ Each field can be configured to be half or full width in the editor. Two half-wi
 
 Field width is not in the field configuration, but can be set by clicking on :icon{name="material-symbols:more-vert" title="Field Width Button"} in the collection data model page.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Field Width Configurations**
 
 - `half` fields will go from `[start]` until `[half]` in the grid system, but have a maximum width of `380px` defined by the `--form-column-max-width` css variable.
diff --git a/content/guides/01.data-model/3.interfaces.md b/content/guides/01.data-model/3.interfaces.md
index f543f032..4f0bf13a 100644
--- a/content/guides/01.data-model/3.interfaces.md
+++ b/content/guides/01.data-model/3.interfaces.md
@@ -40,7 +40,7 @@ A search input that will populate dropdown choices by making a request to a give
 | Trigger       | Select between `throttle` and `debounce`.                                            |
 | Rate          | The delay in `milliseconds` used for the trigger.                                    |
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Throttle vs Debounce**
 Throttle and debounce are very similar. Debounce will wait until a period of 'silence' has happened before making the request, while throttle will keep making requests at most 1 call every period. Period is set in the 'rate' configuration for this interface.
 ::
@@ -160,7 +160,7 @@ Date picker input that allows user to select a date and time.
 | Use 24-Hour Format | Use 24 hour time system.                                                                             |
 | Timezone           | Select an IANA timezone identifier for display and input conversion. Only available for `Timestamp`. |
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Handling Timezones**
 
 - `Timestamp` normalizes values to UTC and returns them in ISO 8601 format with the `Z` suffix (e.g. 2024-01-15T09:00:00.000Z). When a **Timezone** is configured on a `Timestamp` field, the Data Studio converts stored UTC values to that timezone for display, and converts input back to UTC before saving. The API always returns UTC.
@@ -201,7 +201,7 @@ Each field in a repeater has further configuration options.
 
 Show and set geospatial data on an interactive map. Mapping data is stored as [GeoJSON](https://geojson.org/).
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Maps Provider**
 By default, Directus will use [OpenStreetMap](https://www.openstreetmap.org) to display your mapping data.
 
@@ -213,7 +213,7 @@ By default, Directus will use [OpenStreetMap](https://www.openstreetmap.org) to
 | Types         | <ul><li>**`Point`**: A single location on a map.</li> <li>**`LineString`**: A series of points on a map connected in a line.</li> <li>**`Polygon`**: An area of a map drawn by selecting vertices.</li> <li>**`Multipoint`**: A series of disconnected points on a map.</li> <li>**`MultiLineString`**: A series of `LineString` objects.</li> <li>**`MultiPolygon`**: A series of `Polygon` objects.</li> <li>**`Geometry (All)`**: An series of `Point`, `LineString` and `Polygon` objects.</li> <li>**`JSON`**: A `Geometry (All)` object stored as JSON.</li> <li>**`String`**: A `Geometry (All)` object stored a string of characters.</li> <li>**`Text`**: A `Geometry (All)` object stored as Text.</li> <li>**`CSV`**: A `Geometry (All)` object stored as comma-separated values.</li> |
 | Default View  | The default location and zoom settings on the map to show by default                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Database Support**
 Your database must support geospatial data or have a geospatial plugin installed, such as PostGIS or SpatiaLite, to fully utilize mapping functionality with Directus.
 ::
@@ -294,7 +294,7 @@ Nested tree of checkboxes that can be expanded or collapsed.
 | Choice Children | Child checkboxes nested below the current choice.                                                                                             |
 | Value Combining | Controls what value is stored when nested selections are made. `All`, `Branch`, `Leaf`, `Indeterminate`, `Exclusive`.                         |
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Understanding Value Combining Options**
 In a Checkboxes (Tree) interface, checkboxes can exist within a parent checkbox. Value combining determines the final value when selecting items in a tree.
 
@@ -404,7 +404,7 @@ When this field is added to a collection, Directus will create a Many to Many (M
 | Related Collections | Which collections should items be selected from. |
 | Allow Duplicates    | Allow users to add the same Item multiple times. |
 
-::callout{icon="material-symbols:school-outline" color="secondary" to="/tutorials/projects/create-reusable-blocks-with-many-to-any-relationships"}
+::callout{icon="i-lucide-graduation-cap" color="secondary" to="/tutorials/projects/create-reusable-blocks-with-many-to-any-relationships"}
 Read our tutorial on using a Builder (M2A) to create reusable page components.
 ::
 
diff --git a/content/guides/01.data-model/4.relationships.md b/content/guides/01.data-model/4.relationships.md
index a6338589..64471af6 100644
--- a/content/guides/01.data-model/4.relationships.md
+++ b/content/guides/01.data-model/4.relationships.md
@@ -16,7 +16,7 @@ In a M2O relationship, multiple items from the one collection are linked to one
 
 On the [item page](/guides/content/editor), having a M2O field does not automatically provide navigation to the related collection's items. To achieve this, the related collection requires a One to Many field to be set up.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **M2O Examples**
 
 - Given `cities` and `countries` collections, many cities would be assigned to one country.
@@ -44,7 +44,7 @@ In a M2M relationship, an additional collection is created known as the junction
 
 You can also have a self-referencing M2M relationship that connects items in the same collection.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Self-Referencing M2M Examples**
 
 - Given an `articles` collection, you could configure related articles.
@@ -65,7 +65,7 @@ In a M2A relationship, one collection can be related to any item in any collecti
 
 When you configure a M2A in Directus, a M2A `Alias` field is created as well as a junction collection. The junction collection in a M2A relationship also stores the collection name for related collections.
 
-::callout{icon="material-symbols:school-outline" color="secondary" to="/tutorials/projects/create-reusable-blocks-with-many-to-any-relationships"}
+::callout{icon="i-lucide-graduation-cap" color="secondary" to="/tutorials/projects/create-reusable-blocks-with-many-to-any-relationships"}
 Read our tutorial on using a Builder (M2A) to create reusable page components.
 ::
 
@@ -75,7 +75,7 @@ Read our tutorial on using a Builder (M2A) to create reusable page components.
 
 When you create a Translations interface in Directus, a translations O2M `Alias` field is created, as well as a `languages` collection and a junction collection between your main collection and `languages`. All translated text is stored in the junction collection.
 
-::callout{icon="material-symbols:wand-stars-outline" color="secondary" to="/guides/content/translations#quick-setup-with-generate-translations"}
+::callout{icon="i-lucide-wand-sparkles" color="secondary" to="/guides/content/translations#quick-setup-with-generate-translations"}
 Use the **Generate Translations** wizard in collection settings to automatically create the full translations infrastructure — languages collection, junction collection, relationships, and fields — in one step.
 ::
 
diff --git a/content/guides/02.content/2.editor.md b/content/guides/02.content/2.editor.md
index f3407c27..07985108 100644
--- a/content/guides/02.content/2.editor.md
+++ b/content/guides/02.content/2.editor.md
@@ -18,7 +18,7 @@ To create an item, click :icon{name="material-symbols:add-circle-outline-rounded
 
 Fill in the fields as desired. Note that some of these will be [marked as required](/guides/data-model/fields) and need to be filled in, or be dynamic fields. Relations will be filled in here, too.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Singletons**  
 
 If the collection is configured as a [singleton](/guides/data-model/collections) in the data model
@@ -32,7 +32,7 @@ settings, the App will automatically open the item page when selecting the colle
 
 When editing an item, you can click on :icon{name="material-symbols:more-vert"} to select some advanced options, amongst them "Save as Copy". Selecting this will save a copy.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 The :icon{name="material-symbols:more-vert"} icon will only be displayed after changes have been made to the item.
 ::
 
@@ -42,7 +42,7 @@ To archive an item, navigate to the content module and select the desired collec
 
 Archived items will not show up in app, but will still be returned in API responses unless explicitly filtered out.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Requires Configuration**  
 
 Archiving requires an [archive field](/guides/data-model/collections) to be configured within the collection's data model
@@ -58,14 +58,14 @@ As you update field values on items, Directus saves these revisions, and they ca
 
 To revert an item, navigate to the content module and select the desired collection and select the desired item. Click on "Revisions" in the sidebar and then on the revision you wish to preview. Go to "Revisions Made" in the side menu and view the revision differences. Click :icon{name="material-symbols:settings-backup-restore"} to revert the item's values and return to the item page.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Revision Preview**  
 
 You will also see a "Revision Preview" button in the side menu navigation, which will let you preview all the item's
 values for that revision.
 ::
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 You can also revert items [programmatically via the API](/api/revisions).
 ::
 
diff --git a/content/guides/02.content/3.layouts.md b/content/guides/02.content/3.layouts.md
index 4662a0f6..73005d6f 100644
--- a/content/guides/02.content/3.layouts.md
+++ b/content/guides/02.content/3.layouts.md
@@ -70,7 +70,7 @@ layout used in the content module.
 | **Select Item(s)**      | Click :icon{name="material-symbols:check-box-outline"} in the selection column for the desired Item(s).                                                  |
 | **Manually Sort Items** | Toggle :icon{name="material-symbols:check-box-outline"} in the configured Sort column to drag and drop :icon{name="material-symbols:drag-handle"} Items. |
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Manual Sorting Requires Configuration**  
 Only available if you [configure a sort field](/guides/data-model/collections) in the collection's data model
 settings.
@@ -140,7 +140,7 @@ This layout is ideal for collections with time-oriented data (e.g. events and ap
 |---|---|
 | **Select Item** | Click an item on the calendar to open its item page. |
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Configuration Requirements**  
 To use this layout, the collection will need at least one datetime [Field](/guides/data-model/fields) to set a start time,
 but ideally two datetime Fields (to set a start time and end time).
@@ -177,7 +177,7 @@ There is no Subheader on the Map Layout.
 | **Select Item** | Click a single item to enter its item page. |
 | **Select Items** | Click and drag to select multiple items at once, opening the item page. |
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Configuration Requirements**  
 To use this Layout, the collection must have a map field configured.
 
@@ -227,7 +227,7 @@ There is no Subheader for the Kanban Layout.
 | **Add Status Panel**  | Click :icon{name="material-symbols:add-box-outline"} and add a group name (i.e. new status column). |
 | **Edit or Delete Status Column** | Click :icon{name="material-symbols:more-horiz"} and then click :icon{name="material-symbols:edit-outline"} to edit or :icon{name="material-symbols:delete-outline"} to delete. |
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Configuration Requirements**  
 To make this layout work, you will need to configure an appropriate status [field](/guides/data-model/fields) on the
 collection, then identify this field under "Group By" in the Layout Options menu.
diff --git a/content/guides/02.content/4.import-export.md b/content/guides/02.content/4.import-export.md
index 743e2ab4..c5e2ae03 100644
--- a/content/guides/02.content/4.import-export.md
+++ b/content/guides/02.content/4.import-export.md
@@ -16,17 +16,17 @@ To import Items from a file, navigate to the collection and click "Import / Expo
 
 The items will now be in the collection, and the file itself will not be stored in the Directus project.
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 The field headers in the imported file must match the field keys of the collection you're importing into. Otherwise, the column will be skipped.
 ::
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Importing Relational Files**
 It is possible to import relational field values as well. For this task, the user performing the import will need access
 permissions for the related collection.
 ::
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Import Error Handling**
 During import operations, errors are collected up to the maximum defined by [`MAX_IMPORT_ERRORS`](/configuration/security-limits), after which the import is cancelled.
 ::
diff --git a/content/guides/02.content/5.live-preview.md b/content/guides/02.content/5.live-preview.md
index 8b4a2f41..a968cd53 100644
--- a/content/guides/02.content/5.live-preview.md
+++ b/content/guides/02.content/5.live-preview.md
@@ -35,7 +35,7 @@ Once configured, Directus will send a request to your application for a page wit
 
 You can then develop your application to handle that request and return a page that shows a preview of the item requested.
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 **Using Live Preview with Static Site Generators**
 If you're using a static site generator to preview your item data, be sure to develop it to render the item page on load as opposed to on build. Otherwise, it will only show the state of the item when the site itself was last built.
 ::
@@ -59,7 +59,7 @@ If you've enabled [content versioning](/guides/content/content-versioning), you
 
 Directus passes the selected version key as the `version` query parameter. Your frontend must read this and fetch the versioned content from the API (e.g. `/items/posts/42?version=draft`). Without this, the preview will display main content regardless of the selected version.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Visual Editing with Versions**
 If your frontend is also configured with the [Visual Editor Frontend Library](/guides/content/visual-editor/frontend-library) and your [Visual Editor URL](/guides/content/visual-editor/studio-module#version-support-in-urls) includes `{{$version}}`, visual editing in the live preview pane works with content versions too. When viewing a version, only items on collections with versioning enabled will show editable elements.
 ::
diff --git a/content/guides/02.content/6.content-versioning.md b/content/guides/02.content/6.content-versioning.md
index 69188745..e7a15a5d 100644
--- a/content/guides/02.content/6.content-versioning.md
+++ b/content/guides/02.content/6.content-versioning.md
@@ -17,7 +17,7 @@ use content versioning, including drafting content without publishing it, and mo
 - **Publish**: publishing a version makes it the published item that is displayed to users. Use the Publish button in the item header to publish the currently viewed version.
 - **Revision**: revisions are individual changes to items made within a version or the published item. Directus keeps track of all changes made, so you're able to view the history of modifications and revert to a previous state.
 
-::callout{icon="material-symbols:info-outline" to="/guides/content/live-preview"}
+::callout{icon="i-lucide-info" to="/guides/content/live-preview"}
 **Using Versions in Live Preview**  
 The version field is a dynamic variable can be added to the live preview URL so you can preview a specific version of an item. Check out more about live previews.
 ::
@@ -34,7 +34,7 @@ When content versioning is enabled for a collection, the published view is **rea
 
 To start editing, click the **Edit** button in the item header (or press `⌘E` on Mac / `Ctrl+E` on Windows). Directus automatically switches you to the draft version, where you can make and save changes freely.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Why read-only?**
 Preventing direct edits to the published item ensures changes go through the versioning workflow. This keeps your published content stable and gives your team a review step before changes go live.
 ::
@@ -53,12 +53,12 @@ The draft version:
 - Transforms from a virtual placeholder to an actual version when you save changes
 - Uses "**draft**" as a reserved version key that cannot be used for custom versions
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Reserved version keys**
 The keys `published`, `main`, and `draft` are all reserved and cannot be used for custom versions. Attempting to create a version with any of these keys returns a `400` error.
 ::
 
-::callout{icon="material-symbols:warning-outline"}
+::callout{icon="i-lucide-triangle-alert"}
 **Backward Compatibility**  
 The reserved global "draft" version was introduced in Directus 11.16.0. If you have an existing version with the key `draft` and a custom name other than "Draft", the display name will be standardized to "Draft" (i.e. transformed) to support the new global versioning feature. The version content and functionality remain unchanged.
 ::
@@ -93,7 +93,7 @@ When you are ready to publish, select **"Publish"**. Because there is no existin
 
 After publishing, you are redirected to the newly created item in its published version.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Permissions**
 Publishing an item-less draft creates a new item, so it requires **create** permission on the collection - not edit permission.
 ::
@@ -104,7 +104,7 @@ Publishing an item-less draft creates a new item, so it requires **create** perm
 
 Open an item within your versioned collection. At the top of the item view, you will notice a dropdown with the published content version displayed as "Published". Select "Create Version" and provide a key and a name for the new version. You can then save your new version.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Version Source**  
 All new versions originate from the published item. This implies that the published item acts as the single source of truth for other versions. The draft version is always available and doesn't need to be manually created.
 ::
@@ -117,7 +117,7 @@ Open the item and switch to the version you want to edit using the version dropd
 
 Upon saving the changes, you'll notice that the published item remains unaffected, while the changes are reflected only in the modified version.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Required Fields**
 Versions can be saved even if required fields are empty. Validation of required fields is deferred to publish time, so you can save partial drafts without completing all required fields.
 ::
@@ -135,7 +135,7 @@ Publishing a version makes it the published (current) version of your content.
 1. Open the version you want to publish
 2. Select the **"Publish"** button.
 
-::callout{icon="material-symbols:warning"}
+::callout{icon="i-lucide-triangle-alert"}
 **Required Field Validation**
 If the version has missing required fields, Directus will display field-level validation errors and a notice banner. The comparison modal will not open until all required fields are filled in.
 ::
@@ -150,7 +150,7 @@ Once published, this version becomes the active content, and the previous publis
 
 After publishing a version, you can choose to keep or delete the version. For the global draft version, you'll see options to "Discard Edits" or "Keep Edits" instead of "Delete Version" or "Keep Version".
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Programmatically Implement Content Versioning**
 You have the option to integrate Content Versioning through the API. To learn how to accomplish this, please refer to
 our [API reference documentation](/api/versions).
diff --git a/content/guides/02.content/7.translations.md b/content/guides/02.content/7.translations.md
index 9d11821e..08ac3091 100644
--- a/content/guides/02.content/7.translations.md
+++ b/content/guides/02.content/7.translations.md
@@ -8,7 +8,7 @@ Localising content in Directus involves using translation strings, which are mul
 
 ![Translation strings](/img/d2348575-9fbb-4c38-9d9f-22e32799ded7.webp)
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Data Studio Translations**  
 This article refers to translating your content in Directus. Many parts of the Data Studio are already translated into multiple languages via community contribution on Crowdin.
 
@@ -38,13 +38,13 @@ To assign a translation string, navigate to the input that you'd like to add a t
 
 Choose a translation string key as desired.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Switching Language**  
 There are two ways to change the app language. Administrators can set the project's
 [default language](/configuration/translations), while users can choose their own personal language preference.
 ::
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Adding New Translation Strings**  
 You can also click ":icon{name="material-symbols:add-circle-rounded"} New Translation String" in the :icon{name="material-symbols:translate"} dropdown menu to create a new translation string on the fly.
 ::
@@ -75,7 +75,7 @@ This will automatically create:
 - A **translations junction collection** (e.g. `articles_translations`) containing the selected fields.
 - The necessary **relationships** and a **translations alias field** on the source collection.
 
-::callout{icon="material-symbols:settings-outline"}
+::callout{icon="i-lucide-settings"}
 **Advanced Options**
 Expand the advanced section in the dialog to customize the translations collection name, languages collection, and foreign key field names.
 ::
@@ -105,7 +105,7 @@ Now, when [editing an item](/guides/content/editor) of that collection, you'll b
 
 ![Creating a post with a title in both Spanish and English](/img/774ac37b-1c9e-433b-80ba-deededd8e406.webp)
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Default Language**  
 When no explicit default language is set on a translation interface, the first language in the `languages` collection determines the default tab shown when editing translations. To control this order, add an integer field (e.g. `sort`) to the `languages` collection and set it as the collection's sort field.
 ::
@@ -114,7 +114,7 @@ When no explicit default language is set on a translation interface, the first l
 
 Directus can automatically translate your content into multiple languages using AI. Configure an AI provider in [Settings > AI](/guides/ai/assistant/setup), then use the **Translate with AI** button in the translations interface to translate fields across all your configured languages at once.
 
-::card{icon="material-symbols:auto-awesome" title="AI Translations" to="/guides/ai/translations"}
+::card{icon="i-lucide-sparkles" title="AI Translations" to="/guides/ai/translations"}
 Learn how to set up and use AI-powered translations.
 ::
 
diff --git a/content/guides/02.content/8.visual-editor/1.frontend-library.md b/content/guides/02.content/8.visual-editor/1.frontend-library.md
index dd2e21ad..275bfdf0 100644
--- a/content/guides/02.content/8.visual-editor/1.frontend-library.md
+++ b/content/guides/02.content/8.visual-editor/1.frontend-library.md
@@ -21,7 +21,7 @@ The visual editing library consists of a few imported methods, only one of which
 | `remove()`         | Removes all elements.                                                                | |
 | `disable()`        | Temporarily disable all elements. Re-enable those elements with returned `enable()` function `const { enable } = disable();`. | |
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 **Client-side Library**
 Since this is a client-side library, be sure to run its methods only in the client environment and not on the server.
 ::
@@ -51,7 +51,7 @@ The generated attribute will be:
 </h1>
 ```
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 The `fields` property in the `setAttr` function can also accept an array of strings, which will render a comma separated list like: `data-directus="collection:posts;item:12;fields:title,subtitle,slug"`
 ::
 
@@ -62,7 +62,7 @@ The `fields` property in the `setAttr` function can also accept an array of stri
 | `fields`      | `string`, `string[]`               | The specific fields to show when editing. Optional, otherwise all fields will be shown. |
 | `mode`        | `'drawer'`, `'modal'`, `'popover'` | Determines how the edit field(s) should be rendered. Optional, but defaults to `'drawer'` |
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 **Be careful with sensitive data in attributes**
 It is recommended that you conditionally render sensitive `data-directus` attributes only when your webpage renders within the Directus visual editor in order to avoid leaking this data publicly. <br><br> There are a number of ways to achieve this. For example you might develop your website to only render sensitive attributes in the presence of a certain query string included in your visual editor URL settings, for example `?visual-editing=true&token=123`.
 ::
@@ -108,17 +108,17 @@ The optional `onSaved` callback function of the `apply()` method provides an obj
 | `item` | `string`, `number` | Primary key of the item. |
 | `payload` | `Record<string, any>` | The changed values. |
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 **Client-side Navigation**
 It is recommended to call the global `remove()` method on client-side navigation to avoid unnecessarily bloating the underlying store.
 ::
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 **Content Security Policy**
 If you have CSP configured, be sure to make your site available for use inside an iFrame in Directus. If you’re unsure where your CSP is defined, check your web server configuration files, your site’s build configuration, or your hosting platform’s security settings.
 ::
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Usage with Directus Cloud and local development**
 Connecting your local development environment to a Directus Cloud Professional instance must be done by exposing your localhost to the web through an SSL secured connection. There are multiple ways to achieve this:
 
@@ -135,7 +135,7 @@ When used with Directus 11.16.0+, the library validates field-level permissions
 
 Elements that fail the permission check remain inert — no overlay, hover listeners, or click handlers are attached.
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 **Minimum Version Requirement**
 Field access checks require `@directus/visual-editing` v2.0.0+ and Directus 11.16.0+. Without a compatible Directus instance responding to the permission check, elements will not display edit overlays.
 ::
@@ -148,7 +148,7 @@ Given this library is built as a Node package, environments that can’t take ad
 <script src="https://unpkg.com/@directus/visual-editing" type="text/javascript"></script>
 ```
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 More information can be found at [https://unpkg.com](https://unpkg.com).
 ::
 
diff --git a/content/guides/02.content/8.visual-editor/2.studio-module.md b/content/guides/02.content/8.visual-editor/2.studio-module.md
index 1bd5fd16..deeee59e 100644
--- a/content/guides/02.content/8.visual-editor/2.studio-module.md
+++ b/content/guides/02.content/8.visual-editor/2.studio-module.md
@@ -8,7 +8,7 @@ The visual editor module enables content editors to render their website within
 
 ![An image of the visual editor with the drawer open on a page and an input being hovered over](/img/visual_editor_drawer_editing.png)
 
-::callout{icon="material-symbols:info-outline" color="info"}
+::callout{icon="i-lucide-info" color="info"}
 Visual editing also works in the [**Live Preview**](/guides/content/live-preview#visual-editing-in-live-preview) pane on item detail pages. This gives the same editing experience without switching modules.
 ::
 
@@ -49,7 +49,7 @@ https://your-site.com/preview?version={{$version}}
 | `CONTENT_SECURITY_POLICY_DIRECTIVES__FRAME_SRC` | `"<your-website-url>"` | Allows your website to be embedded within the Directus Studio iframe. |
 | `CACHE_AUTO_PURGE` | `true` | Ensures the preview reflects changes immediately after saving edits. |
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 **Critical Setup**: Your website will be unable to communicate with Directus if the `CONTENT_SECURITY_POLICY_DIRECTIVES__FRAME_SRC` directive is missing.  
 <br>
 Additionally, without `CACHE_AUTO_PURGE` enabled, the Visual Editor will continue to display stale data until the cache naturally expires.
@@ -100,7 +100,7 @@ When a version other than "Published" is selected:
 - **Saving an edit** creates or updates the version for that specific item. If the version doesn't exist yet for the item, it's created automatically on save.
 - **Items without content in the selected version** display their published version content as a read-only fallback.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 The version dropdown requires the user to have **read** permission on `directus_versions`. Editing in a version additionally requires **create** or **update** permission on `directus_versions`.
 ::
 
diff --git a/content/guides/02.content/9.collaborative-editing/0.index.md b/content/guides/02.content/9.collaborative-editing/0.index.md
index 2a07eadf..1cf6be7b 100644
--- a/content/guides/02.content/9.collaborative-editing/0.index.md
+++ b/content/guides/02.content/9.collaborative-editing/0.index.md
@@ -37,17 +37,17 @@ Collaborative Editing provides a sophisticated real-time collaboration experienc
 
 Follow these guides to set up collaborative editing in your Directus project:
 
-::callout{icon="material-symbols:settings-suggest-rounded" color="primary" to="/guides/content/collaborative-editing/configuration"}
+::callout{icon="i-lucide-settings" color="primary" to="/guides/content/collaborative-editing/configuration"}
 **Configuration**
 Configure settings and environment variables.
 ::
 
-::callout{icon="material-symbols:menu-book-outline" color="secondary" to="/guides/content/collaborative-editing/usage"}
+::callout{icon="i-lucide-book-open" color="secondary" to="/guides/content/collaborative-editing/usage"}
 **Usage Guide**
 Learn the basics of collaborative editing.
 ::
 
-::callout{icon="material-symbols:code-blocks-rounded" color="green" to="/guides/content/collaborative-editing/development"}
+::callout{icon="i-lucide-square-code" color="green" to="/guides/content/collaborative-editing/development"}
 **Development & Custom Extensions**
 Integrate with custom interfaces.
 ::
@@ -63,7 +63,7 @@ The feature uses a custom WebSocket implementation for real-time synchronization
 
 ## Next Steps
 
-::callout{icon="material-symbols:arrow-forward-rounded" color="primary" to="/guides/content/collaborative-editing/configuration"}
+::callout{icon="i-lucide-arrow-right" color="primary" to="/guides/content/collaborative-editing/configuration"}
 **Ready to get started?**
 Start with the Configuration guide to get up and running.
 ::
diff --git a/content/guides/02.content/9.collaborative-editing/1.configuration.md b/content/guides/02.content/9.collaborative-editing/1.configuration.md
index f080afbc..ad431b36 100644
--- a/content/guides/02.content/9.collaborative-editing/1.configuration.md
+++ b/content/guides/02.content/9.collaborative-editing/1.configuration.md
@@ -8,7 +8,7 @@ This guide covers the configuration settings for the Collaborative Editing featu
 
 ## Configuration
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Enabling Collaborative Editing**
 If WebSockets are active on your Directus instance, then enabling Collaborative Editing is as simple as checking it on your Directus settings. It will be automatically active across all collections in your instance. For detailed configuration options and environment variables, please refer to the [Collaborative Editing Configuration](/configuration/realtime#collaborative-editing) documentation.
 ::
diff --git a/content/guides/03.auth/1.tokens-cookies.md b/content/guides/03.auth/1.tokens-cookies.md
index 6e9e869d..f085cd09 100644
--- a/content/guides/03.auth/1.tokens-cookies.md
+++ b/content/guides/03.auth/1.tokens-cookies.md
@@ -16,7 +16,7 @@ Refresh tokens have a much longer expiry time, and can be used to generate a new
 
 The token should be stored and reused by your application, checking if it has expired before each use and refreshing if required. Logging out will invalidate the refresh token, stopping a user from authenticating without first logging in again.
 
-::callout{icon="material-symbols:menu-book-outline" color="primary" to="/guides/auth/email-login"}
+::callout{icon="i-lucide-book-open" color="primary" to="/guides/auth/email-login"}
 Read more about logging in, refreshing tokens, and logging out.
 ::
 
@@ -36,7 +36,7 @@ If you have an existing authentication system that issues JWTs, you can configur
 
 This is useful for enterprise scenarios where you want to maintain a single source of truth for authentication, as well as machine-to-machine (M2M) authentication where services need to access Directus programmatically.
 
-::callout{icon="material-symbols:menu-book-outline" color="primary" to="/tutorials/extensions/validating-third-party-jwts-in-directus"}
+::callout{icon="i-lucide-book-open" color="primary" to="/tutorials/extensions/validating-third-party-jwts-in-directus"}
 Learn how to validate third-party JWTs in Directus.
 ::
 
@@ -79,7 +79,7 @@ To perform actions that are not available to the public role, a valid token must
     ---
     Append the following query parameter: `?access_token=<token>`
 
-      ::callout{icon="material-symbols:info-outline"}
+      ::callout{icon="i-lucide-info"}
         **Exercise caution when using query parameters for authentication**
         Using a query parameter for authentication can lead to it being revealed or logged. If possible, use another method.
       ::
diff --git a/content/guides/03.auth/2.access-control.md b/content/guides/03.auth/2.access-control.md
index 158b2234..28335a48 100644
--- a/content/guides/03.auth/2.access-control.md
+++ b/content/guides/03.auth/2.access-control.md
@@ -51,7 +51,7 @@ Use [filter rules](/guides/connect/filter-rules) to validate field values when a
 
 Define default field values when an item is created or updated. The value will appear on the [item page](/guides/content/editor), and can later be updated.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Conflicting Permissions & the API**  
 When using the Directus API, only fields you have permission to see will be returned. However, if multiple permissions allow for varying access to the same field, it will always be returned with the value `null` if not allowed in the given context.
 
@@ -78,7 +78,7 @@ A public role defines access permissions for unauthenticated requests to the dat
 
 All public permissions are **off by default**. It is up to administrators to re-configure these and define exactly what the public role has access to.
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 Granting collection-level read access to the public role exposes **all items** in that collection to anyone, including unauthenticated users and bots. If that collection contains a mix of published and unpublished content, all of it will be accessible via the API unless you configure additional restrictions. 
 <br><br>
 Review [Minimize the Public Role](/guides/security/best-practices#minimize-the-public-role) in Security Best Practices before enabling public access.
@@ -106,7 +106,7 @@ This granular approach provides several advantages:
 - Each policy's IP allowlist operates independently without affecting other policies in your system. 
 - Different resources often require different levels of network security. Combining multiple policies with varying IP access can expand permissions depending on what IP the user is connecting from.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 **Specify both IPv4 and IPv6**<br/>
 
diff --git a/content/guides/03.auth/3.creating-users.md b/content/guides/03.auth/3.creating-users.md
index 6f320b91..32e1cb2b 100644
--- a/content/guides/03.auth/3.creating-users.md
+++ b/content/guides/03.auth/3.creating-users.md
@@ -24,7 +24,7 @@ The Register a User endpoint also only supports `first_name` and `last_name` fie
   "password": "d1r3ctu5"
 }
 ```
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 Regardless of whether the registration was successful or not, the Directus API will always respond with an empty `204` response.
 
 This is to mitigate potentially leaking the identity of registered users.
@@ -51,7 +51,7 @@ Your application must extract this value and send a GET request to the verify em
 GET /users/register/verify-email?token=<token>
 ```
 
-::callout{icon="material-symbols:menu-book-outline" color="primary" to="/configuration/security-limits"}
+::callout{icon="i-lucide-book-open" color="primary" to="/configuration/security-limits"}
 The `USER_REGISTER_URL_ALLOW_LIST` environment variable must be configured.
 ::
 
@@ -67,7 +67,7 @@ The Users API can also create a new user. Any field in the `directus_users` coll
 }
 ```
 
-::callout{icon="material-symbols:code-blocks-rounded" color="green" to="/api/users"}
+::callout{icon="i-lucide-square-code" color="green" to="/api/users"}
 See all parameters and payload options for the create user endpoint.
 ::
 
@@ -82,7 +82,7 @@ Inviting a user will send an email with an invite URL. Once invited, the user wi
 }
 ```
 
-::callout{icon="material-symbols:menu-book-outline" color="primary" to="/configuration/email"}
+::callout{icon="i-lucide-book-open" color="primary" to="/configuration/email"}
 An email service must be configured to send invites.
 ::
 
@@ -101,6 +101,6 @@ Your application must extract this value, collect the new user's password, and s
 }
 ```
 
-::callout{icon="material-symbols:menu-book-outline" color="primary" to="/configuration/security-limits"}
+::callout{icon="i-lucide-book-open" color="primary" to="/configuration/security-limits"}
 The `USER_INVITE_URL_ALLOW_LIST` environment variable must be configured.
 ::
diff --git a/content/guides/03.auth/4.email-login.md b/content/guides/03.auth/4.email-login.md
index e2026a3c..47f002d6 100644
--- a/content/guides/03.auth/4.email-login.md
+++ b/content/guides/03.auth/4.email-login.md
@@ -6,7 +6,7 @@ description: Learn about user registration, login with standard/session tokens,
 
 It is most common to authenticate users with an email and password either receiving and storing a standard token or using a session token cookie.
 
-::callout{icon="material-symbols:menu-book-outline" color="primary" to="/guides/auth/tokens-cookies"}
+::callout{icon="i-lucide-book-open" color="primary" to="/guides/auth/tokens-cookies"}
 Read more about tokens in Directus.
 ::
 
@@ -14,7 +14,7 @@ Read more about tokens in Directus.
 
 Before being able to log in, a user with an `email` and `password` must exist. This user can be created manually in the Data Studio, via an invite, or via the [Users API](/api/users).
 
-::callout{icon="material-symbols:menu-book-outline" color="primary" to="/guides/auth/creating-users"}
+::callout{icon="i-lucide-book-open" color="primary" to="/guides/auth/creating-users"}
 Read more about creating users.
 ::
 
@@ -240,7 +240,7 @@ Requesting a password reset will send an email to the user with a URL to the Dat
 }
 ```
 
-::callout{icon="material-symbols:menu-book-outline" color="primary" to="/configuration/email"}
+::callout{icon="i-lucide-book-open" color="primary" to="/configuration/email"}
 An email service must be configured to send password reset requests.
 ::
 
@@ -279,6 +279,6 @@ const result = await client.request(passwordReset(reset_token, new_password));
 ```
 ::
 
-::callout{icon="material-symbols:menu-book-outline" color="primary" to="/configuration/security-limits"}
+::callout{icon="i-lucide-book-open" color="primary" to="/configuration/security-limits"}
 The `PASSWORD_RESET_URL_ALLOW_LIST` environment variable must be configured.
 ::
diff --git a/content/guides/03.auth/6.accountability.md b/content/guides/03.auth/6.accountability.md
index 0aeb7d5a..d5f97dc9 100644
--- a/content/guides/03.auth/6.accountability.md
+++ b/content/guides/03.auth/6.accountability.md
@@ -10,7 +10,7 @@ The activity feed provides a collective timeline of all data-changing actions ta
 
 The activity feed can be accessed via the notifications drawer (:icon{name="material-symbols:notifications-outline" title="Bell"}) located in the bottom-left corner.
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 **External Changes**
 Directus can only track the events which actually pass through its platform. Therefore, any changes directly made to the database are not tracked in the activity feed.
 ::
diff --git a/content/guides/03.auth/7.sso/1.index.md b/content/guides/03.auth/7.sso/1.index.md
index d5f8542c..ae3da147 100644
--- a/content/guides/03.auth/7.sso/1.index.md
+++ b/content/guides/03.auth/7.sso/1.index.md
@@ -7,7 +7,7 @@ description: Single Sign-On is a mechanism which allows to use external provider
 Single Sign-On (SSO) is a mechanism which allows to use external providers to login into systems. For example, you can use
 your Google or Facebook account to authenticate without the need to create a new registration.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Session Based Authentication**
 In [Directus version 10.10.0](/releases/breaking-changes) the `cookie` mode has
 been replaced by the new `session` mode. The API still supports `cookie` mode logins for compatibility, however the Data
@@ -23,7 +23,7 @@ Directus supports four SSO mechanisms:
 - [LDAP](https://datatracker.ietf.org/doc/html/rfc4511)
 - [SAML](https://datatracker.ietf.org/doc/html/rfc7522)
 
-::callout{icon="material-symbols:info-outline" to="/configuration/auth-sso"}
+::callout{icon="i-lucide-info" to="/configuration/auth-sso"}
 Check out specific SSO configuration variables for different mechanisms.
 ::
 
@@ -37,7 +37,7 @@ to configure the corresponding proxy settings.
 
 In this guide, you'll learn how to set up the `global-agent` package by extending the Directus Docker Image.
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 **Security Concerns**
 Due to the fact that the `global-agent` package needs to intercept all external requests, it can be regarded as a
 potential attack surface. Especially in critical environments, it's therefore recommended to thoroughly evaluate the
diff --git a/content/guides/03.auth/7.sso/2.seamless.md b/content/guides/03.auth/7.sso/2.seamless.md
index 7b7f3386..2df3ac93 100644
--- a/content/guides/03.auth/7.sso/2.seamless.md
+++ b/content/guides/03.auth/7.sso/2.seamless.md
@@ -76,7 +76,7 @@ examples:
   ::
 ::
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Redirect Allow List**
 To allow Directus to redirect to external domains like `https://client.myserver.com/` used above, you'll need to include
 it in the `AUTH_<PROVIDER>_REDIRECT_ALLOW_LIST` security setting.
@@ -95,7 +95,7 @@ SESSION_COOKIE_SAME_SITE="lax"
 ```
 Note that no  `SESSION_COOKIE_DOMAIN` value is set.
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 **Disabling Secured Cookies**
 The configuration disables secured cookies and should only be used in local environment. Using it in production exposes
 your instance to CSRF attacks.
diff --git a/content/guides/04.connect/1.authentication.md b/content/guides/04.connect/1.authentication.md
index 4cdbf7b9..69977b9b 100644
--- a/content/guides/04.connect/1.authentication.md
+++ b/content/guides/04.connect/1.authentication.md
@@ -6,6 +6,6 @@ description: Discover how to authenticate Directus API requests using authorizat
 
 :partial{content="authentication"}
 
-::callout{icon="material-symbols:menu-book-outline" color="primary" to="/guides/auth/tokens-cookies"}
+::callout{icon="i-lucide-book-open" color="primary" to="/guides/auth/tokens-cookies"}
 Learn more about using authentication tokens and cookies.
 ::
diff --git a/content/guides/04.connect/3.query-parameters.md b/content/guides/04.connect/3.query-parameters.md
index e54c5120..7ee7b17e 100644
--- a/content/guides/04.connect/3.query-parameters.md
+++ b/content/guides/04.connect/3.query-parameters.md
@@ -31,7 +31,7 @@ Use native GraphQL queries.
 
 ::
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Examples**  
 | Value | Description |
 | ---------------------- | ------------------------------------------------------------------ |
@@ -42,7 +42,7 @@ Use native GraphQL queries.
 | `*,images.*` | Return all fields and all fields within the `images` relationship. |
 ::
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Wildcards and performance**
 While wildcards are very useful, we recommend only requesting specific fields in production. By only requesting the fields you need, you can speed up the request, and reduce the overall output size.
 ::
@@ -51,7 +51,7 @@ While wildcards are very useful, we recommend only requesting specific fields in
 
 As Many to Any (M2A) fields have nested data from multiple collections, you are not always able to fetch the same field from every related collection. In M2A fields, you can use the following syntax to specify what fields to fetch from which related nested collection type: `?fields=m2a-field:collection-scope.field`
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Example**  
 In an `posts` collection there is a Many to Any field called `sections` that points to `headings`, `paragraphs`, and `videos`. Different fields should be fetched from each related collection.
 ::
@@ -257,7 +257,7 @@ const result = await directus.request(
 
 ::
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Large limits and performance**  
 Depending on the size of your collection, fetching the maximum amount of items may result in degraded performance or timeouts.
 
@@ -465,7 +465,7 @@ const result = await directus.request(
 
 ::
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Example**  
 Only get 3 related posts, with only the top rated comment nested:
 
@@ -540,7 +540,7 @@ const result = await directus.request(
 
 ::
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Aliases in combination with other features**  
 Aliases support being used in combination with:
 
@@ -562,7 +562,7 @@ Saves the API response to a file. Valid values are `csv`, `json`, `xml`, `yaml`.
 
 Queries a version of a record by version key when [content versioning](/guides/content/content-versioning) is enabled on a collection. Applies only to single item retrieval.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Reserved version keys**
 The keys `published` and `draft` are reserved. Use `published` (or `main` for backward compatibility) to explicitly fetch the published base item. Use `draft` to fetch the global draft version.
 ::
@@ -677,7 +677,7 @@ When backlink is set to `false`, the API will exclude reverse relations during `
 
 The backlink parameter defaults to `true`, so you need to explicitly set it to `false` to enable the filtering behavior.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Wildcard Only**<br/>
 The backlink parameter only affects `*.*` wildcard field expansion. Explicitly specified field names are not filtered.
 For example: `fields=author.articles` will still include the reverse relation even when `backlink=false`.
@@ -704,7 +704,7 @@ const result = await directus.request(
 
 ::
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Example**  
 Red lines mark the response when backlink is set to `true` while green marks when backlinks is set to `false`.
 The articles collection consists of a many-to-one relation to Users called `author` and a many-to-many relation to Tags called `tags`.
diff --git a/content/guides/04.connect/5.errors.md b/content/guides/04.connect/5.errors.md
index 99ed925b..3a17b7c3 100644
--- a/content/guides/04.connect/5.errors.md
+++ b/content/guides/04.connect/5.errors.md
@@ -69,7 +69,7 @@ GraphQL responses follow the [GraphQL spec](https://spec.graphql.org/October2021
 | `500`               | Internal Server Error | An unexpected error occurred. Non-admin users see a generic message.                         |
 | `503`               | Service Unavailable   | A required dependency or external service is unavailable.                                    |
 
-::callout{icon="material-symbols:shield-outline"}
+::callout{icon="i-lucide-shield"}
 To prevent revealing which items exist, all actions for non-existing items return a `FORBIDDEN` error rather than `404`.
 ::
 
@@ -118,7 +118,7 @@ The `code` value in `extensions` lets you handle errors programmatically without
 | `VALUE_OUT_OF_RANGE`          | 400    | A numeric value is outside the column's allowed range.                            |
 | `VALUE_TOO_LONG`              | 400    | A value exceeds the column's maximum length.                                      |
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 Extensions, flows, imports, and upload handlers can return additional error codes. Handle unknown codes with a generic fallback.
 ::
 
diff --git a/content/guides/04.connect/6.sdk.md b/content/guides/04.connect/6.sdk.md
index 2124b2b2..f7b942ff 100644
--- a/content/guides/04.connect/6.sdk.md
+++ b/content/guides/04.connect/6.sdk.md
@@ -55,7 +55,7 @@ The Directus SDK is a "Composable Client" that allows you to customize and build
   const directus = createDirectus<Schema>('http://directus.example.com').with(rest());
   ```
 
-  ::callout{icon="material-symbols:school-outline" color="secondary" to="/tutorials/tips-and-tricks/advanced-types-with-the-directus-sdk"}
+  ::callout{icon="i-lucide-graduation-cap" color="secondary" to="/tutorials/tips-and-tricks/advanced-types-with-the-directus-sdk"}
   Learn how to create a Schema for SDK client creation.
 ::
 
@@ -80,7 +80,7 @@ const somePosts = await directus.request(
 );
 ```
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Breakdown of snippet**
 - Imports
   - `createDirectus` is required to create a client.
@@ -95,11 +95,11 @@ const somePosts = await directus.request(
   - `somePosts` does the same, but only the specified fields from the latest 3 published items.
 ::
 
-::callout{icon="material-symbols:code-blocks-rounded" color="green" to="/api/items"}
+::callout{icon="i-lucide-square-code" color="green" to="/api/items"}
 The API Reference contains SDK examples for endpoints, showing the required function usage.
 ::
 
-::callout{icon="material-symbols:menu-book-outline" color="primary" to="/guides/connect/query-parameters"}
+::callout{icon="i-lucide-book-open" color="primary" to="/guides/connect/query-parameters"}
 See all query parameters with SDK examples.
 ::
 
@@ -233,11 +233,11 @@ await client.refresh();
 const me = await client.request(readMe());
 ```
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 The redirect URL must be included in `AUTH_<PROVIDER>_REDIRECT_ALLOW_LIST` or the redirect will be blocked. See [Authentication & SSO configuration](/configuration/auth-sso) for all provider settings.
 ::
 
-::callout{icon="material-symbols:menu-book-outline" color="primary" to="/guides/auth/sso/seamless"}
+::callout{icon="i-lucide-book-open" color="primary" to="/guides/auth/sso/seamless"}
 Read the Seamless SSO guide for session cookie configuration and local development setup.
 ::
 
@@ -306,7 +306,7 @@ const token = await directus.getToken();
 
 Internally, `getToken()` and `setToken()` make use of the configurable storage, which can be customized for your environment's needs. There must be a `get()` and `set()` method exposed, and the `AuthData` type returned.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Example**
 Instead of storing `AuthData` in an object in the browser, this custom storage implementation stores and retrieves data in `localStorage`:
 
@@ -361,7 +361,7 @@ const result = await directus.request(
 
 The Directus SDK makes it easier to work with :product-link{product="realtime"} by adding `.connect()`, `.subscribe()`, `.sendMessage()`, and `.onWebSocket()` methods. It also handles reconnect logic.
 
-::callout{icon="material-symbols:menu-book-outline" color="primary" to="/getting-started/connect-to-realtime"}
+::callout{icon="i-lucide-book-open" color="primary" to="/getting-started/connect-to-realtime"}
 Read the Directus Realtime quickstart.
 ::
 
diff --git a/content/guides/04.connect/7.json/2.advanced-querying.md b/content/guides/04.connect/7.json/2.advanced-querying.md
index d50c01de..cec3ffda 100644
--- a/content/guides/04.connect/7.json/2.advanced-querying.md
+++ b/content/guides/04.connect/7.json/2.advanced-querying.md
@@ -60,7 +60,7 @@ The path syntax uses `.` to separate key segments and does not provide an escape
 
 The `json(field, path)` function retrieves the value at the specified path within a JSON document. It can be used wherever a field reference is accepted, including the `fields`, `sort`, and `alias` query parameters.
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 **Not Supported in Filters**
 The `json(field, path)` function is not supported in the `filter` query parameter. For filtering JSON fields, use the [`_json` filter operator](#the-_json-filter-operator).
 ::
@@ -74,11 +74,11 @@ json(field, path)
 - `field` (**required**): The name of a JSON column in the collection, or a relational path leading to one.
 - `path` (**required**): A dot-and-bracket notation path used to extract a specific value from within the JSON document.
 
-::callout{icon="material-symbols:info-outline" color="info"}
+::callout{icon="i-lucide-info" color="info"}
 In GraphQL, each `json` type field exposes a `json(path: String!)` sub-field within `{fieldName}_func` which should be used instead. The return type is `JSON`, which can be a scalar, object, or array.
 ::
 
-::callout{icon="material-symbols:info-outline" color="info"}
+::callout{icon="i-lucide-info" color="info"}
 The SDK supports a type safe `json(field, path)` expression within its `fields` array, see [SDK Type Safety](#sdk-type-safety) for more deatils.
 ::
 
@@ -100,7 +100,7 @@ Path segments are normalized by replacing special characters (e.g. `[`, `]`, `.`
 | `json(metadata, settings.priority)` | `metadata_settings_priority_json` |
 | `json(data, items[0].name)`         | `data_items_0_name_json`          |
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 In GraphQL, the extracted value is returned under `{fieldName}_func.json`. When requesting multiple paths for the same field, use GraphQL field aliases to distinguish them.
 ::
 
@@ -250,7 +250,7 @@ Response:
 
 When the path points to an object or array rather than a scalar, the full value is returned as parsed JSON.
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 
 **Non-Scalar Paths in Sort and Filter**
 Sorting or filtering by a path that resolves to an object or array can produce unexpected results. The database compares the serialized form, which depends on dialect-specific JSON ordering and formatting. Use paths that resolve to a scalar value (string, number, boolean) for reliable sorting and filtering.
@@ -572,7 +572,7 @@ Response:
 - **Relational depth** (`MAX_RELATIONAL_DEPTH`, default `10`): Limits how deeply relational selections can go in the `field` argument. For example, `json(category_id.metadata, a.b.c.d.e)` has a relational depth of 2 (`category_id` + `metadata`), regardless of the JSON path length.
 - **Path depth** (`MAX_JSON_QUERY_DEPTH`, default `10`): Limits the number of segments allowed in the `path` argument. For example, `json(category_id.metadata, a[0].c.d.e.f.g.h.i.j)` has a path depth of 10 and is allowed by default; adding one more segment would exceed the limit.
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 Exceeding either of these limits will result in an error.
 ::
 
@@ -608,7 +608,7 @@ readItems("articles", { fields: ["json(title, color)"] });
 
 The alias rule follows the expected REST [response format](#response-format). For a relational field, the extracted alias appears typed on the related item (e.g. `items[0].category_id.metadata_color_json`).
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Alias Typing Requires Literal Field Arrays** Alias typing only works when the `fields` array is an inline literal or typed `as const`. If the array is built dynamically at runtime, TypeScript widens it to `string[]` and the aliases are not present in the inferred return type.
 ::
 
@@ -616,7 +616,7 @@ The alias rule follows the expected REST [response format](#response-format). Fo
 
 The `_json` operator filters items by values inside a JSON field. It accepts an object mapping JSON paths to standard filter operators, letting you compare specific keys or array elements without loading the full document.
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 `_json` is only valid on `json` typed fields.
 ::
 
diff --git a/content/guides/05.files/1.upload.md b/content/guides/05.files/1.upload.md
index 1cef5a77..862f683c 100644
--- a/content/guides/05.files/1.upload.md
+++ b/content/guides/05.files/1.upload.md
@@ -6,7 +6,7 @@ description: Learn to upload files to Directus via both the data studio or API.
 
 Multiple files can be uploaded simultaneously via both the data studio and via the API. File uploads are not limited to just images, they can be any kind of file.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 If you allow uploads from the public role or unauthenticated users, review [Restrict Public File Uploads](/guides/security/best-practices#restrict-public-file-uploads) first.
 ::
 
@@ -60,6 +60,6 @@ const result = await directus.request(uploadFiles(formData));
 The file contents has to be provided in a property called `file`. All other properties of
 the file object can be provided as well, except `filename_disk` and `filename_download`.
 
-::callout{icon="material-symbols:info-outline" color="info"}
+::callout{icon="i-lucide-info" color="info"}
 If `storage` is not specified, it defaults to the first location listed in [`STORAGE_LOCATIONS`](/configuration/files#storage-locations).
 ::
diff --git a/content/guides/05.files/3.manage.md b/content/guides/05.files/3.manage.md
index e90ebb62..dafe5ad3 100644
--- a/content/guides/05.files/3.manage.md
+++ b/content/guides/05.files/3.manage.md
@@ -21,7 +21,7 @@ Notice the following buttons in the header:
 - :icon{name="material-symbols:drive-file-move-outline"} – Moves selected file(s) to another folder.
 - :icon{name="material-symbols:delete-outline"} – Permanently removes the file and its metadata. This action is permanent and cannot be undone.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Deleting Files Linked to Items**
 By default, Directus will not allow you to delete a file until you remove it from any and all related items. However,
 this behavior can be reconfigured so that files automatically update when the image is deleted by setting the relational
@@ -66,12 +66,12 @@ Rotate, crop, flip, adjust aspect ratios, or set focal points of an image.
 2. Click the :icon{name="material-symbols:tune"} button in the top right to open the image editor.
 3. Make your changes and click :icon{name="material-symbols:check"} in the top right to save. You can choose to overwrite the original file or save as a new file.
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 **Irreversible Change**
 Saving overwrites the original file on disk. This can't be reversed. Use **Save as New File** to preserve the original.
 ::
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Save as New File** requires create permissions on `directus_files`. The new file inherits the filename and folder of the original, but not manually configured metadata such as title or focal point.
 ::
 
diff --git a/content/guides/05.files/4.access.md b/content/guides/05.files/4.access.md
index 3f513e21..c1f3f964 100644
--- a/content/guides/05.files/4.access.md
+++ b/content/guides/05.files/4.access.md
@@ -31,7 +31,7 @@ https://example.com/assets/1ac73658-8b62-4dea-b6da-529fbc9d01a4/directus-logo.pn
 
 This optional filename is also used in the `Content-Disposition` header when the `?download` query parameter is used.
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 **Direct File Access**
 While you may _technically_ be able to expose your storage adapters root file system and access your raw files through
 there, it is recommended that you always use the Directus API. This is the only way that you can take advantage of file
diff --git a/content/guides/05.files/5.transform.md b/content/guides/05.files/5.transform.md
index d951a8ac..7f1db594 100644
--- a/content/guides/05.files/5.transform.md
+++ b/content/guides/05.files/5.transform.md
@@ -21,7 +21,7 @@ Directus allows you to transform assets using URL query parameters. You can pass
 | `format`             | What file format to return the image in. One of auto, jpg, png, webp, tiff auto default if omitted, Will try to format it in webp or avif if the browser supports it, otherwise it will fallback to jpg.                                                                                                                                                                                                                                                                         |
 | `fit`                | How the image should fit into the provided dimensions, values including: <ul><li>**`cover` (default if omitted)**: try to fit the image into the dimensions while preserving the aspect ratio</li><li>**`contain`**: contain within the dimensions while using "letterboxing" to fill the rest</li><li>**`inside`**: Resize to be as large as possible within the dimensions</li> <li>**`outside`**: Resize to be as small as possible within or beyond the dimensions</li></ul> |
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Focal Points**  
 When transforming an image with `width` and/or `height` parameters, the focal point is taken from the `focal_point_x` and `focal_point_y` coordinate values stored in the file object, cropping the image around these. This defaults to the image's centre.
 ::
@@ -68,7 +68,7 @@ Directus allows full access to the [Sharp API](https://sharp.pixelplumbing.com/)
 
 This is done using the `transforms` parameter, whose value consists of a two dimensional array. Each sub-array contains the name of the operation, followed by its arguments: `[["operation1", …arguments], ["operation2", …otherArguments]]`.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **REST Values**  
 When calling the REST API, datatypes like booleans need to be passed as strings.
 ::
diff --git a/content/guides/06.flows/3.triggers.md b/content/guides/06.flows/3.triggers.md
index 6b77addb..97d2d492 100644
--- a/content/guides/06.flows/3.triggers.md
+++ b/content/guides/06.flows/3.triggers.md
@@ -30,7 +30,7 @@ Any data generated by the event will be nested in the `$trigger`.
   - **All Data** — Replaces event `payload` with the entire data chain.
   - **Other** — Replaces event `payload` with value from an `<operationKey>`.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Events with Multiple Items**  
 If you create items in a single request, the flow will trigger once for each item. If you create three items,
 the flow runs three separate times. On each run, just one item will be in the payload.
@@ -42,17 +42,17 @@ A filter will halt the event transaction, copy the event `payload` into the flow
 optionally replace the original `payload` by configuring the response body, then resume the event's transaction to
 the database.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 If you're filtering on the `items.created` scope, the item itself will not have an ID, as it hasn't been created yet.
 ::
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Response Body**  
 If no **Response Body** is configured, the original payload will not be modified, but you'd still have the ability to
 cancel the transaction.
 ::
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Cancelling Transactions**  
 To completely cancel a transaction, you'll need to throw an error within a
 [script operation](/guides/flows/operations) or end the Flow on a [failure path](/guides/flows).
@@ -79,12 +79,12 @@ trigger panel.
 - **Cache** — Choose whether responses to `GET` requests should be stored and served from cache or the cache should be
   bypassed.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Response Body**  
 If no data is defined in **Response Body**, the response is empty.
 ::
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Asynchronous**  
 If **Asynchronous** is enabled, the Flows system will immediately resolve/respond to the request without returning a
 **Response Body**, which frees up the API immediately. If it is disabled, the Flows system will wait for the Flow to
@@ -126,7 +126,7 @@ This trigger type executes by the trigger Flow operation, allowing chaining Flow
   - **All Data** — Responds with the entire data chain.
   - **Other** — Responds with value from an `<operationKey>`.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Flows for-loops**  
 If you pass an array to this trigger, it will run once for each item in the array.
 ::
diff --git a/content/guides/06.flows/4.operations.md b/content/guides/06.flows/4.operations.md
index 2cb4c945..921a1221 100644
--- a/content/guides/06.flows/4.operations.md
+++ b/content/guides/06.flows/4.operations.md
@@ -25,13 +25,13 @@ This operation does not generate data. If the filter rule is configured properly
 `operationKey`, regardless of if the condition was met or not. However, if the filter rule is misconfigured, it will
 append an array containing an object you can use to help debug the misconfiguration.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 All fields referenced in condition rules must exist in the data being validated. If a field is missing from the payload
 _(rather than being explicitly `null`)_, the condition takes the reject path regardless of the operator. To handle
 fields that may be absent, use the inverse operator (such as `_nnull`) and place your logic on the reject path instead.
 ::
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 When using an [Event Hook](/guides/flows/triggers) configured to be "Filter (Blocking)", if your flow ends
 with a condition that executes with a `reject` path, it will cancel your database transaction.
 ::
@@ -90,18 +90,18 @@ The returned value will be appended under the `myScript` operation key.
 }
 ```
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 Make sure your `return` value is valid JSON.
 ::
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Throwing Errors**
 If you throw an error in a Run Script operation, it will immediately break your flow chain and stop execution of
 subsequent flows. If you used a ["Blocking" Event hook](/guides/flows/triggers), throwing an error will cancel
 the original event transaction to the database.
 ::
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Node Modules**
 To prevent unauthorized access to the underlying server, node modules can't be used in the Run Script operation. If
 you require a third party library for your custom script, you can create a custom
@@ -125,7 +125,7 @@ This operation creates item(s) in a collection.
 
 An array with the ID(s) of all items created will be appended under its `<operationKey>`.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 To learn about payload requirements when creating an item, see [API Reference > Items](/api/items).
 ::
 
@@ -170,7 +170,7 @@ This operation updates item(s) in a collection. You may select item(s) to update
 
 An array containing all items updated will be appended under its `<operationKey>`.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 To learn about `payload` requirements when updating an item, see [our Items API reference](/api/items).
 ::
 
@@ -236,7 +236,7 @@ append a `null` value on the `operationKey`.
 
 This operation sends emails off to one or more addresses specified.
 
-::callout{icon="material-symbols:warning-rounded" color="warning" to="/configuration/email"}
+::callout{icon="i-lucide-triangle-alert" color="warning" to="/configuration/email"}
 If you are self-hosting Directus, then you need to make sure that email capabilities are correctly configured. Read more on this.
 ::
 
@@ -260,12 +260,12 @@ This operation does not generate data for the data chain. It will append a `null
 
 ### More Details
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Batch Emails**
 You can input an array of emails in the `To` input option to send off multiple emails.
 ::
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 If you are testing out this operation from `localhost:8080`, be sure to check your spam box, because your email provider
 may send it there automatically.
 ::
@@ -291,7 +291,7 @@ This operation does not generate data. It will append a `null` value on its `ope
 
 ### More Details
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Batch Notifications**
 You can input an array of UUIDs in the `To` input option to send off multiple notifications.
 ::
@@ -343,7 +343,7 @@ This operation throws a custom error to halt flow execution with a specific erro
 
 This operation does not generate data. It immediately throws an error that halts flow execution.
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 When using an [Event Hook](/guides/flows/triggers) configured to be "Filter (Blocking)", if your flow ends with a
 Throw Error operation, it will cancel your database transaction.
 ::
@@ -388,7 +388,7 @@ If you've configured a response body in the trigger of the other flow, this will
 
 ### More Details
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Flows for-loops**
 If you pass an array to the other flow, the other flow will run once for each item in the array.
 ::
diff --git a/content/guides/06.flows/index.md b/content/guides/06.flows/index.md
index 62935d94..589b5c62 100644
--- a/content/guides/06.flows/index.md
+++ b/content/guides/06.flows/index.md
@@ -6,7 +6,7 @@ description: Flows enable custom, event-driven data processing and task automati
 
 Flows enable custom, event-driven data processing and task automation within Directus. Each flow is composed of one trigger, a series of operations, and a data chain that is passed between each step.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 Flows run arbitrary code with elevated accountability. See [Security Best Practices](/guides/security/best-practices#flows) for guidance on restricting who can create, edit, or trigger them.
 ::
 
@@ -44,12 +44,12 @@ because `$accountability` is generated by the trigger.
   _(These configuration options are not stored on the data chain)_.
 - **Payload** — Displays the data appended under this `<operationKey>`.
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 **Logs are stored in the database**
 Flows configured to tracks will store this information in the database, which may require occasionally deleting.
 ::
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Where is `$last`?**
 `$last` constantly updates to store the data of the most recently executed operation. Since the log shows the results of the entire flow, `$last` would only be the final
 operation in the flow.
diff --git a/content/guides/07.realtime/2.subscriptions.md b/content/guides/07.realtime/2.subscriptions.md
index 1b2a8778..a76a1594 100644
--- a/content/guides/07.realtime/2.subscriptions.md
+++ b/content/guides/07.realtime/2.subscriptions.md
@@ -79,7 +79,7 @@ should be returned. -->
 
 The `uid` property serves as a unique identifier included in the message payload. When multiple subscriptions are added to the same collection, the `uid` helps to distinguish the responses of these subscriptions watching different filters or events. A unique identifier will be generated on the server if not explicitly provided when subscribing.
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 When manually setting the `uid` property its value needs to be unique per WebSocket connection. Any subsequent duplicate `uid` subscriptions will be ignored.
 ::
 
diff --git a/content/guides/07.realtime/3.actions.md b/content/guides/07.realtime/3.actions.md
index 80bad8e2..ba6234b3 100644
--- a/content/guides/07.realtime/3.actions.md
+++ b/content/guides/07.realtime/3.actions.md
@@ -6,7 +6,7 @@ description: Learn to execute CRUD actions via websockets.
 
 You can execute CRUD actions over Directus' WebSockets interface.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **GraphQL**  
 The GraphQL Subscriptions specification does not support CRUD actions. This guide is only suitable for WebSockets
 connections not using GraphQL.
diff --git a/content/guides/07.realtime/4.custom-handlers.md b/content/guides/07.realtime/4.custom-handlers.md
index b233b7b1..6e88963d 100644
--- a/content/guides/07.realtime/4.custom-handlers.md
+++ b/content/guides/07.realtime/4.custom-handlers.md
@@ -6,7 +6,7 @@ description: Build custom WebSocket message handlers, push messages to connected
 
 The other pages in this section cover client-side WebSocket usage - authenticating, subscribing to changes, and performing CRUD actions. This page covers the server side: using hook extensions to react to connections, handle custom message types, and push data to clients.
 
-::callout{icon="material-symbols:menu-book-outline" color="primary" to="/guides/extensions/api-extensions/hooks"}
+::callout{icon="i-lucide-book-open" color="primary" to="/guides/extensions/api-extensions/hooks"}
 See the hooks reference for a full list of available WebSocket events.
 ::
 
@@ -79,7 +79,7 @@ export default ({ filter }) => {
 };
 ```
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 Filters are blocking - slow filter logic will delay message processing for the client. Keep filters fast and avoid expensive operations like database queries where possible.
 ::
 
@@ -120,7 +120,7 @@ for (const client of wsService.clients()) {
 }
 ```
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 `WebSocketService` only provides access to REST WebSocket clients. GraphQL subscription and logs streaming clients are managed by separate controllers and are not accessible through this service.
 ::
 
diff --git a/content/guides/08.insights/1.overview.md b/content/guides/08.insights/1.overview.md
index 5dfc077d..06b4a090 100644
--- a/content/guides/08.insights/1.overview.md
+++ b/content/guides/08.insights/1.overview.md
@@ -16,7 +16,7 @@ Insights is a module in Directus that allows rapid, no-code build-out of analyti
 
 The insights module is made up of one or more dashboards, which provide a drag-and-drop canvas where you can create and arrange different [panels](/guides/insights/panels) to easily build out customized analytics. The dashboard area automatically expands as you create additional panels. 
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Auto Refresh**  
 The auto refresh menu in the sidebar lets you select an interval to refresh dashboard data.
 ::
diff --git a/content/guides/08.insights/2.panels.md b/content/guides/08.insights/2.panels.md
index 96707720..e8649cf9 100644
--- a/content/guides/08.insights/2.panels.md
+++ b/content/guides/08.insights/2.panels.md
@@ -73,13 +73,13 @@ Aggregate functions take a list of values and returns one single value.
 - **First** – Selects the first item out of all items in a field.
 - **Last** – Selects the last item out of all items in a field.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **First, Last, Minimum and Maximum**
 First, last, minimum and maximum are not aggregates in the purely mathematical sense of the word. However, they are
 placed in this panel option because they return one single item.
 ::
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Why are some Fields grayed out?**
 Certain fields cannot be used with certain aggregate functions. For example, you cannot use the average function on
 fields that store text, because text cannot be averaged. When there is a conflict between panel options, fields will be
@@ -117,12 +117,12 @@ The time series panel allows you to build graphs and see how data changes over t
 - **Show X-axis** – Toggles display of time along X-axis.
 - **Show Y-axis** – Toggles display of numeric values along Y-axis.
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 **Time-oriented metrics only**
 In order to use this panel, your collection will need a datetime field.
 ::
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Custom Date Range**
 Note that `Past` is not prefixed to a custom range as it is on the default ranges. When selecting "Other",
 type in `3 years`, `1 month`, `2 weeks`, `5 days`, etc.
@@ -152,7 +152,7 @@ Panels:
 You will notice that the global variable panel is an interface in the Dashboard, allowing you to modify the value of
 this variable. If you change its value, all panels referencing the variable will update automatically.
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 **Must be Valid Data Type**
 Your variable's data type will need to be a valid match to wherever you are using it. For example, do not apply a string
 or JSON variable in a place that requires datetime data.
@@ -181,12 +181,12 @@ other insights panels:
 You will notice that the global relational variable panel is an interface in the Dashboard, allowing you to modify the
 value of this variable. If you change its value, all panels referencing the variable will update automatically.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 If you have multiple global relational variables in your dashboard and want to include them in a filter, use the 'one of' comparisons. For example, if you have two global variables `A` and `B` referring to `post` IDs, you can use filter `Name is one of {{A}}, {{B}}`.
 ::
 
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 **Must be Valid Data Type**
 Your variable's data type will need to be a valid match to wherever you are using it. For example, do not apply a string
 or JSON variable in a place that requires datetime data.
diff --git a/content/guides/09.extensions/0.overview.md b/content/guides/09.extensions/0.overview.md
index d4040c64..f0890e05 100644
--- a/content/guides/09.extensions/0.overview.md
+++ b/content/guides/09.extensions/0.overview.md
@@ -12,7 +12,7 @@ Directus has been built to be extensible - both allowing for powerful enhancemen
 
 Extensions in Directus run within the same environment as the main application, allowing them to leverage existing access to underlying [services](/guides/extensions/api-extensions/services) and [UI components](/guides/extensions/app-extensions/ui-library).
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 Extensions execute code inside the Directus server. See [Security Best Practices](/guides/security/best-practices#extensions) for guidance on restricting extension management and Marketplace trust settings.
 ::
 
diff --git a/content/guides/09.extensions/1.quickstart.md b/content/guides/09.extensions/1.quickstart.md
index 81a5aae5..a0be2a21 100644
--- a/content/guides/09.extensions/1.quickstart.md
+++ b/content/guides/09.extensions/1.quickstart.md
@@ -19,7 +19,7 @@ Add the following to the `environment` section of your `docker-compose.yml` file
 EXTENSIONS_AUTO_RELOAD: true
 ```
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Restarting Directus**
 When changing the `docker-compose.yml` file, you will need to restart Directus by restarting the Docker container.
 ::
diff --git a/content/guides/09.extensions/2.api-extensions/1.hooks.md b/content/guides/09.extensions/2.api-extensions/1.hooks.md
index e8d8c92a..da92146e 100644
--- a/content/guides/09.extensions/2.api-extensions/1.hooks.md
+++ b/content/guides/09.extensions/2.api-extensions/1.hooks.md
@@ -115,7 +115,7 @@ The context object has the following properties:
 
 :partial{content="extension-hook-footguns"}
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 **Filters are Blocking**
 Filters can impact performance if not implemented carefully, especially on `read` events, which can lead to many database reads.
 ::
@@ -184,7 +184,7 @@ The context object has the following properties:
 | `<system-collection>.update`   | `payload`, `keys`, `collection`                     |
 | `<system-collection>.delete`   | `keys`, `collection`                                |
 
-::callout{icon="material-symbols:menu-book-outline" color="primary" to="/guides/realtime/custom-handlers"}
+::callout{icon="i-lucide-book-open" color="primary" to="/guides/realtime/custom-handlers"}
 Learn how to build custom WebSocket handlers with practical examples using these hooks.
 ::
 
@@ -276,7 +276,7 @@ import type { SandboxHookRegisterContext } from "directus:api";
 export default ({ filter, action }: SandboxHookRegisterContext) => {};
 ```
 
-::callout{icon="material-symbols:menu-book-outline" color="primary" to="/guides/extensions/api-extensions/sandbox"}
+::callout{icon="i-lucide-book-open" color="primary" to="/guides/extensions/api-extensions/sandbox"}
 Learn more about the Directus sandbox for API extensions.
 ::
 
diff --git a/content/guides/09.extensions/2.api-extensions/2.endpoints.md b/content/guides/09.extensions/2.api-extensions/2.endpoints.md
index b5f7c772..875b7aae 100644
--- a/content/guides/09.extensions/2.api-extensions/2.endpoints.md
+++ b/content/guides/09.extensions/2.api-extensions/2.endpoints.md
@@ -84,7 +84,7 @@ export default (router: SandboxEndpointRouter) => {
 };
 ```
 
-::callout{icon="material-symbols:menu-book-outline" color="primary" to="/guides/extensions/api-extensions/sandbox"}
+::callout{icon="i-lucide-book-open" color="primary" to="/guides/extensions/api-extensions/sandbox"}
 Learn more about the Directus sandbox for API extensions.
 ::
 
diff --git a/content/guides/09.extensions/2.api-extensions/3.operations.md b/content/guides/09.extensions/2.api-extensions/3.operations.md
index 393d5cbf..d47d89a0 100644
--- a/content/guides/09.extensions/2.api-extensions/3.operations.md
+++ b/content/guides/09.extensions/2.api-extensions/3.operations.md
@@ -75,7 +75,7 @@ export default {
 };
 ```
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 The `id` in both the app and the api entrypoint must be the same.
 ::
 
@@ -116,7 +116,7 @@ export default operation;
 
 The `handler` function receives the `options` object of the current flow.
 
-::callout{icon="material-symbols:menu-book-outline" color="primary" to="/guides/extensions/api-extensions/sandbox"}
+::callout{icon="i-lucide-book-open" color="primary" to="/guides/extensions/api-extensions/sandbox"}
 Learn more about the Directus sandbox for API extensions.
 ::
 
diff --git a/content/guides/09.extensions/2.api-extensions/4.services.md b/content/guides/09.extensions/2.api-extensions/4.services.md
index c9b775a0..c47e1b9a 100644
--- a/content/guides/09.extensions/2.api-extensions/4.services.md
+++ b/content/guides/09.extensions/2.api-extensions/4.services.md
@@ -15,13 +15,13 @@ When initializing services, you will need the following:
 | `accountability` | Accountability object, used for access control. Omission or `null` will use administrator permissions. |
 
 
-::callout{icon="material-symbols:link" to="https://github.com/directus/directus/tree/main/api/src/services"}
+::callout{icon="i-lucide-link" to="https://github.com/directus/directus/tree/main/api/src/services"}
 See a complete list of all services available by looking at the Directus source code.
 ::
 
 This page uses endpoints to demonstrate how to use services, but they can also be used in other API extension types.
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 **Infinite Recursion**
 If you are listening to an event and your handler is emitting the same event, you will need to pass `{ emitEvents: false }` in order to prevent infinite recursion. 
 ::
@@ -73,7 +73,7 @@ const data = await itemsService.updateOne('item_id', {
 const data = await itemsService.deleteOne('item_id');
 ```
 
-::callout{icon="material-symbols:link" to="https://github.com/directus/directus/blob/main/api/src/services/items.ts"}
+::callout{icon="i-lucide-link" to="https://github.com/directus/directus/blob/main/api/src/services/items.ts"}
 See a complete list of all methods in the `ItemsService` by looking at the Directus source code.
 ::
 
@@ -128,7 +128,7 @@ const data = await collectionsService.updateOne('collection_name', {
 const data = await collectionsService.deleteOne('collection_name');
 ```
 
-::callout{icon="material-symbols:link" to="https://github.com/directus/directus/blob/main/api/src/services/collections.ts"}
+::callout{icon="i-lucide-link" to="https://github.com/directus/directus/blob/main/api/src/services/collections.ts"}
 See a complete list of all methods in the `CollectionsService` by looking at the Directus source code.
 ::
 
@@ -182,7 +182,7 @@ const data = await fieldsService.updateField('collection_name', {
 });
 ```
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 You cannot update the field name via Directus after creating the field.
 ::
 
@@ -246,7 +246,7 @@ const data = await relationsService.updateOne(
 const data = await relationsService.deleteOne('collection_name', 'field_name' );
 ```
 
-::callout{icon="material-symbols:link" to="https://github.com/directus/directus/blob/main/api/src/services/relations.ts"}
+::callout{icon="i-lucide-link" to="https://github.com/directus/directus/blob/main/api/src/services/relations.ts"}
 See a complete list of all methods in the `RelationsService` by looking at the Directus source code.
 ::
 
@@ -316,6 +316,6 @@ const data = await filesService.updateOne('file_id', { title: 'Random' });
 const data = await filesService.deleteOne('file_id');
 ```
 
-::callout{icon="material-symbols:link" to="https://github.com/directus/directus/blob/main/api/src/services/files.ts"}
+::callout{icon="i-lucide-link" to="https://github.com/directus/directus/blob/main/api/src/services/files.ts"}
 See a complete list of all methods in the `FilesService` by looking at the Directus source code.
 ::
diff --git a/content/guides/09.extensions/3.app-extensions/5.modules.md b/content/guides/09.extensions/3.app-extensions/5.modules.md
index b6464d64..95bb59b0 100644
--- a/content/guides/09.extensions/3.app-extensions/5.modules.md
+++ b/content/guides/09.extensions/3.app-extensions/5.modules.md
@@ -10,7 +10,7 @@ Modules are top-level areas of the Data Studio, navigated to from the left-hand
 
 The Data Studio splits up functionality into modules - the content module, the files module, the user module, the insights module, and the settings module. Extensions can add new modules to the Data Studio.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Enable the Module**  
 For the module to appear in the module bar, the extension has to be enabled in your main project settings.
 ::
diff --git a/content/guides/09.extensions/3.app-extensions/6.themes.md b/content/guides/09.extensions/3.app-extensions/6.themes.md
index 6a47cb4e..84596190 100644
--- a/content/guides/09.extensions/3.app-extensions/6.themes.md
+++ b/content/guides/09.extensions/3.app-extensions/6.themes.md
@@ -62,7 +62,7 @@ Every rule is automatically inserted in the app's root element as a CSS variable
 components. For example, the JSON path `navigation.modules.button.foregroundActive` will be available as
 `var(--theme--navigation--modules--button--foreground-active)`.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Property Names**
 Nested objects are separated by `--`, and camelCase values are transformed to hyphen-case (`foregroundActive` becomes `foreground-active`).
 ::
diff --git a/content/guides/09.extensions/3.app-extensions/7.ui-library.md b/content/guides/09.extensions/3.app-extensions/7.ui-library.md
index 25ab46ec..1d360916 100644
--- a/content/guides/09.extensions/3.app-extensions/7.ui-library.md
+++ b/content/guides/09.extensions/3.app-extensions/7.ui-library.md
@@ -40,7 +40,7 @@ For example, to adjust the text color of a button on hover:
 </style>
 ```
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Explore Component CSS Variables**  
 Refer to the full list of component based CSS variables [in our source code](https://github.com/directus/directus/tree/main/app/src/components).
 ::
@@ -53,7 +53,7 @@ own components using shared styling. Directus exposes several CSS variables for
 Examples of CSS variables include `--theme--border-normal`, `--theme--foreground-normal` `--theme--purple`, `--theme--module-background`, and
 `--theme--overlay-color`.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Explore Light and Dark Theme CSS Variables**  
 Refer to our [source code](https://github.com/directus/directus/tree/main/app/src/styles/themes) for a full list of CSS
 variables.
diff --git a/content/guides/09.extensions/5.marketplace/0.index.md b/content/guides/09.extensions/5.marketplace/0.index.md
index 26ec3376..ad623647 100644
--- a/content/guides/09.extensions/5.marketplace/0.index.md
+++ b/content/guides/09.extensions/5.marketplace/0.index.md
@@ -12,7 +12,7 @@ The Directus Marketplace provides a way for users to install extensions in their
 
 The Marketplace is accessible from your project settings. Here, you can search, filter, and sort the available extensions to navigate to the extension detail page where you can install extensions.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Compatibility Warnings**
 Extension authors must specify which versions the extensions have been tested to work with. If authors don't update this value, we may show an incompatibility warning. This does not mean that an extension does not work, but that the author has not explicitly stated that it does.
 ::
@@ -25,6 +25,6 @@ The currently-installed extensions list is accessible from your project settings
 
 The Directus Marketplace uses the Directus Extensions Registry to publish and install extensions. While in beta, all extensions published to npm are available via the registry.
 
-::callout{icon="material-symbols:menu-book-outline" color="primary" to="/guides/extensions/marketplace/publishing"}
+::callout{icon="i-lucide-book-open" color="primary" to="/guides/extensions/marketplace/publishing"}
 Learn more about publishing extensions to the Directus Marketplace.
 ::
diff --git a/content/guides/09.extensions/5.marketplace/1.publishing.md b/content/guides/09.extensions/5.marketplace/1.publishing.md
index 02ad7cba..1218e0aa 100644
--- a/content/guides/09.extensions/5.marketplace/1.publishing.md
+++ b/content/guides/09.extensions/5.marketplace/1.publishing.md
@@ -69,7 +69,7 @@ If your email address is public on GitHub and matches your npm account, the Dire
 
 The Directus Marketplace will allow installation of all [App extension types](/guides/extensions/app-extensions) and sandboxed [API extension types](/guides/extensions/api-extensions).
 
-::callout{icon="material-symbols:menu-book-outline" color="primary" to="/guides/extensions/api-extensions/sandbox"}
+::callout{icon="i-lucide-book-open" color="primary" to="/guides/extensions/api-extensions/sandbox"}
 Learn more about sandboxed API extensions.
 ::
 
diff --git a/content/guides/09.extensions/6.cli.md b/content/guides/09.extensions/6.cli.md
index 627945db..8ad4e27a 100644
--- a/content/guides/09.extensions/6.cli.md
+++ b/content/guides/09.extensions/6.cli.md
@@ -47,7 +47,7 @@ If you prefer to scaffold your extension manually, you can use the `directus-ext
 
 Internally, the CLI uses Rollup to bundle your extension to a single entrypoint.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 **Watch**<br/>
 
@@ -55,7 +55,7 @@ The CLI supports rebuilding extensions whenever a file has changed by using the
 
 ::
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 **Automatically Reload Extensions**<br/>
 
@@ -81,7 +81,7 @@ The following validations are run:
 | `license`           | Check that the license file is present.       |
 | `readme`            | Check that the README file is present.        |
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 **Checking Specific Validations**<br/>
 
@@ -91,7 +91,7 @@ npx create-directus-extension@latest -c <VALIDATION_NAME>
 
 ::
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 **Verbose Report**<br/>
 
diff --git a/content/guides/11.ai/0.index.md b/content/guides/11.ai/0.index.md
index 66c61a82..ca6c1972 100644
--- a/content/guides/11.ai/0.index.md
+++ b/content/guides/11.ai/0.index.md
@@ -14,7 +14,7 @@ The built-in AI Assistant provides a conversational assistant directly within th
 - No additional client setup required
 - Best for content editors, quick tasks, and users who live in Directus
 
-::card{icon="material-symbols:chat-outline" title="AI Assistant" to="/guides/ai/assistant"}
+::card{icon="i-lucide-message-circle" title="AI Assistant" to="/guides/ai/assistant"}
 Learn how to configure and use the built-in AI assistant.
 ::
 
@@ -26,7 +26,7 @@ The Model Context Protocol (MCP) server lets you connect external AI tools to Di
 - Bring Directus capabilities to where you already work
 - Best for developers, power users, and complex workflows
 
-::card{icon="material-symbols:hub-outline" title="MCP Server" to="/guides/ai/mcp"}
+::card{icon="i-lucide-network" title="MCP Server" to="/guides/ai/mcp"}
 Connect your preferred AI tools to Directus.
 ::
 
@@ -38,6 +38,6 @@ AI Translations let you translate content fields into multiple languages directl
 - Streams translations in real time
 - Supports glossaries and style guides for consistent output
 
-::card{icon="material-symbols:translate" title="AI Translations" to="/guides/ai/translations"}
+::card{icon="i-lucide-languages" title="AI Translations" to="/guides/ai/translations"}
 Set up and use AI-powered content translations.
 ::
diff --git a/content/guides/11.ai/1.assistant/0.index.md b/content/guides/11.ai/1.assistant/0.index.md
index a42af9df..989279ac 100644
--- a/content/guides/11.ai/1.assistant/0.index.md
+++ b/content/guides/11.ai/1.assistant/0.index.md
@@ -10,7 +10,7 @@ Directus AI Assistant is an embedded conversational assistant that helps you int
   <source src="/docs/video/ai-chat-blog-post.mp4" type="video/mp4" />
 </video>
 
-::callout{icon="material-symbols:info-outline" color="info"}
+::callout{icon="i-lucide-info" color="info"}
 **AI Assistant requires an API key from a supported provider.** Administrators [configure API keys](/guides/ai/assistant/setup) for OpenAI, Anthropic, Google, or an OpenAI-compatible endpoint in Settings → AI.
 ::
 
@@ -76,7 +76,7 @@ Have feedback or feature requests? [Submit on our roadmap](https://roadmap.direc
 - **File Attachments**: Upload files or select from your library. Supports images, PDFs, text, audio, and video up to 50MB.
 - **Streaming Responses**: Responses stream in real-time. Stop or retry at any time.
 
-::callout{icon="material-symbols:warning-outline" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 **Conversations are stored in your browser only.** They are not saved to the server or shared between devices. Closing your browser or clearing localStorage will delete your conversation history.
 ::
 
@@ -86,23 +86,23 @@ Have feedback or feature requests? [Submit on our roadmap](https://roadmap.direc
 
 ::card-group
 
-:::card{title="Admin Setup" icon="material-symbols:settings-outline" to="/guides/ai/assistant/setup"}
+:::card{title="Admin Setup" icon="i-lucide-settings" to="/guides/ai/assistant/setup"}
 Configure API keys and customize the AI assistant behavior.
 :::
 
-:::card{title="User Guide" icon="material-symbols:chat-outline" to="/guides/ai/assistant/usage"}
+:::card{title="User Guide" icon="i-lucide-message-circle" to="/guides/ai/assistant/usage"}
 Learn how to use AI Assistant effectively in your daily workflow.
 :::
 
-:::card{title="Available Tools" icon="material-symbols:construction" to="/guides/ai/assistant/tools"}
+:::card{title="Available Tools" icon="i-lucide-wrench" to="/guides/ai/assistant/tools"}
 Reference of all tools the AI can use to interact with Directus.
 :::
 
-:::card{title="Tips & Best Practices" icon="material-symbols:lightbulb-outline" to="/guides/ai/assistant/tips"}
+:::card{title="Tips & Best Practices" icon="i-lucide-lightbulb" to="/guides/ai/assistant/tips"}
 Get the most out of AI Assistant with practical tips and example prompts.
 :::
 
-:::card{title="Security" icon="material-symbols:security" to="/guides/ai/assistant/security"}
+:::card{title="Security" icon="i-lucide-shield" to="/guides/ai/assistant/security"}
 Access control, data protection, and security considerations.
 :::
 
diff --git a/content/guides/11.ai/1.assistant/1.setup.md b/content/guides/11.ai/1.assistant/1.setup.md
index a7f6f0be..089a9c66 100644
--- a/content/guides/11.ai/1.assistant/1.setup.md
+++ b/content/guides/11.ai/1.assistant/1.setup.md
@@ -16,7 +16,7 @@ AI Assistant requires an API key from a supported AI provider. This page covers
 
 Alternatively, you can use an [OpenAI-compatible provider](#openai-compatible-providers) like Ollama or LM Studio for self-hosted models.
 
-::callout{icon="material-symbols:info-outline" color="info"}
+::callout{icon="i-lucide-info" color="info"}
 Note that all users of AI Assistant will share a single API key from your configured provider. Usage limits and costs will be shared across all users. See your provider's dashboard for monitoring usage details and costs.
 ::
 
@@ -36,7 +36,7 @@ OpenAI provides GPT-5 models (Nano, Mini, Standard).
 4. Give it a name like "Directus AI Assistant"
 5. Copy the key immediately - you won't be able to see it again
 
-::callout{icon="material-symbols:info-outline" color="info"}
+::callout{icon="i-lucide-info" color="info"}
 OpenAI requires a payment method and has usage-based pricing. Set spending limits in **Settings → Limits** to control costs.
 ::
 
@@ -52,7 +52,7 @@ Anthropic provides Claude models (Haiku 4.5, Sonnet 4.5, Opus 4.5).
 4. Give it a name like "Directus AI Assistant"
 5. Copy the key immediately
 
-::callout{icon="material-symbols:info-outline" color="info"}
+::callout{icon="i-lucide-info" color="info"}
 Anthropic requires a payment method and has usage-based pricing. Monitor usage in the Console dashboard.
 ::
 
@@ -68,7 +68,7 @@ Google provides Gemini models (2.5 Flash, 2.5 Pro, 3 Flash Preview, 3 Pro Previe
 4. Select or create a Google Cloud project
 5. Copy the generated API key
 
-::callout{icon="material-symbols:info-outline" color="info"}
+::callout{icon="i-lucide-info" color="info"}
 Google AI Studio offers a free tier with rate limits. For production use, consider enabling billing in Google Cloud Console to increase quotas.
 ::
 
@@ -94,7 +94,7 @@ Add your API key for one or more providers:
 - **Anthropic API Key** - Enables Claude models
 - **Google API Key** - Enables Gemini models
 
-::callout{icon="material-symbols:security" color="info"}
+::callout{icon="i-lucide-shield" color="info"}
 API keys are encrypted at rest in the database and masked in the UI.
 ::
 
@@ -120,11 +120,11 @@ Click **Save** to apply your changes. AI Assistant is now available to all users
 
 In addition to the built-in providers, Directus supports any OpenAI-compatible API endpoint. This allows you to use self-hosted models, alternative providers, or private deployments.
 
-::callout{icon="material-symbols:warning-outline" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 **For best results, use built-in cloud providers.** Local models vary significantly in their tool-calling capabilities and may produce inconsistent results. If using OpenAI-compatible providers, we recommend cloud-hosted frontier models over locally-run models on personal hardware.
 ::
 
-::callout{icon="material-symbols:info-outline" color="info"}
+::callout{icon="i-lucide-info" color="info"}
 **File attachments are not supported with OpenAI-compatible providers.** [File uploads](/guides/ai/assistant/usage#files) require a built-in provider (OpenAI, Anthropic, or Google). The file attachment buttons are hidden when an OpenAI-compatible model is selected.
 ::
 
@@ -156,7 +156,7 @@ For each model, you can specify:
 | **Supports Reasoning** | Whether the model has chain-of-thought capabilities |
 | **Provider Options** | JSON object for model-specific parameters |
 
-::callout{icon="material-symbols:info-outline" color="info"}
+::callout{icon="i-lucide-info" color="info"}
 The **Provider Options** field allows you to pass provider-specific parameters to the AI SDK. This is useful for enabling features like extended thinking or custom sampling parameters. See the [Vercel AI SDK documentation](https://sdk.vercel.ai/providers/openai-compatible) for details.
 ::
 
@@ -177,7 +177,7 @@ The **Provider Options** field allows you to pass provider-specific parameters t
 - **API Key**: `ollama` (required by the OpenAI SDK but ignored by Ollama)
 - **Models**: Add your pulled models (e.g., `gpt-oss:20b`, `gpt-oss:120b`, `qwen3:8b`)
 
-::callout{icon="material-symbols:info-outline" color="info"}
+::callout{icon="i-lucide-info" color="info"}
 You can copy an existing model to an OpenAI-compatible name if needed: `ollama cp gpt-oss:20b gpt-4`
 ::
 
@@ -200,7 +200,7 @@ See [Ollama OpenAI compatibility docs](https://docs.ollama.com/api/openai-compat
 - **API Key**: Your Azure OpenAI API key
 - **Models**: Add your deployed model names
 
-::callout{icon="material-symbols:info-outline" color="info"}
+::callout{icon="i-lucide-info" color="info"}
 The v1 API (August 2025+) no longer requires an `api-version` header. If using an older API version, add `api-version` as a custom header (e.g., `2024-10-21`).
 ::
 
@@ -305,7 +305,7 @@ Enable reusable prompts in AI Assistant by configuring a prompts collection:
 2. Find **AI Prompts Collection**
 3. Either generate a new collection or select an existing one
 
-::callout{icon="material-symbols:info-outline" color="info"}
+::callout{icon="i-lucide-info" color="info"}
 This is the same collection used by the [MCP Server](/guides/ai/mcp/prompts). Prompts created here are available in both AI Assistant and external MCP clients. This also requires MCP to be enabled.
 ::
 
@@ -313,7 +313,7 @@ For details on creating prompts with variables, see [MCP Prompts](/guides/ai/mcp
 
 ## Managing Costs
 
-::callout{icon="material-symbols:warning-outline" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 **AI Assistant uses your own AI provider API keys.** Every message and tool call costs money. Be mindful of usage, especially with larger models. You are responsible for the costs of your usage.
 ::
 
@@ -361,7 +361,7 @@ BRAINTRUST_PROJECT_NAME=my-project # optional
 
 Optionally enable `AI_TELEMETRY_RECORD_IO=true` to include full prompt inputs and AI responses in traces.
 
-::callout{icon="material-symbols:warning-outline" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 Enabling `AI_TELEMETRY_RECORD_IO` will send the full content of user messages and AI responses to your telemetry provider. Only enable this if your provider meets your data privacy requirements.
 ::
 
@@ -371,19 +371,19 @@ See the [AI Configuration](/configuration/ai#telemetry) reference for all availa
 
 ::card-group
 
-:::card{title="User Guide" icon="material-symbols:chat-outline" to="/guides/ai/assistant/usage"}
+:::card{title="User Guide" icon="i-lucide-message-circle" to="/guides/ai/assistant/usage"}
 Learn how users interact with AI Assistant.
 :::
 
-:::card{title="Available Tools" icon="material-symbols:construction" to="/guides/ai/assistant/tools"}
+:::card{title="Available Tools" icon="i-lucide-wrench" to="/guides/ai/assistant/tools"}
 See what actions the AI can perform.
 :::
 
-:::card{title="Tips & Best Practices" icon="material-symbols:lightbulb-outline" to="/guides/ai/assistant/tips"}
+:::card{title="Tips & Best Practices" icon="i-lucide-lightbulb" to="/guides/ai/assistant/tips"}
 Get the most out of AI Assistant.
 :::
 
-:::card{title="Security" icon="material-symbols:security" to="/guides/ai/assistant/security"}
+:::card{title="Security" icon="i-lucide-shield" to="/guides/ai/assistant/security"}
 Access control and data protection.
 :::
 
diff --git a/content/guides/11.ai/1.assistant/2.usage.md b/content/guides/11.ai/1.assistant/2.usage.md
index b4db4361..4101a8b3 100644
--- a/content/guides/11.ai/1.assistant/2.usage.md
+++ b/content/guides/11.ai/1.assistant/2.usage.md
@@ -49,7 +49,7 @@ Reusable prompt templates stored in your Directus instance. Prompts can include
 
 > "Write a blog post using our brand voice"
 
-::callout{icon="material-symbols:info-outline" color="info"}
+::callout{icon="i-lucide-info" color="info"}
 Prompts require MCP to be enabled and a prompts collection configured. See [Prompts Collection](/guides/ai/assistant/setup#prompts-collection) for setup.
 ::
 
@@ -65,7 +65,7 @@ When using the [Visual Editor](/guides/content/visual-editor/studio-module), you
 
 > "Translate this heading to Spanish"
 
-::callout{icon="material-symbols:lightbulb-outline" color="primary"}
+::callout{icon="i-lucide-lightbulb" color="primary"}
 Visual element context persists while navigating within the Visual Editor but clears when leaving the module.
 ::
 
@@ -97,11 +97,11 @@ You can also drag and drop files directly onto the conversation area.
 
 Maximum file size is 50MB. Files are uploaded to your AI provider when the message is sent.
 
-::callout{icon="material-symbols:info-outline" color="info"}
+::callout{icon="i-lucide-info" color="info"}
 **File attachments require a built-in provider.** OpenAI-compatible providers do not support file uploads. See [Setup](/guides/ai/assistant/setup#openai-compatible-providers) for details.
 ::
 
-::callout{icon="material-symbols:warning-outline" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 **Google file uploads expire after approximately 24 hours.** If you start a new conversation, you may need to re-upload files previously sent to Google.
 ::
 
@@ -172,7 +172,7 @@ If an error occurs, a retry button appears. Click to regenerate the last respons
 
 ## Context Limits
 
-::callout{icon="material-symbols:lightbulb-outline" color="primary"}
+::callout{icon="i-lucide-lightbulb" color="primary"}
 Start a new conversation when switching topics. The AI performs better with focused, single-topic conversations. Long conversations may have older messages dropped automatically.
 ::
 
@@ -199,15 +199,15 @@ The AI operates with your existing [Directus permissions](/guides/auth/access-co
 
 ::card-group
 
-:::card{title="Available Tools" icon="material-symbols:construction" to="/guides/ai/assistant/tools"}
+:::card{title="Available Tools" icon="i-lucide-wrench" to="/guides/ai/assistant/tools"}
 See what actions the AI can perform.
 :::
 
-:::card{title="Tips & Best Practices" icon="material-symbols:lightbulb-outline" to="/guides/ai/assistant/tips"}
+:::card{title="Tips & Best Practices" icon="i-lucide-lightbulb" to="/guides/ai/assistant/tips"}
 Get more out of AI Assistant with practical tips.
 :::
 
-:::card{title="Security" icon="material-symbols:security" to="/guides/ai/assistant/security"}
+:::card{title="Security" icon="i-lucide-shield" to="/guides/ai/assistant/security"}
 Access control and data protection.
 :::
 
diff --git a/content/guides/11.ai/1.assistant/3.tools.md b/content/guides/11.ai/1.assistant/3.tools.md
index 3cb83307..771426e8 100644
--- a/content/guides/11.ai/1.assistant/3.tools.md
+++ b/content/guides/11.ai/1.assistant/3.tools.md
@@ -7,7 +7,7 @@ headline: AI Assistant
 
 AI Assistant uses tools to perform actions on your behalf. Each tool handles a specific type of operation within Directus.
 
-::callout{icon="material-symbols:security" color="info"}
+::callout{icon="i-lucide-shield" color="info"}
 **Tools use your existing user permissions.** Users without admin access won't see Admin Only tools. If you can't access a collection or perform an action in Directus, the AI can't either.
 ::
 
@@ -25,7 +25,7 @@ These tools interact with your Directus instance via API to manage content, file
 
 ### Admin Only
 
-::callout{icon="material-symbols:warning-outline" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 Be careful when using these tools as deleting or modifying schema can result in data loss.
 ::
 
@@ -41,7 +41,7 @@ Be careful when using these tools as deleting or modifying schema can result in
 
 ## Page Context Tools
 
-::callout{icon="material-symbols:lightbulb-outline" color="primary"}
+::callout{icon="i-lucide-lightbulb" color="primary"}
 Page Context tools let the AI work directly with what's on your screen. They are only available when editing data and may not be available on all pages. Approval modes cannot be changed for Page Context tools.
 ::
 | Tool | Description |
@@ -67,7 +67,7 @@ Each tool can be configured with one of three approval modes:
 
 Tool approval settings are stored locally in your browser and are unique to you. They won't sync to your Directus instance or affect other users.
 
-::callout{icon="material-symbols:lightbulb-outline" color="primary"}
+::callout{icon="i-lucide-lightbulb" color="primary"}
 **Disable unused tools to reduce costs.** Disabled tools are not sent to the AI provider, reducing token usage. If you only manage content, disable schema and flow tools.
 ::
 
@@ -88,11 +88,11 @@ All tools default to **Ask** mode. Nothing executes without your explicit approv
 
 ::card-group
 
-:::card{title="Tips & Best Practices" icon="material-symbols:lightbulb-outline" to="/guides/ai/assistant/tips"}
+:::card{title="Tips & Best Practices" icon="i-lucide-lightbulb" to="/guides/ai/assistant/tips"}
 Get the most out of AI Assistant.
 :::
 
-:::card{title="Security" icon="material-symbols:security" to="/guides/ai/assistant/security"}
+:::card{title="Security" icon="i-lucide-shield" to="/guides/ai/assistant/security"}
 Access control and data protection.
 :::
 
diff --git a/content/guides/11.ai/1.assistant/4.tips.md b/content/guides/11.ai/1.assistant/4.tips.md
index 592eb069..0465db4b 100644
--- a/content/guides/11.ai/1.assistant/4.tips.md
+++ b/content/guides/11.ai/1.assistant/4.tips.md
@@ -126,7 +126,7 @@ Transcribe this audio recording
 
 AI Assistant requires API keys from OpenAI or Anthropic — you cannot use a ChatGPT Plus or Claude Pro subscription. API access is billed per token, so costs scale with usage. Be mindful of this, especially with larger models.
 
-::callout{icon="material-symbols:paid-outline" color="warning"}
+::callout{icon="i-lucide-circle-dollar-sign" color="warning"}
 **Disable tools you don't use.** Disabled tools are not loaded into context, reducing token usage and API costs. If you only work with content, disable schema modification tools.
 ::
 
@@ -242,11 +242,11 @@ The LLM may not always warn you about potential impacts.
 
 ::card-group
 
-:::card{title="Available Tools" icon="material-symbols:construction" to="/guides/ai/assistant/tools"}
+:::card{title="Available Tools" icon="i-lucide-wrench" to="/guides/ai/assistant/tools"}
 See what actions the AI can perform.
 :::
 
-:::card{title="Security" icon="material-symbols:security" to="/guides/ai/assistant/security"}
+:::card{title="Security" icon="i-lucide-shield" to="/guides/ai/assistant/security"}
 Access control and data protection.
 :::
 
diff --git a/content/guides/11.ai/1.assistant/5.security.md b/content/guides/11.ai/1.assistant/5.security.md
index 6d3436dc..602e0fce 100644
--- a/content/guides/11.ai/1.assistant/5.security.md
+++ b/content/guides/11.ai/1.assistant/5.security.md
@@ -30,7 +30,7 @@ Your messages, schema information, item data, and tool responses are sent to the
 - [Anthropic Privacy Policy](https://www.anthropic.com/privacy)
 - [Google Privacy Policy](https://policies.google.com/privacy)
 
-::callout{icon="material-symbols:warning-outline" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 **Be mindful of what you discuss.** Avoid sharing sensitive personal data, credentials, or confidential information in AI conversations. This includes files — do not upload documents containing sensitive data unless you trust your provider's data handling policies.
 ::
 
@@ -49,15 +49,15 @@ All tools require approval by default. Configure per-tool settings in the chat h
 
 ::card-group
 
-:::card{title="User Guide" icon="material-symbols:chat-outline" to="/guides/ai/assistant/usage"}
+:::card{title="User Guide" icon="i-lucide-message-circle" to="/guides/ai/assistant/usage"}
 Learn how to use AI Assistant effectively.
 :::
 
-:::card{title="Available Tools" icon="material-symbols:construction" to="/guides/ai/assistant/tools"}
+:::card{title="Available Tools" icon="i-lucide-wrench" to="/guides/ai/assistant/tools"}
 See what actions the AI can perform.
 :::
 
-:::card{title="Tips & Best Practices" icon="material-symbols:lightbulb-outline" to="/guides/ai/assistant/tips"}
+:::card{title="Tips & Best Practices" icon="i-lucide-lightbulb" to="/guides/ai/assistant/tips"}
 Get the most out of AI Assistant.
 :::
 
diff --git a/content/guides/11.ai/2.mcp/0.index.md b/content/guides/11.ai/2.mcp/0.index.md
index 62acb59d..783746e1 100644
--- a/content/guides/11.ai/2.mcp/0.index.md
+++ b/content/guides/11.ai/2.mcp/0.index.md
@@ -13,7 +13,7 @@ navigation:
 
 AI assistants can now directly access your Directus content using the [Model Context Protocol](https://modelcontextprotocol.io/introduction) (MCP). Instead of copying data back and forth, your AI tools connect directly to your Directus instance.
 
-::callout{icon="material-symbols:info-outline" color="info"}
+::callout{icon="i-lucide-info" color="info"}
 **MCP requires Directus v11.12+**. For older versions, use the [Local MCP alternative](/guides/ai/mcp/local-mcp).
 ::
 
@@ -28,31 +28,31 @@ AI assistants can now directly access your Directus content using the [Model Con
 
 ::card-group
 
-:::card{title="Quick Setup" icon="material-symbols:rocket-launch-outline" to="/guides/ai/mcp/installation"}
+:::card{title="Quick Setup" icon="i-lucide-rocket" to="/guides/ai/mcp/installation"}
 Enable MCP and connect your AI tools in under 5 minutes.
 :::
 
-:::card{title="See What's Possible" icon="material-symbols:bolt-outline" to="/guides/ai/mcp/use-cases"}
+:::card{title="See What's Possible" icon="i-lucide-zap" to="/guides/ai/mcp/use-cases"}
 Real examples of AI-powered content workflows that save hours of manual work.
 :::
 
-:::card{title="Available Tools" icon="material-symbols:construction" to="/guides/ai/mcp/tools"}
+:::card{title="Available Tools" icon="i-lucide-wrench" to="/guides/ai/mcp/tools"}
 Complete reference of MCP tools and their capabilities.
 :::
 
-:::card{title="Custom Prompts" icon="material-symbols:chat-outline" to="/guides/ai/mcp/prompts"}
+:::card{title="Custom Prompts" icon="i-lucide-message-circle" to="/guides/ai/mcp/prompts"}
 Create reusable prompt templates for consistent AI interactions.
 :::
 
-:::card{title="Security Guide" icon="material-symbols:security" to="/guides/ai/mcp/security"}
+:::card{title="Security Guide" icon="i-lucide-shield" to="/guides/ai/mcp/security"}
 Essential security practices for using MCP safely with your Directus data.
 :::
 
-:::card{title="Troubleshooting" icon="material-symbols:help-outline" to="/guides/ai/mcp/troubleshooting"}
+:::card{title="Troubleshooting" icon="i-lucide-circle-question-mark" to="/guides/ai/mcp/troubleshooting"}
 Common issues and solutions when setting up and using the Directus MCP server.
 :::
 
-:::card{title="Local Alternative" icon="material-symbols:dns-outline" to="/guides/ai/mcp/local-mcp"}
+:::card{title="Local Alternative" icon="i-lucide-server" to="/guides/ai/mcp/local-mcp"}
 Node.js-based MCP server for advanced setups and older Directus versions.
 :::
 
@@ -104,7 +104,7 @@ Your AI assistant operates through your existing Directus permissions - no middl
 - Complete audit trail of all changes
 - Global delete protection (disabled by default)
 
-::callout{icon="material-symbols:security" color="info"}
+::callout{icon="i-lucide-shield" color="info"}
 **Security**: For production deployments, review our comprehensive [**Security Guide**](/guides/ai/mcp/security) covering threat mitigation, compliance requirements, and enterprise security controls.
 ::
 
diff --git a/content/guides/11.ai/2.mcp/1.installation.md b/content/guides/11.ai/2.mcp/1.installation.md
index f63e5016..1b7c192d 100644
--- a/content/guides/11.ai/2.mcp/1.installation.md
+++ b/content/guides/11.ai/2.mcp/1.installation.md
@@ -7,7 +7,7 @@ headline: MCP Server
 
 Get AI assistants connected to your Directus instance in three simple steps. The MCP server is built into Directus with no additional setup required.
 
-::callout{icon="material-symbols:info-outline" color="info"}
+::callout{icon="i-lucide-info" color="info"}
 **MCP requires Directus v11.12+**. For older versions, use the [Local MCP alternative](/guides/ai/mcp/local-mcp).
 ::
 
@@ -61,7 +61,7 @@ Read the [MCP OAuth guide](/guides/ai/mcp/oauth) for the full authorization flow
 
 Static access tokens work with clients that do not support MCP OAuth. Use a dedicated Directus user when possible.
 
-::callout{icon="material-symbols:person-add-outline" color="primary" title="Create a dedicated MCP user"}
+::callout{icon="i-lucide-user-plus" color="primary" title="Create a dedicated MCP user"}
 1. Navigate to **User Directory**.
 2. Click **Create User**.
 3. Configure the user:
@@ -73,7 +73,7 @@ Static access tokens work with clients that do not support MCP OAuth. Use a dedi
 6. Copy the token, then save the user.
 ::
 
-::callout{icon="material-symbols:person-outline" color="warning" title="Use an existing user"}
+::callout{icon="i-lucide-user" color="warning" title="Use an existing user"}
 Avoid using your personal admin account for AI operations. If you must use an existing user, open that user profile, generate a token from the **Token** field, copy it, and save the user.
 ::
 
@@ -353,7 +353,7 @@ Configure your AI user's role based on what you want them to do:
 
 or add the administrator role to your MCP user.
 
-::callout{icon="material-symbols:info-outline" color="info"}
+::callout{icon="i-lucide-info" color="info"}
 **Note**: The MCP server uses your existing permissions and access policy settings. AI tools can only access what you explicitly allow - just like any other Directus user. See [Access Control](/guides/auth/access-control) for more information.
 ::
 
@@ -381,23 +381,23 @@ Your MCP server is ready! Here's what to explore:
 
 ::card-group
 
-:::card{title="See What's Possible" icon="material-symbols:bolt-outline" to="/guides/ai/mcp/use-cases"}
+:::card{title="See What's Possible" icon="i-lucide-zap" to="/guides/ai/mcp/use-cases"}
 Real examples of AI-powered content workflows that save hours of manual work.
 :::
 
-:::card{title="Available Tools" icon="material-symbols:construction" to="/guides/ai/mcp/tools"}
+:::card{title="Available Tools" icon="i-lucide-wrench" to="/guides/ai/mcp/tools"}
 Complete reference of MCP tools and their capabilities.
 :::
 
-:::card{title="Custom Prompts" icon="material-symbols:chat-outline" to="/guides/ai/mcp/prompts"}
+:::card{title="Custom Prompts" icon="i-lucide-message-circle" to="/guides/ai/mcp/prompts"}
 Create reusable prompt templates for consistent AI interactions.
 :::
 
-:::card{title="Security Guide" icon="material-symbols:security" to="/guides/ai/mcp/security"}
+:::card{title="Security Guide" icon="i-lucide-shield" to="/guides/ai/mcp/security"}
 Essential security practices for using MCP safely with your Directus data.
 :::
 
-:::card{title="Troubleshooting" icon="material-symbols:help-outline" to="/guides/ai/mcp/troubleshooting"}
+:::card{title="Troubleshooting" icon="i-lucide-circle-question-mark" to="/guides/ai/mcp/troubleshooting"}
 Common issues and solutions when setting up and using the Directus MCP server.
 :::
 
diff --git a/content/guides/11.ai/2.mcp/3.tools.md b/content/guides/11.ai/2.mcp/3.tools.md
index 6b56f162..31421b34 100644
--- a/content/guides/11.ai/2.mcp/3.tools.md
+++ b/content/guides/11.ai/2.mcp/3.tools.md
@@ -7,7 +7,7 @@ description: Learn about the tools available in the Directus remote MCP server a
 
 The Directus remote MCP server provides a set of tools that allow AI assistants to interact with your Directus instance. These tools enable various operations while respecting your existing permissions and security settings.
 
-::callout{icon="material-symbols:info-outline" color="info"}
+::callout{icon="i-lucide-info" color="info"}
 **Note**: The remote MCP server uses unified tools compared to the local MCP server. For example, it has a single `items` tool that handles all CRUD operations, while the local MCP has separate `read-items`, `create-item`, `update-item`, and `delete-item` tools.
 ::
 
@@ -36,7 +36,7 @@ The `system-prompt` tool provides the AI assistant with specialized knowledge ab
 
 This tool works like a system prompt for LLMs, but it's delivered as a tool call instead of being built into the conversation. The AI is instructed to call this tool first to load Directus-specific knowledge into the conversation context. It won't override any system prompts or instructions from your MCP client.
 
-::callout{icon="material-symbols:code" color="info" to="https://github.com/directus/directus/blob/3f3772d8a0e8d28f61cfa3ea89a75fee9ef9e6a2/api/src/ai/tools/system/prompt.md"}
+::callout{icon="i-lucide-code" color="info" to="https://github.com/directus/directus/blob/3f3772d8a0e8d28f61cfa3ea89a75fee9ef9e6a2/api/src/ai/tools/system/prompt.md"}
 **View the current system prompt** on GitHub to see exactly what instructions the AI receives about working with Directus.
 ::
 
diff --git a/content/guides/11.ai/2.mcp/4.prompts.md b/content/guides/11.ai/2.mcp/4.prompts.md
index b20a496e..28ba705c 100644
--- a/content/guides/11.ai/2.mcp/4.prompts.md
+++ b/content/guides/11.ai/2.mcp/4.prompts.md
@@ -7,7 +7,7 @@ headline: MCP Server
 
 The Directus MCP Server supports stored prompts, allowing you to create reusable interactions for AI assistants. This feature is particularly useful for standardizing responses, creating guided workflows, and ensuring consistent content creation.
 
-::callout{icon="material-symbols:info-outline" color="info"}
+::callout{icon="i-lucide-info" color="info"}
 **Client Support**: Not all AI clients support prompts. Check the [MCP clients compatibility matrix](https://modelcontextprotocol.io/clients) for your specific client.
 ::
 
@@ -30,7 +30,7 @@ Before you can create reusable prompts and use them in your AI conversations, yo
     - Directus will validate the collection and prompt you to create any missing fields needed for prompts.
     - If you approve, Directus will create the required fields for you
 
-::callout{icon="material-symbols:warning-outline" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 **Don't forget to set permissions**: Make sure your MCP user can read (and optionally create/update) prompts in their role permissions. See [Access Control](/guides/auth/access-control) for more information.
 ::
 
diff --git a/content/guides/11.ai/2.mcp/6.oauth.md b/content/guides/11.ai/2.mcp/6.oauth.md
index 544d304a..9b63eb74 100644
--- a/content/guides/11.ai/2.mcp/6.oauth.md
+++ b/content/guides/11.ai/2.mcp/6.oauth.md
@@ -9,7 +9,7 @@ MCP OAuth lets compatible AI clients connect to Directus through a browser autho
 
 Use OAuth when your MCP client supports remote server OAuth discovery. Use [static access tokens](/guides/ai/mcp/installation) when your client only supports manual headers or query parameters.
 
-::callout{icon="material-symbols:info" color="info"}
+::callout{icon="i-lucide-info" color="info"}
 OAuth access is limited to the MCP endpoint. The issued token uses the `mcp:access` scope and the MCP server resource URL as its audience.
 ::
 
diff --git a/content/guides/11.ai/2.mcp/7.security.md b/content/guides/11.ai/2.mcp/7.security.md
index d5d83bdc..05ee3ca0 100644
--- a/content/guides/11.ai/2.mcp/7.security.md
+++ b/content/guides/11.ai/2.mcp/7.security.md
@@ -7,11 +7,11 @@ headline: MCP Server
 
 AI tools are powerful, but connecting them to your Directus data comes with real security risks. We've engineered the Directus MCP server to be as secure as possible. But that doesn't mean you should ignore security best practices. This guide covers the practical advice for using MCP safely.
 
-::callout{icon="material-symbols:warning-outline" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 **Important: You control the LLM integration.** This tool connects to your own large language model - either self-hosted or via a public service like OpenAI, Anthropic, or others. You're responsible for configuring the LLM connection, managing the access tokens, and ensuring compliance with your chosen provider's terms of service.
 ::
 
-::callout{icon="material-symbols:shield-outline" color="info"}
+::callout{icon="i-lucide-shield" color="info"}
 **Built-in Security**: The Directus MCP server uses your existing permissions and access policy settings. AI tools can only access what you explicitly allow - just like any other Directus user.
 ::
 
diff --git a/content/guides/11.ai/2.mcp/8.local-mcp/0.index.md b/content/guides/11.ai/2.mcp/8.local-mcp/0.index.md
index a9e92c2c..b925f1c0 100644
--- a/content/guides/11.ai/2.mcp/8.local-mcp/0.index.md
+++ b/content/guides/11.ai/2.mcp/8.local-mcp/0.index.md
@@ -6,7 +6,7 @@ description: The Directus Content MCP Server allows you to interact with your Di
 
 The local MCP server is a standalone Node.js application that provides an alternative way to connect AI tools to your Directus instance using the Model Context Protocol.
 
-::callout{icon="material-symbols:info-outline" color="warning"}
+::callout{icon="i-lucide-info" color="warning"}
 **Remote vs Local MCP**: Directus v11.12+ now includes a [built-in remote MCP server](/guides/ai/mcp/) that's easier to set up and doesn't require Node.js. We highly recommend using the newer remote MCP server. The local MCP server remains available as an alternative for users who prefer a local setup or need specific Node.js-based functionality.
 ::
 
@@ -33,7 +33,7 @@ Consider using the local MCP server if you:
 
 This guide will cover how to set up and use the local MCP server as an alternative to the built-in remote option.
 
-::callout{icon="material-symbols:code" color="info" to="https://github.com/directus/mcp"}
+::callout{icon="i-lucide-code" color="info" to="https://github.com/directus/mcp"}
 View the local Directus Content MCP Server repository on GitHub.
 ::
 
diff --git a/content/guides/11.ai/2.mcp/8.local-mcp/1.tools.md b/content/guides/11.ai/2.mcp/8.local-mcp/1.tools.md
index 4583c7b1..4dfcbffa 100644
--- a/content/guides/11.ai/2.mcp/8.local-mcp/1.tools.md
+++ b/content/guides/11.ai/2.mcp/8.local-mcp/1.tools.md
@@ -7,7 +7,7 @@ description: Learn about the tools available in the local Directus Content MCP S
 
 The local Directus Content MCP Server provides a set of tools that allow AI assistants to interact with your Directus instance through a Node.js application. These tools enable various operations like reading collections, managing content, working with files, and more.
 
-::callout{icon="material-symbols:info-outline" color="info"}
+::callout{icon="i-lucide-info" color="info"}
 **Note**: The local MCP server provides more granular tools compared to the remote MCP server. For example, it has separate `read-items`, `create-item`, `update-item`, and `delete-item` tools, while the remote MCP combines these into a single `items` tool.
 ::
 
diff --git a/content/guides/11.ai/2.mcp/8.local-mcp/2.prompts.md b/content/guides/11.ai/2.mcp/8.local-mcp/2.prompts.md
index 201f75e5..b070f88a 100644
--- a/content/guides/11.ai/2.mcp/8.local-mcp/2.prompts.md
+++ b/content/guides/11.ai/2.mcp/8.local-mcp/2.prompts.md
@@ -7,11 +7,11 @@ headline: Local MCP
 
 The local MCP server supports the same prompt functionality as the remote MCP server, but requires manual configuration through environment variables and collection setup.
 
-::callout{icon="material-symbols:info-outline" color="info"}
+::callout{icon="i-lucide-info" color="info"}
 **Client Support**: Not all AI clients support prompts. Check the [MCP clients compatibility matrix](https://modelcontextprotocol.io/clients) for your specific client.
 ::
 
-::callout{icon="material-symbols:lightbulb-outline" color="primary"}
+::callout{icon="i-lucide-lightbulb" color="primary"}
 For detailed information about creating prompts, templating, examples, and best practices, see the main [Prompts guide](/guides/ai/mcp/prompts). This page covers only the local MCP-specific setup differences.
 ::
 
diff --git a/content/guides/12.integrations/1.n8n/0.index.md b/content/guides/12.integrations/1.n8n/0.index.md
index 0d07841d..68335682 100644
--- a/content/guides/12.integrations/1.n8n/0.index.md
+++ b/content/guides/12.integrations/1.n8n/0.index.md
@@ -9,7 +9,7 @@ technologies:
 
 Connect your Directus instance with n8n to automate workflows, sync data between systems, and build powerful integrations.
 
-::callout{icon="material-symbols:rocket-launch-outline"}
+::callout{icon="i-lucide-rocket"}
 **Quick Start**
 
 1. **Install the node**: Click the **+** button in n8n, search for "Directus", and install the verified node (look for the verification badge)
@@ -34,7 +34,7 @@ The Directus community node provides two components:
 3. The **Directus** verified node will appear in the results
 4. Click the **Install** button
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Self-Hosted n8n Users**
 <br>
 If you can't find the Directus node when searching, ensure community nodes are enabled:
@@ -66,7 +66,7 @@ Before you can use the Directus nodes, you need to connect to your Directus inst
 6. Copy the token and paste into n8n
 7. **Important**: Click the checkmark (✓) to save
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Permissions**
 <br>
 **Admin Token (Recommended for Getting Started)**
@@ -98,7 +98,7 @@ docker restart <container-name>
 3. Start n8n
 4. Reinstall the Directus node through the node palette (search for "Directus")
 
-::callout{icon="material-symbols:warning-outline"}
+::callout{icon="i-lucide-triangle-alert"}
 **Important**: After clearing the nodes directory, always reinstall by **searching for "Directus" in the node palette** (the + button), not through Settings → Community Nodes. The node palette search will show the verified Directus node with a shield icon.
 ::
 
diff --git a/content/guides/12.integrations/1.n8n/directus-n8n-actions.md b/content/guides/12.integrations/1.n8n/directus-n8n-actions.md
index 448e525e..07e085b9 100644
--- a/content/guides/12.integrations/1.n8n/directus-n8n-actions.md
+++ b/content/guides/12.integrations/1.n8n/directus-n8n-actions.md
@@ -54,7 +54,7 @@ These operations work similarly across all resources:
 
 **Note for Items**: When creating or updating items, you must select the **Collection** first. For Users and Files, no collection selection is needed.
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 **Permanent Deletion**
 Delete operations permanently remove data. Make sure this is what you want to do!
 ::
@@ -118,7 +118,7 @@ When getting items, you can select specific fields to return. This is helpful wh
 - You want to reduce the amount of data transferred
 - You're working with large collections
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Performance Tip**
 Selecting only the fields you need reduces data transfer and improves workflow performance, especially with large collections.
 ::
diff --git a/content/guides/12.integrations/1.n8n/directus-n8n-advanced.md b/content/guides/12.integrations/1.n8n/directus-n8n-advanced.md
index 890741b0..0ac1b42a 100644
--- a/content/guides/12.integrations/1.n8n/directus-n8n-advanced.md
+++ b/content/guides/12.integrations/1.n8n/directus-n8n-advanced.md
@@ -34,7 +34,7 @@ Quick reference of all available raw operations organized by resource type:
 
 ---
 
-::callout{icon="material-symbols:lightbulb-outline"}
+::callout{icon="i-lucide-lightbulb"}
 **When to Use Raw Operations**
 Use raw operations when you need complex filters with logical operators (`_and`, `_or`), relational field filtering, advanced query parameters (aggregation, search, etc.), or full control over the JSON payload structure.
 ::
@@ -52,7 +52,7 @@ Raw operations work similarly to their standard counterparts, but instead of usi
 5. Enter your JSON data in the **JSON Data** field
 6. For Get and Update operations, provide the **Item ID** if needed
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 **Token Permissions**
 Ensure your Directus API token has the correct permissions for the resource and operations you're using. Raw operations require the same permissions as their standard counterparts.
 ::
@@ -116,7 +116,7 @@ Update items with complex data structures:
 
 Raw operations allow you to use Directus's complete filter syntax. Specify filters in the `filter` parameter of your **JSON Data** field.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Filter Documentation**
 For complete filter syntax, operators, and examples, see the [Directus Filter Rules documentation](https://directus.com/docs/guides/connect/filter-rules).
 ::
@@ -188,7 +188,7 @@ Raw operations support all Directus query parameters. Include them in your JSON
 }
 ```
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Query Parameters Documentation**
 For complete query parameter documentation, see the [Directus Query Parameters documentation](https://directus.com/docs/guides/connect/query-parameters).
 ::
diff --git a/content/guides/12.integrations/1.n8n/directus-n8n-triggers.md b/content/guides/12.integrations/1.n8n/directus-n8n-triggers.md
index b5362537..0d654e79 100644
--- a/content/guides/12.integrations/1.n8n/directus-n8n-triggers.md
+++ b/content/guides/12.integrations/1.n8n/directus-n8n-triggers.md
@@ -52,7 +52,7 @@ When you activate a workflow with a Directus Trigger node:
 3. Your workflow runs automatically with the data from Directus
 4. When you deactivate the workflow, the Flow and webhook are automatically removed
 
-::callout{icon="material-symbols:info-outline" color="warning"}
+::callout{icon="i-lucide-info" color="warning"}
 **Public URL Required**
 Your n8n instance needs to be accessible from the internet for triggers to work. If you're using n8n Cloud, this is already set up. If you're self-hosting, you'll need to modify the Flow in Directus to use a tunnel (like ngrok or Cloudflare Tunnel) to expose your n8n instance publicly.
 ::
@@ -81,7 +81,7 @@ You can add conditions after the trigger to only process specific events:
 - Filter by collection or field values
 - Only process certain types of files
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Filtering Tip**
 Use n8n's **IF** node after the trigger to add conditional logic. For example, only send notifications when `{{ $json.status }}` equals `"published"`.
 ::
diff --git a/content/guides/12.integrations/2.clay/use-clay-templates-with-directus.md b/content/guides/12.integrations/2.clay/use-clay-templates-with-directus.md
index de32eaf7..5074ff65 100644
--- a/content/guides/12.integrations/2.clay/use-clay-templates-with-directus.md
+++ b/content/guides/12.integrations/2.clay/use-clay-templates-with-directus.md
@@ -39,7 +39,7 @@ Before using any templates, configure your Directus authentication in Clay:
 | **Get Item from Collection**  | Search and retrieve records from Directus |
 | **Get Related Item Details**  | Fetch relational data from Directus       |
 
-::callout{icon="material-symbols:warning-outline" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 **Important**  
 The Directus templates use generic collection names (like "posts" or "users") as examples. You'll need to adapt these to match your specific Directus schema by replacing collection names, adjusting field names, and configuring filters based on your data structure.
 ::
diff --git a/content/guides/12.integrations/3.zapier/0.index.md b/content/guides/12.integrations/3.zapier/0.index.md
index 28f60248..0ac00f25 100644
--- a/content/guides/12.integrations/3.zapier/0.index.md
+++ b/content/guides/12.integrations/3.zapier/0.index.md
@@ -9,7 +9,7 @@ technologies:
 
 Connect your Directus instance with Zapier to automate workflows, sync data between systems, and build powerful integrations with 6,000+ apps.
 
-::callout{icon="material-symbols:rocket-launch-outline"}
+::callout{icon="i-lucide-rocket"}
 **Quick Start**
 
 1. **Connect your account**: In Zapier, search for "Directus" and connect your Directus URL and API token
@@ -46,7 +46,7 @@ The Directus Zapier integration provides two main components:
 6. Copy the token and paste into Zapier
 7. **Important**: Click the checkmark (✓) to save
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Permissions**
 <br>
 **Admin Token (Recommended for Getting Started)**
diff --git a/content/guides/12.integrations/3.zapier/actions.md b/content/guides/12.integrations/3.zapier/actions.md
index 3f884734..3876824c 100644
--- a/content/guides/12.integrations/3.zapier/actions.md
+++ b/content/guides/12.integrations/3.zapier/actions.md
@@ -54,7 +54,7 @@ These operations work similarly across all resources:
 
 **Note for Items**: All item operations require selecting the **Collection** first. Fields are automatically shown based on your Directus collection structure.
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 **Permanent Deletion**
 Delete operations permanently remove data. Make sure this is what you want to do!
 ::
@@ -73,7 +73,7 @@ Select **Find** operation → Choose Collection (Items only) → Configure optio
 | **Search** | General search query across attributes |
 | **Filter (JSON)** | Advanced filtering using Directus filter syntax |
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 **Processing Multiple Results**
 <br>
 By default, Zapier returns only the **first result** from Find actions. To process all returned results, you must configure **"If multiple search results are found"** in the action settings to **"Return all results as line items"**. This allows Zapier to process each result separately in subsequent steps.
@@ -81,7 +81,7 @@ By default, Zapier returns only the **first result** from Find actions. To proce
 
 **Note for Items**: Select the **Collection** before configuring options.
 
-::callout{icon="material-symbols:lightbulb-outline"}
+::callout{icon="i-lucide-lightbulb"}
 **Advanced Filtering in Find**
 <br>
 The **Filter (JSON)** field in Find actions supports Directus's complete filter syntax, including logical operators (`_and`, `_or`), relational field filtering, and all filter operators. For complete filter syntax and examples, see the [Directus Filter Rules documentation](https://directus.com/docs/guides/connect/filter-rules).
@@ -110,7 +110,7 @@ The **Filter (JSON)** field in Find actions supports Directus's complete filter
 
 Items are content entries in your Directus collections (blog posts, products, pages, etc.). All operations require selecting a **Collection** first.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Dynamic Field Discovery**
 Fields are automatically discovered from your Directus schema and shown in the action configuration. You can map data from previous steps using the dropdown menus.
 ::
@@ -127,7 +127,7 @@ To create users, use **Invite User**. This sends an invitation email so the user
 - **Role** (dropdown selection)
 - **Custom Invite URL** (optional)
 
-::callout{icon="material-symbols:lightbulb-outline"}
+::callout{icon="i-lucide-lightbulb"}
 **Direct User Creation**
 For direct user creation without invitation, use **User Raw Request** with POST method.
 ::
@@ -149,7 +149,7 @@ Upload a file from binary data in your Zap.
 - **Description** (optional)
 - **Folder** (optional)
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **File Data Source**
 The file must come from a previous step that provides binary file data (like downloading a file from a URL or getting a file from another app).
 ::
@@ -165,7 +165,7 @@ Import a file from a publicly accessible URL.
 - **Description** (optional)
 - **Folder** (optional)
 
-::callout{icon="material-symbols:lightbulb-outline"}
+::callout{icon="i-lucide-lightbulb"}
 **Upload vs Import**
 Use **Upload** when you have binary file data from a previous step. Use **Import** when you have a publicly accessible URL to the file.
 ::
diff --git a/content/guides/12.integrations/3.zapier/advanced.md b/content/guides/12.integrations/3.zapier/advanced.md
index 43a43755..1f6fface 100644
--- a/content/guides/12.integrations/3.zapier/advanced.md
+++ b/content/guides/12.integrations/3.zapier/advanced.md
@@ -27,7 +27,7 @@ Quick reference of all available raw request actions:
 
 ---
 
-::callout{icon="material-symbols:lightbulb-outline"}
+::callout{icon="i-lucide-lightbulb"}
 **When to Use Raw Request Actions**
 Use raw request actions when you need full control over HTTP methods, complex query parameters (aggregation, search, etc.), or complete control over the JSON payload structure. For advanced filtering in Find actions, use the Filter (JSON) field instead.
 ::
@@ -47,7 +47,7 @@ Raw Request actions allow you to make custom Directus API calls with full contro
    - **Request Body (JSON)**: JSON data for POST/PATCH requests
    - **Filter (JSON)**: Filter conditions (required for DELETE operations)
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 **Token Permissions**
 Ensure your Directus API token has the correct permissions for the resource and operations you're using. Raw request actions require the same permissions as their standard counterparts.
 ::
diff --git a/content/guides/12.integrations/3.zapier/triggers.md b/content/guides/12.integrations/3.zapier/triggers.md
index 8ed72f10..caa06bbe 100644
--- a/content/guides/12.integrations/3.zapier/triggers.md
+++ b/content/guides/12.integrations/3.zapier/triggers.md
@@ -71,7 +71,7 @@ You can add Filter steps after the trigger to only process specific events:
 - Filter by collection or field values
 - Only process certain types of files
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Filtering Tip**
 Use Zapier's **Filter** step after the trigger to add conditional logic. For example, only send notifications when `status` equals `"published"`.
 ::
diff --git a/content/guides/12.integrations/4.vercel/0.index.md b/content/guides/12.integrations/4.vercel/0.index.md
index 4c6b38c8..619d1ac6 100644
--- a/content/guides/12.integrations/4.vercel/0.index.md
+++ b/content/guides/12.integrations/4.vercel/0.index.md
@@ -9,7 +9,7 @@ technologies:
 
 Connect your Directus instance with Vercel to centrally manage deployments, monitor build status, and control multiple frontend projects — all without leaving Directus.
 
-::callout{icon="material-symbols:rocket-launch-outline"}
+::callout{icon="i-lucide-rocket"}
 **Quick Start**
 1. **Enable Deployment module**: Enable the Deployment module from your Directus project settings
 2. **Connect your Vercel account**: Navigate to the Deployment module and add your Vercel API token
@@ -39,7 +39,7 @@ Connect your Directus instance with Vercel to centrally manage deployments, moni
 2. Click **Save** to add the projects to the integration
 3. You can return to the Vercel integration settings at any time to add or remove projects
 
-::callout{icon="material-symbols:warning-outline" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 **Removing Projects**
 <br>
 Removing a project from the Vercel integration will also permanently delete all deployment history for that project from Directus. This action cannot be undone.
@@ -54,7 +54,7 @@ Once configured, your connected Vercel projects will be listed in the Deployment
 - Access deployment controls for each project
 - Monitor deployment status and history
 
-::callout{icon="material-symbols:shield-outline" color="info"}
+::callout{icon="i-lucide-shield" color="info"}
 **Permissions**
 <br>
 The Deployment module uses Directus native permissions to control access. See [Deployment Security](/guides/deployments/security) for details on configuring roles and access policies.
diff --git a/content/guides/12.integrations/5.netlify/0.index.md b/content/guides/12.integrations/5.netlify/0.index.md
index e2063790..4d9593bc 100644
--- a/content/guides/12.integrations/5.netlify/0.index.md
+++ b/content/guides/12.integrations/5.netlify/0.index.md
@@ -9,7 +9,7 @@ technologies:
 
 Integrate your Directus instance with Netlify to centrally deploy sites, track build progress, and manage multiple frontend projects — all from within Directus.
 
-::callout{icon="material-symbols:rocket-launch-outline"}
+::callout{icon="i-lucide-rocket"}
 **Quick Start**
 1. **Enable Deployment module**: Enable the Deployment module in your Directus project settings
 2. **Link your Netlify account**: Go to the Deployment module and enter your Netlify Personal Access Token
@@ -39,7 +39,7 @@ Integrate your Directus instance with Netlify to centrally deploy sites, track b
 2. Click **Save** to add the selected sites
 3. Return to integration settings anytime to add or remove sites
 
-::callout{icon="material-symbols:warning-outline" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 **Removing Sites**
 <br>
 Removing a site from the Netlify integration will permanently delete all deployment history for that site from Directus. This cannot be undone.
@@ -54,7 +54,7 @@ Once set up, your connected Netlify sites appear in the Deployment module. From
 - Access deployment controls for each site
 - Track deployment status and history
 
-::callout{icon="material-symbols:shield-outline" color="info"}
+::callout{icon="i-lucide-shield" color="info"}
 **Permissions**
 <br>
 The Deployment module uses Directus native permissions to control access. See [Deployment Security](/guides/deployments/security) for details on configuring roles and access policies.
diff --git a/content/guides/12.integrations/6.framer/0.index.md b/content/guides/12.integrations/6.framer/0.index.md
index 444222df..56e53c62 100644
--- a/content/guides/12.integrations/6.framer/0.index.md
+++ b/content/guides/12.integrations/6.framer/0.index.md
@@ -9,7 +9,7 @@ technologies:
 
 The Directus Framer plugin connects a Framer CMS collection to a Directus collection, letting you pull content into Framer or push edits back to Directus without leaving your project.
 
-::callout{icon="material-symbols:rocket-launch-outline"}
+::callout{icon="i-lucide-rocket"}
 **Quick Start**
 
 1. **Open a collection**: In Framer, create or open a regular CMS collection, then open the Directus plugin from it
diff --git a/content/guides/13.security/1.best-practices.md b/content/guides/13.security/1.best-practices.md
index 51eb4698..8220dd6d 100644
--- a/content/guides/13.security/1.best-practices.md
+++ b/content/guides/13.security/1.best-practices.md
@@ -35,7 +35,7 @@ Write access on `directus_users`, `directus_roles`, or `directus_policies` can b
 - If users need to manage their own profile, scope update permissions with `id = $CURRENT_USER` and remove the `role` and `policies` fields from field permissions.
 - If a role needs to invite users, use field presets to lock the `role` field to a specific non-administrator value, and remove the ability to edit `role` on existing users.
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 Unrestricted create access on `directus_users` allows a user to create accounts and assign any role, including the administrator role. Always set a field preset for the `role` field when granting create access.
 ::
 
@@ -159,7 +159,7 @@ If your project applies custom CSS through the theming group in settings, an att
 Understand how permissions, policies, and roles compose access control in Directus.
 :::
 
-:::card{title="Security & Limits" icon="material-symbols:settings-outline" to="/configuration/security-limits"}
+:::card{title="Security & Limits" icon="i-lucide-settings" to="/configuration/security-limits"}
 Environment variables for tokens, cookies, CSP, CORS, rate limiting, and request limits.
 :::
 
@@ -167,7 +167,7 @@ Environment variables for tokens, cookies, CSP, CORS, rate limiting, and request
 Set up and require 2FA for Data Studio and API logins.
 :::
 
-:::card{title="Report a Security Issue" icon="material-symbols:shield-lock-outline" to="/community/reporting-and-support/security-reporting"}
+:::card{title="Report a Security Issue" icon="i-lucide-lock-keyhole" to="/community/reporting-and-support/security-reporting"}
 How to responsibly disclose a security vulnerability in Directus.
 :::
 
diff --git a/content/index.md b/content/index.md
index e9dc3617..56216589 100644
--- a/content/index.md
+++ b/content/index.md
@@ -23,7 +23,7 @@ Once you're ready to commit, pick how you want to run Directus:
   ---
   title: Directus Cloud
   description: Spin up a managed instance in seconds. No infrastructure to run.
-  icon: material-symbols:cloud-outline
+  icon: i-lucide-cloud
   to: https://directus.cloud
   ---
   :::
@@ -41,7 +41,7 @@ Once you're ready to commit, pick how you want to run Directus:
   ---
   title: Local Demo
   description: Try Directus locally in one command.
-  icon: material-symbols:terminal
+  icon: i-lucide-terminal
   to: /getting-started/overview
   ---
   :::
@@ -62,7 +62,7 @@ Directus is a flexible backend, but here's how teams typically use it.
   ---
   title: Developers
   description: APIs, SDKs, extensions, and self-hosting on your own terms.
-  icon: material-symbols:code
+  icon: i-lucide-code
   ---
   :::
 
@@ -70,7 +70,7 @@ Directus is a flexible backend, but here's how teams typically use it.
   ---
   title: Product teams
   description: Ship features without waiting for a backend rebuild.
-  icon: material-symbols:rocket-launch-outline
+  icon: i-lucide-rocket
   ---
   :::
 
@@ -78,7 +78,7 @@ Directus is a flexible backend, but here's how teams typically use it.
   ---
   title: Agencies
   description: One backend, every project, every framework.
-  icon: material-symbols:business-center-outline
+  icon: i-lucide-briefcase-business
   ---
   :::
 
@@ -86,7 +86,7 @@ Directus is a flexible backend, but here's how teams typically use it.
   ---
   title: Publishers
   description: Headless CMS for content-driven sites at any scale.
-  icon: material-symbols:newspaper
+  icon: i-lucide-newspaper
   ---
   :::
 ::
@@ -100,7 +100,7 @@ Three concepts power everything in Directus. Start here to build your mental mod
   ---
   title: Data model
   description: Collections and fields map directly to your database schema.
-  icon: material-symbols:database-outline
+  icon: i-lucide-database
   to: /guides/data-model/collections
   ---
   :::
@@ -109,7 +109,7 @@ Three concepts power everything in Directus. Start here to build your mental mod
   ---
   title: Permissions
   description: Define who can do what, down to the field level.
-  icon: material-symbols:verified-user-outline
+  icon: i-lucide-shield-check
   to: /guides/auth/access-control
   ---
   :::
@@ -118,7 +118,7 @@ Three concepts power everything in Directus. Start here to build your mental mod
   ---
   title: Flows
   description: Trigger logic on events, schedules, or webhooks.
-  icon: material-symbols:bolt-outline
+  icon: i-lucide-zap
   to: /guides/flows/operations
   ---
   :::
diff --git a/content/licensing/1.overview.md b/content/licensing/1.overview.md
index ff0e7ecd..b120478b 100644
--- a/content/licensing/1.overview.md
+++ b/content/licensing/1.overview.md
@@ -31,7 +31,7 @@ Attempts to add a license key during setup will grant access to the Studio, but
 
 If you encounter this error, configure `PUBLIC_URL` with a qualified URL, restart Directus, and then re-apply the license.
 
-::callout{icon="material-symbols:info-outline" color="info"}
+::callout{icon="i-lucide-info" color="info"}
 In addition to licensing, `PUBLIC_URL` is used throughout Directus for features such as OAuth redirects, password reset emails, and other public-facing links. For more information, see the [`PUBLIC_URL` entry in the general configuration reference](/configuration/general).
 ::
 
@@ -44,7 +44,7 @@ There are two ways to configure a license:
 
 You configure one or the other — not both. Setting both in your environment is a configuration error and Directus will refuse to start.
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 **Offline license tokens are only available on Enterprise plans.** Most self-hosted instances should use a license key. The core tier has no license to validate and can be run air-gapped without a token — only paid plans that need to run without outbound network access require one.
 ::
 
@@ -88,7 +88,7 @@ See the [General configuration](/configuration/general#license) reference for th
 | **Grace** | License has passed its expiry or the instance has exceeded its limits, but the configured grace period has not yet elapsed. The instance continues to operate normally. |
 | **Locked** | The instance has exceeded its entitlement limits and is outside any applicable grace period. Main parts of the instance are locked down and resolution is required before normal operation can resume. |
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Enforcement never deletes data.** When limits are exceeded or a license is downgraded, Directus restricts access by deactivating resources or blocking endpoints — your data is never removed.
 ::
 
@@ -118,7 +118,7 @@ Deactivating a license frees its activation on the licensing service so the bind
 
 If your current usage is above core tier limits when you deactivate, the Studio will surface the [Resolution Flow](#resolution-flow) before completing the downgrade.
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 **Always deactivate a license before destroying the instance it is bound to.** If you wipe the database, drop the container, or otherwise lose access to the Studio without deactivating first, the activation remains bound on the licensing service and continues to count against your license's activation limit. There is currently no self-service way to release a stranded activation — reach out to support if this happens. This is especially important when testing a license key in a throwaway environment.
 ::
 
@@ -137,7 +137,7 @@ If your instance exceeds its entitlements — for example, after downgrading a p
 
 Selecting candidates and submitting the resolution brings the instance back within its entitlements. Resources are deactivated rather than deleted, and admins are always excluded from seat resolution.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **SSO users after deactivation**
 <br>
 When SSO is disabled through the resolution flow, users previously authenticated via SSO are marked inactive but their auth provider is left in place. This is intentional — it preserves the user's context in case SSO is re-enabled later. If you want those users to log in with email and password instead, you must manually update their provider to the default after the resolution completes.
@@ -156,7 +156,7 @@ Resolving the license — either by adding a valid key, reducing usage through t
 
 ## Upgrading to Directus 12
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Existing customers** should contact [licensing@directus.com](mailto:licensing@directus.com) to obtain your license before upgrading, or if you encounter any issues.
 ::
 
diff --git a/content/mcp-help.md b/content/mcp-help.md
index 525f924e..ac4521ad 100644
--- a/content/mcp-help.md
+++ b/content/mcp-help.md
@@ -6,7 +6,7 @@ description: Connect Claude, Cursor, VS Code, or any MCP-compatible client direc
 
 You landed here because you opened the Directus docs MCP server in a browser. The server itself speaks the [Model Context Protocol](https://modelcontextprotocol.io/). Connect a compatible AI client to it and your assistant can search and read these docs as a live tool.
 
-::callout{icon="material-symbols:info" color="info"}
+::callout{icon="i-lucide-info" color="info"}
 This is the **docs MCP server**, which exposes this documentation site to AI clients. If you want to connect AI tools to your own Directus instance to manage content and schema, see the [Directus product MCP guide](/guides/ai/mcp) instead.
 ::
 
diff --git a/content/releases/0.index.md b/content/releases/0.index.md
index aa77a436..e36cf836 100644
--- a/content/releases/0.index.md
+++ b/content/releases/0.index.md
@@ -2,24 +2,24 @@
 stableId: c27fb12d-c305-4814-bcac-4a8b26e54921
 title: Releases
 description: Releases are how we roll out new features, updates, and fixes to Directus.
-icon: material-symbols:tag
+icon: i-lucide-tag
 ---
 
 We release new versions of Directus approximately once a month. While we provide a single version number for each release, Directus has several packages and each package may have different version numbers.
 
 While we use a three number versioning scheme, we don't adhere to semantic versioning stadards, which means that any release may include breaking changes. Instead, we use the importance or impact of changes to determine the version number.
 
-::callout{icon="material-symbols:link" to="/releases/changelog"}
+::callout{icon="i-lucide-link" to="/releases/changelog"}
 **The Changelog**
 A monthly summary of what's new from the Directus team.
 ::
 
-::callout{icon="material-symbols:link" to="/releases/breaking-changes"}
+::callout{icon="i-lucide-link" to="/releases/breaking-changes"}
 **Breaking Changes**
 Breaking changes may require action on your part before upgrading.
 ::
 
-::callout{icon="material-symbols:link" to="https://github.com/directus/directus/releases"}
+::callout{icon="i-lucide-link" to="https://github.com/directus/directus/releases"}
 **Releases**
 See the full release history on GitHub.
 ::
diff --git a/content/releases/3.breaking-changes/1.version-10.md b/content/releases/3.breaking-changes/1.version-10.md
index d9cbbca0..fd60c61e 100644
--- a/content/releases/3.breaking-changes/1.version-10.md
+++ b/content/releases/3.breaking-changes/1.version-10.md
@@ -40,7 +40,7 @@ on the legacy format for extensions, recognizable by each extension type having
 
 Directus will ignore extensions that use the legacy format starting in this version.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Migration/Mitigation**  
 
 :::collapsible{name="migration steps"}
@@ -117,7 +117,7 @@ applications, you can set `AUTH_<PROVIDER>_MODE=cookie`. This will however not w
 This affects App extensions that are currently extracting the token from `axios`. This will no longer be either possible
 or necessary, as the App now uses a session cookie, which will be sent with each request from the browser.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Migration/Mitigation**  
 :::collapsible{name="migration steps"}
   ::tabs
@@ -175,7 +175,7 @@ or necessary, as the App now uses a session cookie, which will be sent with each
 In the `AuthenticationService` the `login` function signature has been changed to have an `options` object as the third
 argument for any extra options.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
   **Examples**  
   :::tabs
     ::::div{class="pr-6"}
@@ -239,7 +239,7 @@ consuming the SDK.
 
 Any scoped imports of `@directus/sdk` will need updating to import functions from the root.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
   **Migration/Mitigation**  
   :::collapsible{name="migration steps"}
     ::tabs
@@ -284,7 +284,7 @@ provided you are tracking the snapshot in a version control system.
 Previously when accessing content versions via GraphQL, a `version` parameter was used on existing fields. This has now
 been changed and is accessed via dedicated query types (`<collection>_by_version` and `versions`).
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
   **Migration/Mitigation**  
   :::collapsible{name="migrations steps"}
     ::tabs
@@ -367,7 +367,7 @@ This has been replaced with a `GET /extensions` endpoint that returns all extens
 The parameter order for the `refresh` method and thus also the default auth mode have been swapped in order to work well
 with both auth modes, `cookie` and `json`.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
   **Migration/Mitigation**  
   :::collapsible{name="migration steps"}
     ::tabs
@@ -429,7 +429,7 @@ Directus had various different functionalities that required you to use Redis wh
 scaled environment such as caching, rate-limiting, realtime, and flows. The configuration for these different parts have
 been combined into a single set of `REDIS` environment variables that are reused across the system.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
   **Migration/Mitigation**  
   :::collapsible{name="migration steps"}
   Combine all the `*_REDIS` environment variables into a single shared one as followed:
@@ -487,7 +487,7 @@ As part of standardizing how extensions are built and shipped, you must replace
 `exceptions` with new errors created within the extension itself. We recommend prefixing the error code with your
 extension name for improved debugging, but you can keep using the system codes if you relied on that in the past.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Migration/Mitigation**  
   :::collapsible{name="migration steps"}
     ::tabs
diff --git a/content/releases/3.breaking-changes/2.version-11.md b/content/releases/3.breaking-changes/2.version-11.md
index a5df957e..15ad91b8 100644
--- a/content/releases/3.breaking-changes/2.version-11.md
+++ b/content/releases/3.breaking-changes/2.version-11.md
@@ -106,7 +106,7 @@ Arguments of service methods are now strictly typed, which can result in type er
 - The ItemsService constructor now expects the collection name to be a `string` and will error on `string | undefined` (or other unions).
 - Similarly, functions like `service.readOne()`/`service.readMany()` now expect `string | number` for their primary keys and will error for nullable types
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Workaround**  
  :::collapsible{name="type workarounds"}
 If you encounter type errors, you can cast the services to `any` to restore the previous behavior:
@@ -249,7 +249,7 @@ fields back into your data model or remove them from the request.
 If you are requesting Many-to-Any (M2A) fields without collection name, they will throw an error. To fix this, you need
 to put the collection name you are targeting. This is true regardless of level or if using REST/GraphQL.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Migration/Mitigation**  
  :::collapsible{name="migration steps"}
 You could previously request fields in a M2A builder without specifying the collection they came from, for example:
diff --git a/content/releases/3.breaking-changes/3.version-12.md b/content/releases/3.breaking-changes/3.version-12.md
index 50a287e8..7263a2df 100644
--- a/content/releases/3.breaking-changes/3.version-12.md
+++ b/content/releases/3.breaking-changes/3.version-12.md
@@ -20,7 +20,7 @@ Directus 12 introduces active license enforcement. Self-hosted instances run on
 
 The grace period exists to ensure uninterrupted service for existing customers who upgrade before obtaining a license. If your instance is above core tier limits when you upgrade to Directus 12, you enter a **30-day grace period** during which everything continues to operate normally. Admins see a reminder on every login.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Existing customers** should contact [licensing@directus.com](mailto:licensing@directus.com) to obtain your license. This is the right action for any existing customer who has not yet received a license, or upgrades and sees the grace period reminder.
 ::
 
diff --git a/content/self-hosting/1.overview.md b/content/self-hosting/1.overview.md
index 7b166c4d..b164c894 100644
--- a/content/self-hosting/1.overview.md
+++ b/content/self-hosting/1.overview.md
@@ -40,7 +40,7 @@ Beyond any Directus license costs, you will need to consider the cost of your in
 
 And, of course, the cost of time to manage and maintain all of these moving parts. In some contexts, this is a non-issue, but in others, it can be a significant factor. 
 
-::callout{icon="material-symbols:school-outline" color="secondary" to="/tutorials/self-hosting"}
+::callout{icon="i-lucide-graduation-cap" color="secondary" to="/tutorials/self-hosting"}
 How to deploy Directus: see all options (Cloud, Docker, and platform-specific guides).
 ::
 
diff --git a/content/self-hosting/2.requirements.md b/content/self-hosting/2.requirements.md
index 9436a95a..3cdaf6c5 100644
--- a/content/self-hosting/2.requirements.md
+++ b/content/self-hosting/2.requirements.md
@@ -22,7 +22,7 @@ The Directus Docker Image contains all optional dependencies supported in the AP
 
 Directus supports the Long-Term Support (LTS) versions of PostgreSQL, MySQL, SQLite, MS SQL Server, MariaDB, CockroachDB, and OracleDB.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
   Directus does not currently support using one database with multiple schemas.
 ::
 
diff --git a/content/self-hosting/3.deploying.md b/content/self-hosting/3.deploying.md
index 7a4c6b0c..5fed52f3 100644
--- a/content/self-hosting/3.deploying.md
+++ b/content/self-hosting/3.deploying.md
@@ -8,7 +8,7 @@ navigation:
 
 Directus is provided as a Docker image. This means you can deploy it on many different platforms. While each is slightly different, the core concepts are the same.
 
-::callout{icon="material-symbols:school-outline" color="secondary" to="/tutorials/self-hosting"}
+::callout{icon="i-lucide-graduation-cap" color="secondary" to="/tutorials/self-hosting"}
 How to deploy Directus (all methods).
 ::
 
@@ -40,7 +40,7 @@ For automated deployments or scripted setups, you can pre-configure the initial
 
 ## Docker Compose Examples
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Postgres, Redis, Directus, Local Files**
 Be sure to replace placeholder values with your own.
 
@@ -113,7 +113,7 @@ services:
 ```
 ::
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 **Request Other Examples**
 We're keeping this section light for now, but if you need examples for other database providers, let us know!
 ::
diff --git a/content/tutorials/2.projects/create-reusable-blocks-with-many-to-any-relationships.md b/content/tutorials/2.projects/create-reusable-blocks-with-many-to-any-relationships.md
index 5c61e5dc..a08b8e9a 100644
--- a/content/tutorials/2.projects/create-reusable-blocks-with-many-to-any-relationships.md
+++ b/content/tutorials/2.projects/create-reusable-blocks-with-many-to-any-relationships.md
@@ -29,7 +29,7 @@ To achieve this, you will:
 
 ## How-To Guide
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 You’ll need to have either a Directus Cloud project configured and running or a self-hosted instance of Directus up and running.
 ::
 
@@ -89,7 +89,7 @@ Let’s break down the data model for each section.
 
 Now let's create a Collection for each inside Directus.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 To keep things organized, we recommend that you namespace each collection with a prefix like `block`.
 
@@ -175,7 +175,7 @@ To keep things organized, we recommend that you namespace each collection with a
    d. Save the field. Directus will create a new, hidden
    [junction collection](/guides/data-model/relationships) for you automatically.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 If you want more control over the name of the junction table and its fields, use the Continue in Advanced Field Creation
 Mode option.
@@ -201,7 +201,7 @@ Mode option.
 Next, you'll want to access these with the API. If you try to use `/items/pages` then `blocks` returns an array of IDs.
 Instead, you'll want to add a [field parameter](/guides/data-model/relationships) to get nested relational data.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 Study the [Global Query Parameters > Fields > Many-To-Any](/guides/data-model/relationships) article to learn
 how to properly fetch nested relational M2A data without over-fetching data that you might not need.
diff --git a/content/tutorials/3.tips-and-tricks/advanced-types-with-the-directus-sdk.md b/content/tutorials/3.tips-and-tricks/advanced-types-with-the-directus-sdk.md
index a1e98c83..6079a840 100644
--- a/content/tutorials/3.tips-and-tricks/advanced-types-with-the-directus-sdk.md
+++ b/content/tutorials/3.tips-and-tricks/advanced-types-with-the-directus-sdk.md
@@ -38,7 +38,7 @@ interface MySchema {
 }
 ```
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 For the most reliable results, the root schema types should be kept as pure as possible. This means avoiding unions
 (`CollectionA | null`), optional types (`optional_collection?: CollectionA[]`), and preferably inline relational types
@@ -107,7 +107,7 @@ In the output types these string literals will get resolved to their appropriate
 - `'datetime'`, `'date'`, and `'time'` resolve to `string`
 - `'json'` resolves to [`JsonValue`](https://github.com/directus/directus/blob/main/sdk/src/types/output.ts#L105)
 
-::callout{icon="material-symbols:warning-rounded" color="warning"}
+::callout{icon="i-lucide-triangle-alert" color="warning"}
 **Types to Avoid**
 Some types should be avoided in the Schema as they may not play well with the type logic: `any` or `any[]`, empty type
 `{}`, `never` or `void`.
@@ -284,7 +284,7 @@ const results2 = await directusClient.request(readItems("collection_a", {
 }));
 ```
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 At this time, `alias` has not been typed yet for use in other query parameters like `deep`.
 
diff --git a/content/tutorials/4.migration/migrate-from-wordpress-to-directus.md b/content/tutorials/4.migration/migrate-from-wordpress-to-directus.md
index 8fa64b8e..1f21c8e0 100644
--- a/content/tutorials/4.migration/migrate-from-wordpress-to-directus.md
+++ b/content/tutorials/4.migration/migrate-from-wordpress-to-directus.md
@@ -77,7 +77,7 @@ Now we will create the fields that will hold the data items. If you are using my
 ![Pages fields](/img/285156db-942e-49df-b9d2-ffb9c89bc9ac.webp)
 ![Fields for Collection](/img/bb47c0fb-0ca5-4ba2-984a-ba40f9d15cba.webp)
 
-::{callout icon="material-symbols:info-outline"}
+::{callout icon="i-lucide-info"}
 
 *Note that the “Content” field has a Field type of ***WYSIWYG***, the rest are ***Input*** type. we are using ***WYSIWYG*** because the exported data is in raw HTML
 
@@ -234,7 +234,7 @@ api_key = "your-api-token"
 # Uncomment the line below to run the function with your actual Directus URL and API key
 import_posts_to_directus(json_file_path, directus_url, api_key)
 ```
-::callout{icon="material-symbols:info-outline" title="Replace Data"}
+::callout{icon="i-lucide-info" title="Replace Data"}
 
 Note: Replace `https://your.directus.app` and `your-api-token` with the appropriate details.
 
diff --git a/content/tutorials/4.migration/promoting-changes-between-environments-in-directus.md b/content/tutorials/4.migration/promoting-changes-between-environments-in-directus.md
index baa9ecca..a9b4697b 100644
--- a/content/tutorials/4.migration/promoting-changes-between-environments-in-directus.md
+++ b/content/tutorials/4.migration/promoting-changes-between-environments-in-directus.md
@@ -45,7 +45,7 @@ project, or to move from a self-hosted project to Directus Cloud.
 
 ### How-To Guide
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 **Permissions**<br/>
 
diff --git a/content/tutorials/5.extensions/check-permissions-in-a-custom-endpoint.md b/content/tutorials/5.extensions/check-permissions-in-a-custom-endpoint.md
index eafcd540..27bcb0aa 100644
--- a/content/tutorials/5.extensions/check-permissions-in-a-custom-endpoint.md
+++ b/content/tutorials/5.extensions/check-permissions-in-a-custom-endpoint.md
@@ -254,7 +254,7 @@ variables.
 
 Restart Directus to load the extension.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 Only the `package.json` and `dist` directory are required inside of your extension directory. However, adding the source
 code has no negative effect.
diff --git a/content/tutorials/5.extensions/create-collection-items-in-custom-panels.md b/content/tutorials/5.extensions/create-collection-items-in-custom-panels.md
index 6e3e6d0c..24528374 100644
--- a/content/tutorials/5.extensions/create-collection-items-in-custom-panels.md
+++ b/content/tutorials/5.extensions/create-collection-items-in-custom-panels.md
@@ -268,7 +268,7 @@ API.
 <v-button v-else secondary>Save</v-button>
 ```
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 The secondary button shows an inactive button when the form is not ready to submit. Use this conditional for any further
 validation.
@@ -374,7 +374,7 @@ with `directus-extension`. In this case, you may choose to use `directus-extensi
 
 Restart Directus to load the extension.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 Only the `package.json` and `dist` directory are required inside of your extension directory. However, adding the source
 code has no negative effect.
diff --git a/content/tutorials/5.extensions/create-new-customers-in-stripe-in-a-custom-hook.md b/content/tutorials/5.extensions/create-new-customers-in-stripe-in-a-custom-hook.md
index 32f3083e..a94f1a65 100644
--- a/content/tutorials/5.extensions/create-new-customers-in-stripe-in-a-custom-hook.md
+++ b/content/tutorials/5.extensions/create-new-customers-in-stripe-in-a-custom-hook.md
@@ -151,7 +151,7 @@ Ensure the `.env` file has `STRIPE_TOKEN` variable.
 
 Restart Directus to load the extension.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 Only the `package.json` and `dist` directory are required inside of your extension directory. However, adding the source
 code has no negative effect.
diff --git a/content/tutorials/5.extensions/display-external-api-data-from-vonage-in-custom-panels.md b/content/tutorials/5.extensions/display-external-api-data-from-vonage-in-custom-panels.md
index 63912570..34b16ee0 100644
--- a/content/tutorials/5.extensions/display-external-api-data-from-vonage-in-custom-panels.md
+++ b/content/tutorials/5.extensions/display-external-api-data-from-vonage-in-custom-panels.md
@@ -452,7 +452,7 @@ directory into the Directus extensions `directory`. Make sure the directory with
 
 Restart Directus to load the extensions.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 Only the `package.json` and `dist` directory are required inside of your extension directory. However, adding the source
 code has no negative effect.
diff --git a/content/tutorials/5.extensions/format-dates-in-a-custom-display-extension.md b/content/tutorials/5.extensions/format-dates-in-a-custom-display-extension.md
index d81cdcb3..c4ac1e6e 100644
--- a/content/tutorials/5.extensions/format-dates-in-a-custom-display-extension.md
+++ b/content/tutorials/5.extensions/format-dates-in-a-custom-display-extension.md
@@ -168,7 +168,7 @@ with `directus-extension`. In this case, you may choose to use `directus-extensi
 
 Restart Directus to load the extension.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 Only the `package.json` and `dist` directory are required inside of your extension directory. However, adding the source
 code has no negative effect.
diff --git a/content/tutorials/5.extensions/implement-navigation-in-multipage-custom-modules.md b/content/tutorials/5.extensions/implement-navigation-in-multipage-custom-modules.md
index b11c31f7..03ba4a4d 100644
--- a/content/tutorials/5.extensions/implement-navigation-in-multipage-custom-modules.md
+++ b/content/tutorials/5.extensions/implement-navigation-in-multipage-custom-modules.md
@@ -348,7 +348,7 @@ export default{
 This uses the built-in `v-list` and `v-list-item` to render the navigation from the pages property. The current property
 is used to set the `v-list-item` to active when the current page matches the navigation item.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 The export names the component `PageNavigation`. This must match the component import in the module.vue.
 
@@ -374,7 +374,7 @@ Now this can be used in the template. After the `breadcrumbs`, add the following
 </template>
 ```
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 `PageNavigation` must be a `page-navigation` when used in the template to meet lint syntax standards.
 
@@ -503,7 +503,7 @@ api.get(`/items/pages?fields=title,banner,content&filter[uri][_eq]=${page}`).the
 
 ### Work With Images
 
-::callout{icon="material-symbols:warning-outline-rounded"}
+::callout{icon="i-lucide-triangle-alert"}
 
 Since [Directus version 10.10.0](/releases/breaking-changes/version-10#version-10100) the query parameter authentication is
 no longer required and considered deprecated, you can rely on
@@ -577,7 +577,7 @@ Then wrap any internal images with this function:
 page_banner.value = addTokenToURL(`/assets/${item.banner}?width=2000&height=563&fit=cover`);
 ```
 
-::callout{icon="material-symbols:info-outline}
+::callout{icon="i-lucide-info}
 
 If you are using images from external sources, the host must be added to the Content Security Policy (CSP) inside the
 environment or config file.
@@ -675,7 +675,7 @@ with `directus-extension`. In this case, you may choose to use `directus-extensi
 
 Restart Directus to load the extension.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 Only the `package.json` and `dist` directory are required inside of your extension directory. However, adding the source
 code has no negative effect.
diff --git a/content/tutorials/5.extensions/proxy-an-external-api-in-a-custom-endpoint-extension.md b/content/tutorials/5.extensions/proxy-an-external-api-in-a-custom-endpoint-extension.md
index 5db9d984..945c66e4 100644
--- a/content/tutorials/5.extensions/proxy-an-external-api-in-a-custom-endpoint-extension.md
+++ b/content/tutorials/5.extensions/proxy-an-external-api-in-a-custom-endpoint-extension.md
@@ -16,7 +16,7 @@ local API endpoint and credentials, and eliminating Cross-Origin issues.
 
 As an example, this guide will proxy the PokéAPI, but the same approach can be used for any API.
 
-::callout{icon="material-symbols:warning-outline-rounded"}
+::callout{icon="i-lucide-triangle-alert"}
 
 This guide will show you how to proxy an API that does not require authentication. In production, you should consider
 requiring authentication in your proxy endpoints to avoid abuse, especially if the target API performs write operations
@@ -160,7 +160,7 @@ with `directus-extension`. In this case, you may choose to use `directus-extensi
 
 Restart Directus to load the extension.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 Only the `package.json` and `dist` directory are required inside of your extension directory. However, adding the source
 code has no negative effect.
diff --git a/content/tutorials/5.extensions/read-collection-data-in-custom-layouts.md b/content/tutorials/5.extensions/read-collection-data-in-custom-layouts.md
index 910f5698..8a3e2036 100644
--- a/content/tutorials/5.extensions/read-collection-data-in-custom-layouts.md
+++ b/content/tutorials/5.extensions/read-collection-data-in-custom-layouts.md
@@ -196,7 +196,7 @@ router.patch('/', async (req, res) => {
 });
 ```
 
-::callout{icon="material-symbols:warning-outline-rounded"}
+::callout{icon="i-lucide-triangle-alert"}
 
 Updating the field name is not supported at this time.
 
@@ -314,7 +314,7 @@ router.delete('/', async (req, res) => {
 });
 ```
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 Refer to the full list of methods [in our codebase](https://github.com/directus/directus/blob/main/api/src/services).
 
diff --git a/content/tutorials/5.extensions/send-sms-messages-with-twilio-in-custom-operations.md b/content/tutorials/5.extensions/send-sms-messages-with-twilio-in-custom-operations.md
index f99d5f4a..30f7b75e 100644
--- a/content/tutorials/5.extensions/send-sms-messages-with-twilio-in-custom-operations.md
+++ b/content/tutorials/5.extensions/send-sms-messages-with-twilio-in-custom-operations.md
@@ -184,7 +184,7 @@ Ensure the `.env` file has `TWILIO_ACCOUNT_SID`, `TWILIO_AUTH_TOKEN`, and `TWILI
 
 Restart Directus to load the extension.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 Only the `package.json` and `dist` directory are required inside of your extension directory. However, adding the source
 code has no negative effect.
diff --git a/content/tutorials/5.extensions/send-sms-messages-with-twilio-in-custom-panels.md b/content/tutorials/5.extensions/send-sms-messages-with-twilio-in-custom-panels.md
index 7d0b7715..1efefae5 100644
--- a/content/tutorials/5.extensions/send-sms-messages-with-twilio-in-custom-panels.md
+++ b/content/tutorials/5.extensions/send-sms-messages-with-twilio-in-custom-panels.md
@@ -668,7 +668,7 @@ If you don’t have the Twilio Endpoint Extension, follow the instructions
 
 Restart Directus to load the extension.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 Only the `package.json` and `dist` directory are required inside of your extension directory. However, adding the source
 code has no negative effect.
diff --git a/content/tutorials/5.extensions/summarize-relational-items-in-a-custom-display-extension.md b/content/tutorials/5.extensions/summarize-relational-items-in-a-custom-display-extension.md
index 4bde5b8b..4e6a7986 100644
--- a/content/tutorials/5.extensions/summarize-relational-items-in-a-custom-display-extension.md
+++ b/content/tutorials/5.extensions/summarize-relational-items-in-a-custom-display-extension.md
@@ -305,7 +305,7 @@ with `directus-extension`. In this case, you may choose to use `directus-extensi
 
 Restart Directus to load the extension.
 
-::callout{icon="material-symbols:info-outline" title="Required files"}
+::callout{icon="i-lucide-info" title="Required files"}
 
 Only the `package.json` and `dist` directory are required inside of your extension directory. However, adding the source
 code has no negative effect.
diff --git a/content/tutorials/5.extensions/understand-available-slots-in-custom-modules.md b/content/tutorials/5.extensions/understand-available-slots-in-custom-modules.md
index fdeb702b..34dba1f6 100644
--- a/content/tutorials/5.extensions/understand-available-slots-in-custom-modules.md
+++ b/content/tutorials/5.extensions/understand-available-slots-in-custom-modules.md
@@ -74,7 +74,7 @@ an icon inside a circle. The icon relates to the current page such as the collec
 
 ![An icon is shown to the left of the title and breadcrumbs](/img/51558a50-8edf-490b-9c54-5c39a4d3b14d.webp)
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 The icon is `rounded`, `disabled` and `secondary`. This will keep the same look as the rest of Directus but you can
 remove these to customize the look and feel.
@@ -100,7 +100,7 @@ bookmarks. In this example, the slot is used for a clickable icon button.
 
 ![An icon is shown to the right of the title and breadcrumbs](/img/31933ee3-786f-4615-aad7-277fc9d23b89.webp)
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 Any functions for button click actions will need to be included in the `setup` and returned to the template.
 
@@ -144,7 +144,7 @@ You will also need to style the search. I suggest matching the existing one in D
 
 ![A search box and button with an icon](/img/b84c2f45-0db0-4d48-a60d-d8edeb0eef1a.webp)
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 Include functions for the search and any action buttons in your setup and return them to the template.
 
@@ -163,7 +163,7 @@ to ensure it outputs on a single line.
 
 ![To the left of the search box is the text 'ACTION PREPEND' broken over two lines and unstyled.](/img/42c337a1-61a8-4d75-88fb-85b1e1c9dac6.webp)
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 This space is quite limited due to the length of the page title and the amount of actions.
 
@@ -322,7 +322,7 @@ when the permission constant is `false`:
 
 ![Large unauthorized error page](/img/e04a2d6e-6633-4606-9cb5-709168bbc629.webp)
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 The `navigation`, `actions`, and `sidebar` slots have not been rendered because it’s using a separate `private-view`.
 Consider using the `permissions` variable to also prevent the related functions from running as well. This will improve
diff --git a/content/tutorials/5.extensions/use-npm-packages-in-custom-operations.md b/content/tutorials/5.extensions/use-npm-packages-in-custom-operations.md
index 665de5a8..8a44ba14 100644
--- a/content/tutorials/5.extensions/use-npm-packages-in-custom-operations.md
+++ b/content/tutorials/5.extensions/use-npm-packages-in-custom-operations.md
@@ -109,7 +109,7 @@ with `directus-extension`. In this case, you may choose to use `directus-extensi
 
 Restart Directus to load the extension.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 Only the `package.json` and `dist` directory are required inside of your extension directory. However, adding the source
 code has no negative effect.
diff --git a/content/tutorials/5.extensions/validate-phone-numbers-with-twilio-in-a-custom-hook.md b/content/tutorials/5.extensions/validate-phone-numbers-with-twilio-in-a-custom-hook.md
index fe202efb..9bfe9362 100644
--- a/content/tutorials/5.extensions/validate-phone-numbers-with-twilio-in-a-custom-hook.md
+++ b/content/tutorials/5.extensions/validate-phone-numbers-with-twilio-in-a-custom-hook.md
@@ -132,7 +132,7 @@ Ensure the `.env` file has `TWILIO_ACCOUNT_SID` and `TWILIO_AUTH_TOKEN` variable
 
 Restart Directus to load the extension.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 Only the `package.json` and `dist` directory are required inside of your extension directory. However, adding the source
 code has no negative effect.
diff --git a/content/tutorials/6.self-hosting/deploy-directus-to-an-ubuntu-server.md b/content/tutorials/6.self-hosting/deploy-directus-to-an-ubuntu-server.md
index 0b4fdf96..12983060 100644
--- a/content/tutorials/6.self-hosting/deploy-directus-to-an-ubuntu-server.md
+++ b/content/tutorials/6.self-hosting/deploy-directus-to-an-ubuntu-server.md
@@ -43,7 +43,7 @@ In the example below, I am copying the whole Directus folder to the home directo
 
 ![Copying files to the server with scp](/img/09e1807d-271e-4d52-91f6-951d3436ce34.webp)
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 Note that the database used in this tutorial is SQLite. For other types of databases like MySQL and PostgreSQL, you might have to create a database dump and export the dump to your remote server.
 
@@ -134,7 +134,7 @@ On the initial run, Docker will fetch the necessary image from the registry befo
 
 Your application should now be accessible at `http://your_server_ip:8055`.
 
-::callout{icon="material-symbols:info-outline" title="`SQLITE_CANTOPEN` Error"}
+::callout{icon="i-lucide-info" title="`SQLITE_CANTOPEN` Error"}
 
 If you encounter any error e.g `SQLITE_CANTOPEN: unable to open database file`, it is probably due to permission issues. Make sure the user that runs Directus is also the owner of the database file.
 
@@ -146,7 +146,7 @@ Running your application using `sudo docker compose up` will stop it running whe
 
 To ensure your application runs in the background and restarts automatically, you can create a systemd service.
 
-::callout{icon="material-symbols:info-outline" title="What is Systemd?"}
+::callout{icon="i-lucide-info" title="What is Systemd?"}
 
 Systemd is a system and service manager for Linux operating systems. It provides a standard process for controlling the startup, management, and monitoring of services and applications. It is usually defined by a configuration file usually ending with the _.service_ extension.
 
@@ -176,7 +176,7 @@ ExecStop=/usr/bin/docker compose down
 WantedBy=multi-user.target
 ```
 
-::callout{icon="material-symbols:info-outline" title="Navigation"}
+::callout{icon="i-lucide-info" title="Navigation"}
 
 You can get the full path to your directory by running the command `pwd` in the project directory on your server and copying the output.
 
diff --git a/content/tutorials/6.self-hosting/deploy-directus-to-aws-ec2.md b/content/tutorials/6.self-hosting/deploy-directus-to-aws-ec2.md
index ea81586d..83a173cc 100644
--- a/content/tutorials/6.self-hosting/deploy-directus-to-aws-ec2.md
+++ b/content/tutorials/6.self-hosting/deploy-directus-to-aws-ec2.md
@@ -176,7 +176,7 @@ Copy the name of the bucket and region to using in your `docker-compose.yml` con
   STORAGE_S3_ENDPOINT: s3.amazonaws.com
 ```
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 To retrieve your AWS access key details, follow this [guide](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_credentials_access-keys.html#Using_CreateAccessKey).
 
diff --git a/content/tutorials/6.self-hosting/deploy-directus-to-azure-web-apps.md b/content/tutorials/6.self-hosting/deploy-directus-to-azure-web-apps.md
index aada0cc7..ae4f6fcb 100644
--- a/content/tutorials/6.self-hosting/deploy-directus-to-azure-web-apps.md
+++ b/content/tutorials/6.self-hosting/deploy-directus-to-azure-web-apps.md
@@ -60,7 +60,7 @@ Within the Azure Marketplace, select the Web App resource. When creating a Web A
 - **Port:** 8055
 
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 In this section, we will specify the version of Directus as `11.17.0` as the latest at the time of writing. Please refer to the [releases](https://github.com/directus/directus/releases) and replace this with the latest version.
 
@@ -92,7 +92,7 @@ Let’s go through the important parameters in this configuration:
 - Also set `DB_USER` and `DB_PASSWORD` to the credentials you set up during the creation of your Azure Database for PostgreSQL.
 
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 The `WEBSITES_ENABLE_APP_SERVICE_STORAGE` setting must remain at its default value of "off". Changing it to "on" will prevent Directus from starting.
 
@@ -119,7 +119,7 @@ Then return to the Web App and head to Settings -> Configuration -> Path mapping
 | Extensions | Azure Files | SMB | extensions | /directus/extensions |
 | Uploads | Azure Files | SMB | uploads | /directus/uploads |
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 Although Azure Web Apps provide an option to configure volume mounts in the container's configuration screen, this does not work with Directus.
 Keep `WEBSITES_ENABLE_APP_SERVICE_STORAGE` set to its default value of "off".
diff --git a/content/tutorials/6.self-hosting/deploy-directus-to-digital-ocean.md b/content/tutorials/6.self-hosting/deploy-directus-to-digital-ocean.md
index 23594326..283ecbaf 100644
--- a/content/tutorials/6.self-hosting/deploy-directus-to-digital-ocean.md
+++ b/content/tutorials/6.self-hosting/deploy-directus-to-digital-ocean.md
@@ -107,7 +107,7 @@ SYNCHRONIZATION_STORE="redis"
 PUBLIC_URL=${APP_URL}
 ```
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 Generate `SECRET` with:
 
diff --git a/content/tutorials/6.self-hosting/deploy-directus-to-google-cloud-platform.md b/content/tutorials/6.self-hosting/deploy-directus-to-google-cloud-platform.md
index 74d59013..cb63416e 100644
--- a/content/tutorials/6.self-hosting/deploy-directus-to-google-cloud-platform.md
+++ b/content/tutorials/6.self-hosting/deploy-directus-to-google-cloud-platform.md
@@ -42,7 +42,7 @@ Copy the connection name for later usage.
 
 ## Set Up the Docker Container
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 In this section, we will specify the version of Directus as `11.17.0` as the latest at the time of writing. Please refer to the [releases](https://github.com/directus/directus/releases) and replace this with the latest version.
 
@@ -60,7 +60,7 @@ Next, Build the docker image and tag it to be `directus:11.17.0`:
 docker build -t directus:11.17.0 --platform linux/amd64 .
 ```
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 ### Using an Apple Silicon Machine?
 
@@ -90,7 +90,7 @@ Click on **Create** to create a new repository.
 
 To push the `Dockerfile` to the created repository, you must first be authenticated via the CLI that ships Google Cloud SDK.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 In this section, we will specify `us-central1` as the region. If you used a different region, please replace it.
 
diff --git a/content/tutorials/6.self-hosting/deploy-directus-to-railway.md b/content/tutorials/6.self-hosting/deploy-directus-to-railway.md
index 0560b876..8ca175d2 100644
--- a/content/tutorials/6.self-hosting/deploy-directus-to-railway.md
+++ b/content/tutorials/6.self-hosting/deploy-directus-to-railway.md
@@ -56,7 +56,7 @@ The templates preconfigure most of what Directus needs: database, Redis, and (wh
 
 After you save variables, Railway will redeploy the Directus service so the new values take effect. The first time you open your Directus URL, you'll either see the onboarding screen (blank template) or the login screen (CMS template, using the credentials you set).
 
-::callout{icon="material-symbols:info-outline" title="Preconfigured variables"}
+::callout{icon="i-lucide-info" title="Preconfigured variables"}
 The official templates set database, Redis, and (with the Bucket service) S3 storage automatically. Only override those if you're using an external database or storage; otherwise focus on `PUBLIC_URL`. For the CMS template, you can also set `ADMIN_EMAIL` and `ADMIN_PASSWORD` if you didn't during deploy. The blank template creates the first admin via the onboarding UI by default; set `ADMIN_EMAIL` and `ADMIN_PASSWORD` to create it automatically instead.
 ::
 
diff --git a/content/tutorials/6.self-hosting/index.md b/content/tutorials/6.self-hosting/index.md
index f254a6dc..d89bc6ba 100644
--- a/content/tutorials/6.self-hosting/index.md
+++ b/content/tutorials/6.self-hosting/index.md
@@ -20,7 +20,7 @@ Directus Cloud provides infrastructure from the team who builds Directus. It is
 
 :cta-cloud
 
-::callout{icon="material-symbols:school-outline" color="secondary" to="/cloud/getting-started/introduction"}
+::callout{icon="i-lucide-graduation-cap" color="secondary" to="/cloud/getting-started/introduction"}
 Learn more about Directus Cloud.
 ::
 
@@ -28,7 +28,7 @@ Learn more about Directus Cloud.
 
 Directus is provided as a Docker image, so you can deploy it on many different platforms. While each is slightly different, the core concepts are the same. You control the database, cache, and file storage. For a local or deployable setup, start with [Create a project](/getting-started/create-a-project). For environment variables, persistence, and production concepts, see [Deploying Directus](/self-hosting/deploying).
 
-::callout{icon="material-symbols:school-outline" color="secondary" to="/getting-started/create-a-project"}
+::callout{icon="i-lucide-graduation-cap" color="secondary" to="/getting-started/create-a-project"}
 Create a project with Docker.
 ::
 
diff --git a/content/tutorials/7.workflows/build-content-approval-workflows-with-custom-permissions.md b/content/tutorials/7.workflows/build-content-approval-workflows-with-custom-permissions.md
index 5642b94f..049167da 100644
--- a/content/tutorials/7.workflows/build-content-approval-workflows-with-custom-permissions.md
+++ b/content/tutorials/7.workflows/build-content-approval-workflows-with-custom-permissions.md
@@ -40,7 +40,7 @@ This whole workflow is created with permissions. All we need to do to create the
 
 ## How-To Guide
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 To implement a workflow, you'll need:
 
@@ -114,7 +114,7 @@ A minor misconfiguration here could ruin academic integrity. Here's a few potent
 When creating your own workflow, its a good idea to define each role involved, each stage in the workflow, and the
 explicit set of permissions each role has at each stage.
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 Workflows can be further enhanced with custom [Interfaces](/guides/extensions/app-extensions/interfaces) as well as [flows](/guides/flows).
 
diff --git a/content/tutorials/7.workflows/create-github-issues-with-directus-automate.md b/content/tutorials/7.workflows/create-github-issues-with-directus-automate.md
index 136fdd6e..4faaf4ff 100644
--- a/content/tutorials/7.workflows/create-github-issues-with-directus-automate.md
+++ b/content/tutorials/7.workflows/create-github-issues-with-directus-automate.md
@@ -55,7 +55,7 @@ In the payload, you will set the issue title and description:
 }
 ```
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 The body supports any Markdown, so the `>` at the start turns the text after it into a blockquote.
 ::
 
diff --git a/content/tutorials/7.workflows/enrich-user-data-with-clearbit-and-directus-automate.md b/content/tutorials/7.workflows/enrich-user-data-with-clearbit-and-directus-automate.md
index 2ac58d51..092007ee 100644
--- a/content/tutorials/7.workflows/enrich-user-data-with-clearbit-and-directus-automate.md
+++ b/content/tutorials/7.workflows/enrich-user-data-with-clearbit-and-directus-automate.md
@@ -38,7 +38,7 @@ Add a `Authorization` header with the value `Bearer YOUR_KEY`, replacing `YOUR_K
 
 From the resolved path of the previous operation, create an **Update Data** operation. Set the Collection to `directus_users` with Full Access permissions.
 
-::callout{icon="material-symbols:info-outline" title="Set a System Collection"}
+::callout{icon="i-lucide-info" title="Set a System Collection"}
 
 The dropdown in the collection field will only show user-created collections. To add `directus_users`, which is a system collection, click the `{}` button to turn the input to raw mode and type the collection name manually.
 
diff --git a/content/tutorials/7.workflows/generate-transcripts-with-deepgram-and-directus-automate.md b/content/tutorials/7.workflows/generate-transcripts-with-deepgram-and-directus-automate.md
index d1e03fc4..5957cf97 100644
--- a/content/tutorials/7.workflows/generate-transcripts-with-deepgram-and-directus-automate.md
+++ b/content/tutorials/7.workflows/generate-transcripts-with-deepgram-and-directus-automate.md
@@ -58,7 +58,7 @@ Replace `YOUR_DIRECTUS_URL` with the URL for your Directus project, and `TOKEN`
 
 From the resolved path of the previous operation, create an **Update Data** operation. Set the Collection to `directus_files` with Full Access permissions.
 
-::callout{icon="material-symbols:info-outline" title="Set a System Collection"}
+::callout{icon="i-lucide-info" title="Set a System Collection"}
 
 The dropdown in the collection field will only show user-created collections. To add `directus_files`, which is a system collection, click the `{}` button to turn the input to raw mode and type the collection name manually.
 
diff --git a/content/tutorials/7.workflows/invincible-ai-content-workflows-with-inngest-and-directus.md b/content/tutorials/7.workflows/invincible-ai-content-workflows-with-inngest-and-directus.md
index 69e7532c..e1799b15 100644
--- a/content/tutorials/7.workflows/invincible-ai-content-workflows-with-inngest-and-directus.md
+++ b/content/tutorials/7.workflows/invincible-ai-content-workflows-with-inngest-and-directus.md
@@ -81,7 +81,7 @@ The following sections detail the technical implementation.
 ## Implementation Guide
 
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 To implement this integration, you'll want to have
 
diff --git a/content/tutorials/7.workflows/schedule-future-content-with-directus-automate.md b/content/tutorials/7.workflows/schedule-future-content-with-directus-automate.md
index 8934fab2..f6850eda 100644
--- a/content/tutorials/7.workflows/schedule-future-content-with-directus-automate.md
+++ b/content/tutorials/7.workflows/schedule-future-content-with-directus-automate.md
@@ -26,7 +26,7 @@ Last, we'll kick off a new deployment of your static site at your hosting provid
 
 ## How-To Guide
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 You’ll need to have already created a collection for your site content like `articles` or `posts` or `pages` with a
 field `status` that controls the published state.
@@ -97,7 +97,7 @@ field `status` that controls the published state.
 
    d. Check **Emit Events**
 
-   ::callout{icon="material-symbols:warning-outline-rounded"}
+   ::callout{icon="i-lucide-triangle-alert"}
 
    Emit events will trigger an `item.update` event in this flow. Be careful when using it in your flows to avoid
    creating infinite loops where flows continuously trigger one another.
@@ -171,7 +171,7 @@ visitor requests a page from your site, all you need to do is add a filter to yo
 
 #### Examples
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 In these examples, we're using an AND logical operator to only return
 records that match both conditions. This provides a little more control over your published content by ensuring only
diff --git a/content/tutorials/7.workflows/trigger-netlify-site-builds-with-directus-automate.md b/content/tutorials/7.workflows/trigger-netlify-site-builds-with-directus-automate.md
index 0c840cd2..f2ee4d0b 100644
--- a/content/tutorials/7.workflows/trigger-netlify-site-builds-with-directus-automate.md
+++ b/content/tutorials/7.workflows/trigger-netlify-site-builds-with-directus-automate.md
@@ -25,7 +25,7 @@ existing content changes.
 
 ## How-To Guide
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 You’ll need to have already created a collection for your site content like `articles` or `posts` or `pages` with a
 field `status` that controls the published state. You'll also need to have a Netlify account and a site already hosted
@@ -84,7 +84,7 @@ with them.
 
 ### Configure Netlify Build Hook
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 You can learn more about Netlify Build Hooks on their documentation.
 
diff --git a/content/tutorials/7.workflows/trigger-vercel-site-builds-with-directus-automate.md b/content/tutorials/7.workflows/trigger-vercel-site-builds-with-directus-automate.md
index cd078491..93102703 100644
--- a/content/tutorials/7.workflows/trigger-vercel-site-builds-with-directus-automate.md
+++ b/content/tutorials/7.workflows/trigger-vercel-site-builds-with-directus-automate.md
@@ -23,7 +23,7 @@ existing content changes.
 
 ## How-To Guide
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 You’ll need to have already created a collection for your site content like `articles` or `posts` or `pages` with a
 field `status` that controls the published state. You'll also need to have a Vercel account and a site already hosted
@@ -82,7 +82,7 @@ with them.
 
 ### Configure Vercel Deploy Hook
 
-::callout{icon="material-symbols:info-outline"}
+::callout{icon="i-lucide-info"}
 
 You can learn more about Vercel Deploy Hooks on their documentation.
 
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 18253281..c49fe7db 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -219,7 +219,7 @@ export default defineNuxtConfig({
 
 	icon: {
 		serverBundle: {
-			collections: ['material-symbols', 'simple-icons'],
+			collections: ['lucide', 'material-symbols', 'simple-icons'],
 		},
 		customCollections: [
 			{
diff --git a/package.json b/package.json
index 542c5903..a7c8ce96 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
 	"dependencies": {
 		"@directus/openapi": "0.3.0",
 		"@directus/sdk": "^21.2.2",
-		"@iconify-json/heroicons-outline": "1.2.1",
+		"@iconify-json/lucide": "1.2.111",
 		"@iconify-json/material-symbols": "1.2.68",
 		"@iconify-json/simple-icons": "1.2.79",
 		"@nuxt/content": "3.13.0",
@@ -47,7 +47,6 @@
 		"zod": "4.4.3"
 	},
 	"devDependencies": {
-		"@iconify-json/ph": "^1.2.2",
 		"@nuxt/eslint": "1.15.2",
 		"@nuxt/scripts": "1.0.2",
 		"@nuxt/test-utils": "^4.0.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 10b72eb1..d86e00a4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -18,9 +18,9 @@ importers:
       '@directus/sdk':
         specifier: ^21.2.2
         version: 21.2.2
-      '@iconify-json/heroicons-outline':
-        specifier: 1.2.1
-        version: 1.2.1
+      '@iconify-json/lucide':
+        specifier: 1.2.111
+        version: 1.2.111
       '@iconify-json/material-symbols':
         specifier: 1.2.68
         version: 1.2.68
@@ -91,9 +91,6 @@ importers:
         specifier: 4.4.3
         version: 4.4.3
     devDependencies:
-      '@iconify-json/ph':
-        specifier: ^1.2.2
-        version: 1.2.2
       '@nuxt/eslint':
         specifier: 1.15.2
         version: 1.15.2(@typescript-eslint/utils@8.59.0(eslint@9.28.0(jiti@2.6.1))(typescript@6.0.3))(@vue/compiler-sfc@3.5.33)(eslint@9.28.0(jiti@2.6.1))(magicast@0.5.2)(typescript@6.0.3)(vite@7.3.2(@types/node@22.19.17)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.2)(tsx@4.22.3)(yaml@2.9.0))
@@ -784,15 +781,12 @@ packages:
     resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
     engines: {node: '>=18.18'}
 
-  '@iconify-json/heroicons-outline@1.2.1':
-    resolution: {integrity: sha512-QNYV4/KsW8Ww9a3B+hxDntS5BwLLbErKpL1V3MkvB8X+ZVTX5VLxjlj8rAEih+GCDWzaiZJOrdO/pagvsuBkXg==}
+  '@iconify-json/lucide@1.2.111':
+    resolution: {integrity: sha512-S6oXom2YOKuXFxWofhHa2oq++Z3WeZ78dRFDA7aEEJqyNCJlQd1UGAfN8u2gD2NzvYotmm+j5kH678viWfZbGQ==}
 
   '@iconify-json/material-symbols@1.2.68':
     resolution: {integrity: sha512-MGo7A6j+evFoks/kIZAdAKMSKl24ARa19bUvXMw/RVFKuMo2tIc27HZitTuXna858pvhjzMaFq8UrXaKqbQGjA==}
 
-  '@iconify-json/ph@1.2.2':
-    resolution: {integrity: sha512-PgkEZNtqa8hBGjHXQa4pMwZa93hmfu8FUSjs/nv4oUU6yLsgv+gh9nu28Kqi8Fz9CCVu4hj1MZs9/60J57IzFw==}
-
   '@iconify-json/simple-icons@1.2.79':
     resolution: {integrity: sha512-aNyO7Fd1qej9oQfIyohYFRv0lhQLaZ+6UkK1c1qwax0MDPUOZOdq65MlU500kow97pD/W+b2u1And3e25eE24Q==}
 
@@ -8157,7 +8151,7 @@ snapshots:
 
   '@humanwhocodes/retry@0.4.3': {}
 
-  '@iconify-json/heroicons-outline@1.2.1':
+  '@iconify-json/lucide@1.2.111':
     dependencies:
       '@iconify/types': 2.0.0
 
@@ -8165,10 +8159,6 @@ snapshots:
     dependencies:
       '@iconify/types': 2.0.0
 
-  '@iconify-json/ph@1.2.2':
-    dependencies:
-      '@iconify/types': 2.0.0
-
   '@iconify-json/simple-icons@1.2.79':
     dependencies:
       '@iconify/types': 2.0.0
diff --git a/shared/utils/docsSections.ts b/shared/utils/docsSections.ts
index 44ac2743..4442429c 100644
--- a/shared/utils/docsSections.ts
+++ b/shared/utils/docsSections.ts
@@ -34,70 +34,70 @@ export const docsSections: DocsSection[] = [
 		label: 'Get Started',
 		to: '/getting-started/overview',
 		prefixes: ['/getting-started'],
-		icon: 'material-symbols:rocket-launch-outline',
+		icon: 'i-lucide-rocket',
 	},
 	{
 		id: 'guides',
 		label: 'Guides',
 		to: '/guides/data-model/collections',
 		prefixes: ['/guides'],
-		icon: 'material-symbols:menu-book-outline',
+		icon: 'i-lucide-book-open',
 	},
 	{
 		id: 'deploy',
 		label: 'Hosting',
 		to: '/cloud/getting-started/introduction',
 		prefixes: ['/cloud', '/self-hosting'],
-		icon: 'material-symbols:cloud-outline',
+		icon: 'i-lucide-cloud',
 	},
 	{
 		id: 'configuration',
 		label: 'Configuration',
 		to: '/configuration/intro',
 		prefixes: ['/configuration'],
-		icon: 'material-symbols:settings-outline',
+		icon: 'i-lucide-settings',
 	},
 	{
 		id: 'frameworks',
 		label: 'Frameworks',
 		to: '/frameworks',
 		prefixes: ['/frameworks'],
-		icon: 'material-symbols:stacks-outline',
+		icon: 'i-lucide-layers',
 	},
 	{
 		id: 'api',
 		label: 'API Reference',
 		to: '/api',
 		prefixes: ['/api'],
-		icon: 'material-symbols:code',
+		icon: 'i-lucide-code',
 	},
 	// {
 	// 	id: 'reference',
 	// 	label: 'Reference',
 	// 	to: '/reference/interfaces',
 	// 	prefixes: ['/reference'],
-	// 	icon: 'material-symbols:bookmarks-outline',
+	// 	icon: 'i-lucide-bookmark',
 	// },
 	{
 		id: 'tutorials',
 		label: 'Tutorials',
 		to: '/tutorials',
 		prefixes: ['/tutorials'],
-		icon: 'material-symbols:article-outline',
+		icon: 'i-lucide-file-text',
 	},
 	{
 		id: 'community',
 		label: 'Community',
 		to: '/community/overview/welcome',
 		prefixes: ['/community', '/releases'],
-		icon: 'material-symbols:groups-outline',
+		icon: 'i-lucide-users',
 	},
 	{
 		id: 'licensing',
 		label: 'Licensing',
 		to: '/licensing/overview',
 		prefixes: ['/licensing'],
-		icon: 'material-symbols:key-outline',
+		icon: 'i-lucide-key-round',
 	},
 ];
 
@@ -106,35 +106,35 @@ export const docsGroups: DocsGroup[] = [
 		id: 'docs',
 		label: 'Docs',
 		to: '/getting-started/overview',
-		icon: 'material-symbols:menu-book-outline',
+		icon: 'i-lucide-book-open',
 		sectionIds: ['getting-started', 'guides', 'deploy', 'configuration', 'frameworks', 'community'],
 	},
 	{
 		id: 'reference',
 		label: 'API',
 		to: '/api',
-		icon: 'material-symbols:code',
+		icon: 'i-lucide-code',
 		sectionIds: ['api'],
 	},
 	// {
 	// 	id: 'legacy-reference',
 	// 	label: 'Reference',
 	// 	to: '/reference/interfaces',
-	// 	icon: 'material-symbols:bookmarks-outline',
+	// 	icon: 'i-lucide-bookmark',
 	// 	sectionIds: ['reference'],
 	// },
 	{
 		id: 'examples',
 		label: 'Tutorials',
 		to: '/tutorials',
-		icon: 'material-symbols:article-outline',
+		icon: 'i-lucide-file-text',
 		sectionIds: ['tutorials'],
 	},
 	{
 		id: 'licensing',
 		label: 'Licensing',
 		to: '/licensing/overview',
-		icon: 'material-symbols:key-outline',
+		icon: 'i-lucide-key-round',
 		sectionIds: ['licensing'],
 	},
 ];