From effb57d3a3ca83b31861fabe8aef0f5ea224097f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@nuxt.com>
Date: Tue, 17 Sep 2024 17:33:49 +0200
Subject: [PATCH] docs: remove duotone icons for clarity (#29040)

---
 docs/1.getting-started/1.introduction.md           |  2 +-
 docs/1.getting-started/10.deployment.md            |  2 +-
 docs/1.getting-started/11.testing.md               |  4 ++--
 docs/1.getting-started/12.upgrade.md               |  4 ++--
 docs/1.getting-started/2.installation.md           |  4 ++--
 docs/1.getting-started/3.configuration.md          |  4 ++--
 docs/1.getting-started/3.views.md                  |  2 +-
 docs/1.getting-started/4.assets.md                 |  2 +-
 docs/1.getting-started/4.styling.md                |  2 +-
 docs/1.getting-started/5.routing.md                |  2 +-
 docs/1.getting-started/5.seo-meta.md               |  2 +-
 docs/1.getting-started/5.transitions.md            |  2 +-
 docs/1.getting-started/6.data-fetching.md          |  6 +++---
 docs/1.getting-started/7.state-management.md       |  8 ++++----
 docs/1.getting-started/8.error-handling.md         |  2 +-
 docs/1.getting-started/8.server.md                 |  4 ++--
 docs/1.getting-started/9.layers.md                 |  6 +++---
 docs/1.getting-started/9.prerendering.md           |  4 ++--
 docs/1.getting-started/_dir.yml                    |  2 +-
 docs/2.guide/0.index.md                            |  8 ++++----
 docs/2.guide/1.concepts/1.auto-imports.md          |  6 +++---
 docs/2.guide/1.concepts/8.typescript.md            |  2 +-
 docs/2.guide/1.concepts/9.code-style.md            |  2 +-
 docs/2.guide/1.concepts/_dir.yml                   |  2 +-
 docs/2.guide/2.directory-structure/0.nuxt.md       |  2 +-
 docs/2.guide/2.directory-structure/0.output.md     |  2 +-
 docs/2.guide/2.directory-structure/1.assets.md     |  2 +-
 docs/2.guide/2.directory-structure/1.components.md |  6 +++---
 .../2.guide/2.directory-structure/1.composables.md |  2 +-
 docs/2.guide/2.directory-structure/1.content.md    |  2 +-
 docs/2.guide/2.directory-structure/1.layouts.md    |  4 ++--
 docs/2.guide/2.directory-structure/1.middleware.md |  2 +-
 docs/2.guide/2.directory-structure/1.modules.md    |  4 ++--
 .../2.directory-structure/1.node_modules.md        |  2 +-
 docs/2.guide/2.directory-structure/1.pages.md      |  2 +-
 docs/2.guide/2.directory-structure/1.plugins.md    |  4 ++--
 docs/2.guide/2.directory-structure/1.public.md     |  2 +-
 docs/2.guide/2.directory-structure/1.server.md     |  2 +-
 docs/2.guide/2.directory-structure/1.utils.md      |  2 +-
 docs/2.guide/2.directory-structure/2.env.md        |  2 +-
 docs/2.guide/2.directory-structure/2.gitignore.md  |  2 +-
 docs/2.guide/2.directory-structure/2.nuxtignore.md |  2 +-
 docs/2.guide/2.directory-structure/3.app-config.md |  2 +-
 docs/2.guide/2.directory-structure/3.app.md        |  2 +-
 docs/2.guide/2.directory-structure/3.error.md      |  2 +-
 .../2.guide/2.directory-structure/3.nuxt-config.md |  2 +-
 docs/2.guide/2.directory-structure/3.package.md    |  2 +-
 docs/2.guide/2.directory-structure/3.tsconfig.md   |  2 +-
 docs/2.guide/2.directory-structure/_dir.yml        |  2 +-
 .../3.going-further/1.experimental-features.md     |  8 ++++----
 docs/2.guide/3.going-further/10.runtime-config.md  |  2 +-
 docs/2.guide/3.going-further/3.modules.md          | 10 +++++-----
 docs/2.guide/3.going-further/_dir.yml              |  2 +-
 docs/2.guide/4.recipes/_dir.yml                    |  2 +-
 docs/2.guide/_dir.yml                              |  2 +-
 docs/3.api/1.components/_dir.yml                   |  2 +-
 docs/3.api/2.composables/_dir.yml                  |  2 +-
 docs/3.api/2.composables/use-fetch.md              |  2 +-
 docs/3.api/2.composables/use-nuxt-app.md           |  2 +-
 docs/3.api/2.composables/use-state.md              |  2 +-
 docs/3.api/3.utils/$fetch.md                       |  4 ++--
 docs/3.api/3.utils/_dir.yml                        |  2 +-
 docs/3.api/3.utils/define-route-rules.md           |  4 ++--
 docs/3.api/3.utils/preload-route-components.md     |  2 +-
 docs/3.api/3.utils/reload-nuxt-app.md              |  2 +-
 docs/3.api/4.commands/_dir.yml                     |  2 +-
 docs/3.api/5.kit/12.resolving.md                   |  2 +-
 docs/3.api/5.kit/4.autoimports.md                  |  2 +-
 docs/3.api/5.kit/5.components.md                   |  2 +-
 docs/3.api/5.kit/7.pages.md                        |  6 +++---
 docs/3.api/5.kit/9.plugins.md                      |  4 ++--
 docs/3.api/5.kit/_dir.yml                          |  2 +-
 docs/3.api/6.advanced/_dir.yml                     |  2 +-
 docs/3.api/6.nuxt-config.md                        |  2 +-
 docs/3.api/index.md                                | 14 +++++++-------
 docs/5.community/2.getting-help.md                 |  2 +-
 docs/5.community/3.reporting-bugs.md               |  2 +-
 docs/5.community/4.contribution.md                 | 10 +++++-----
 docs/5.community/5.framework-contribution.md       |  2 +-
 docs/5.community/6.roadmap.md                      |  2 +-
 docs/5.community/7.changelog.md                    |  2 +-
 docs/5.community/_dir.yml                          |  2 +-
 docs/6.bridge/_dir.yml                             |  2 +-
 docs/7.migration/20.module-authors.md              |  2 +-
 docs/7.migration/_dir.yml                          |  2 +-
 docs/_dir.yml                                      |  2 +-
 86 files changed, 131 insertions(+), 131 deletions(-)

diff --git a/docs/1.getting-started/1.introduction.md b/docs/1.getting-started/1.introduction.md
index 2860e5bde3..90f7e84da0 100644
--- a/docs/1.getting-started/1.introduction.md
+++ b/docs/1.getting-started/1.introduction.md
@@ -2,7 +2,7 @@
 title: Introduction
 description: Nuxt's goal is to make web development intuitive and performant with a great Developer Experience in mind.
 navigation:
-  icon: i-ph-info-duotone
+  icon: i-ph-info
 ---
 
 Nuxt is a free and [open-source framework](https://github.com/nuxt/nuxt) with an intuitive and extendable way to create type-safe, performant and production-grade full-stack web applications and websites with [Vue.js](https://vuejs.org).
diff --git a/docs/1.getting-started/10.deployment.md b/docs/1.getting-started/10.deployment.md
index 9043f0035c..5b17574f89 100644
--- a/docs/1.getting-started/10.deployment.md
+++ b/docs/1.getting-started/10.deployment.md
@@ -1,7 +1,7 @@
 ---
 title: 'Deployment'
 description: Learn how to deploy your Nuxt application to any hosting provider.
-navigation.icon: i-ph-cloud-duotone
+navigation.icon: i-ph-cloud
 ---
 
 A Nuxt application can be deployed on a Node.js server, pre-rendered for static hosting, or deployed to serverless or edge (CDN) environments.
diff --git a/docs/1.getting-started/11.testing.md b/docs/1.getting-started/11.testing.md
index aa5df5c718..dce433a768 100644
--- a/docs/1.getting-started/11.testing.md
+++ b/docs/1.getting-started/11.testing.md
@@ -1,7 +1,7 @@
 ---
 title: Testing
 description: How to test your Nuxt application.
-navigation.icon: i-ph-check-circle-duotone
+navigation.icon: i-ph-check-circle
 ---
 
 ::tip
@@ -10,7 +10,7 @@ If you are a module author, you can find more specific information in the [Modul
 
 Nuxt offers first-class support for end-to-end and unit testing of your Nuxt application via `@nuxt/test-utils`, a library of test utilities and configuration that currently powers the [tests we use on Nuxt itself](https://github.com/nuxt/nuxt/tree/main/test) and tests throughout the module ecosystem.
 
-::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=yGzwk9xi9gU" target="_blank"}
+::tip{icon="i-ph-video" to="https://www.youtube.com/watch?v=yGzwk9xi9gU" target="_blank"}
 Watch a video from Alexander Lichter about getting started with the `@nuxt/test-utils`.
 ::
 
diff --git a/docs/1.getting-started/12.upgrade.md b/docs/1.getting-started/12.upgrade.md
index 096aa164a6..760bb6ab1e 100644
--- a/docs/1.getting-started/12.upgrade.md
+++ b/docs/1.getting-started/12.upgrade.md
@@ -1,7 +1,7 @@
 ---
 title: Upgrade Guide
 description: 'Learn how to upgrade to the latest Nuxt version.'
-navigation.icon: i-ph-arrow-circle-up-duotone
+navigation.icon: i-ph-arrow-circle-up
 ---
 
 
@@ -47,7 +47,7 @@ Nuxt 4 is planned to be released **on or before June 14** (though obviously this
 
 Until then, it is possible to test many of Nuxt 4's breaking changes from Nuxt version 3.12+.
 
-::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=r4wFKlcJK6c" target="_blank"}
+::tip{icon="i-ph-video" to="https://www.youtube.com/watch?v=r4wFKlcJK6c" target="_blank"}
 Watch a video from Alexander Lichter showing how to opt in to Nuxt 4's breaking changes already.
 ::
 
diff --git a/docs/1.getting-started/2.installation.md b/docs/1.getting-started/2.installation.md
index 42bba1705b..128a135f57 100644
--- a/docs/1.getting-started/2.installation.md
+++ b/docs/1.getting-started/2.installation.md
@@ -1,7 +1,7 @@
 ---
 title: 'Installation'
 description: 'Get started with Nuxt quickly with our online starters or start locally with your terminal.'
-navigation.icon: i-ph-play-duotone
+navigation.icon: i-ph-play
 ---
 
 ## Play Online
@@ -94,7 +94,7 @@ bun run dev -o
 ```
 ::
 
-::tip{icon="i-ph-check-circle-duotone"}
+::tip{icon="i-ph-check-circle"}
 Well done! A browser window should automatically open for <http://localhost:3000>.
 ::
 
diff --git a/docs/1.getting-started/3.configuration.md b/docs/1.getting-started/3.configuration.md
index f3805f283f..866de735f5 100644
--- a/docs/1.getting-started/3.configuration.md
+++ b/docs/1.getting-started/3.configuration.md
@@ -1,7 +1,7 @@
 ---
 title: Configuration
 description: Nuxt is configured with sensible defaults to make you productive.
-navigation.icon: i-ph-gear-duotone
+navigation.icon: i-ph-gear
 ---
 
 
@@ -46,7 +46,7 @@ export default defineNuxtConfig({
 })
 ```
 
-::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=DFZI2iVCrNc" target="_blank"}
+::tip{icon="i-ph-video" to="https://www.youtube.com/watch?v=DFZI2iVCrNc" target="_blank"}
 Watch a video from Alexander Lichter about the env-aware `nuxt.config.ts`.
 ::
 
diff --git a/docs/1.getting-started/3.views.md b/docs/1.getting-started/3.views.md
index a3275b05c2..e169bdfa66 100644
--- a/docs/1.getting-started/3.views.md
+++ b/docs/1.getting-started/3.views.md
@@ -1,7 +1,7 @@
 ---
 title: 'Views'
 description: 'Nuxt provides several component layers to implement the user interface of your application.'
-navigation.icon: i-ph-layout-duotone
+navigation.icon: i-ph-layout
 ---
 
 ## `app.vue`
diff --git a/docs/1.getting-started/4.assets.md b/docs/1.getting-started/4.assets.md
index ac0b964a2e..a46f973deb 100644
--- a/docs/1.getting-started/4.assets.md
+++ b/docs/1.getting-started/4.assets.md
@@ -1,7 +1,7 @@
 ---
 title: 'Assets'
 description: 'Nuxt offers two options for your assets.'
-navigation.icon: i-ph-image-duotone
+navigation.icon: i-ph-image
 ---
 
 Nuxt uses two directories to handle assets like stylesheets, fonts or images.
diff --git a/docs/1.getting-started/4.styling.md b/docs/1.getting-started/4.styling.md
index 61ae9da785..383bed144b 100644
--- a/docs/1.getting-started/4.styling.md
+++ b/docs/1.getting-started/4.styling.md
@@ -1,7 +1,7 @@
 ---
 title: 'Styling'
 description: 'Learn how to style your Nuxt application.'
-navigation.icon: i-ph-palette-duotone
+navigation.icon: i-ph-palette
 ---
 
 Nuxt is highly flexible when it comes to styling. Write your own styles, or reference local and external stylesheets.
diff --git a/docs/1.getting-started/5.routing.md b/docs/1.getting-started/5.routing.md
index e39d5d446b..e732502f6c 100644
--- a/docs/1.getting-started/5.routing.md
+++ b/docs/1.getting-started/5.routing.md
@@ -1,7 +1,7 @@
 ---
 title: 'Routing'
 description: Nuxt file-system routing creates a route for every file in the pages/ directory.
-navigation.icon: i-ph-signpost-duotone
+navigation.icon: i-ph-signpost
 ---
 
 One core feature of Nuxt is the file system router. Every Vue file inside the [`pages/`](/docs/guide/directory-structure/pages) directory creates a corresponding URL (or route) that displays the contents of the file. By using dynamic imports for each page, Nuxt leverages code-splitting to ship the minimum amount of JavaScript for the requested route.
diff --git a/docs/1.getting-started/5.seo-meta.md b/docs/1.getting-started/5.seo-meta.md
index 91b8fed31f..46a3f2298d 100644
--- a/docs/1.getting-started/5.seo-meta.md
+++ b/docs/1.getting-started/5.seo-meta.md
@@ -1,7 +1,7 @@
 ---
 title: SEO and Meta
 description: Improve your Nuxt app's SEO with powerful head config, composables and components.
-navigation.icon: i-ph-file-search-duotone
+navigation.icon: i-ph-file-search
 ---
 
 ## Defaults
diff --git a/docs/1.getting-started/5.transitions.md b/docs/1.getting-started/5.transitions.md
index ccabe0ed6d..dcef4b284e 100644
--- a/docs/1.getting-started/5.transitions.md
+++ b/docs/1.getting-started/5.transitions.md
@@ -1,7 +1,7 @@
 ---
 title: 'Transitions'
 description: Apply transitions between pages and layouts with Vue or native browser View Transitions.
-navigation.icon: i-ph-exclude-square-duotone
+navigation.icon: i-ph-exclude-square
 ---
 
 ::note
diff --git a/docs/1.getting-started/6.data-fetching.md b/docs/1.getting-started/6.data-fetching.md
index 39d82835c2..44bedcda96 100644
--- a/docs/1.getting-started/6.data-fetching.md
+++ b/docs/1.getting-started/6.data-fetching.md
@@ -1,7 +1,7 @@
 ---
 title: 'Data fetching'
 description: Nuxt provides composables to handle data fetching within your application.
-navigation.icon: i-ph-plugs-connected-duotone
+navigation.icon: i-ph-plugs-connected
 ---
 
 Nuxt comes with two composables and a built-in library to perform data-fetching in browser or server environments: `useFetch`, [`useAsyncData`](/docs/api/composables/use-async-data) and `$fetch`.
@@ -54,7 +54,7 @@ const { data: count } = await useFetch('/api/count')
 
 This composable is a wrapper around the [`useAsyncData`](/docs/api/composables/use-async-data) composable and `$fetch` utility.
 
-::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=njsGVmcWviY" target="_blank"}
+::tip{icon="i-ph-video" to="https://www.youtube.com/watch?v=njsGVmcWviY" target="_blank"}
 Watch the video from Alexander Lichter to avoid using `useFetch` the wrong way!
 ::
 
@@ -97,7 +97,7 @@ The `useAsyncData` composable is responsible for wrapping async logic and return
 It's developer experience sugar for the most common use case.
 ::
 
-::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=0X-aOpSGabA" target="_blank"}
+::tip{icon="i-ph-video" to="https://www.youtube.com/watch?v=0X-aOpSGabA" target="_blank"}
 Watch a video from Alexander Lichter to dig deeper into the difference between `useFetch` and `useAsyncData`.
 ::
 
diff --git a/docs/1.getting-started/7.state-management.md b/docs/1.getting-started/7.state-management.md
index 46e7b08ba2..94bf67f6b9 100644
--- a/docs/1.getting-started/7.state-management.md
+++ b/docs/1.getting-started/7.state-management.md
@@ -1,14 +1,14 @@
 ---
 title: 'State Management'
 description: Nuxt provides powerful state management libraries and the useState composable to create a reactive and SSR-friendly shared state.
-navigation.icon: i-ph-database-duotone
+navigation.icon: i-ph-database
 ---
 
 Nuxt provides the [`useState`](/docs/api/composables/use-state) composable to create a reactive and SSR-friendly shared state across components.
 
 [`useState`](/docs/api/composables/use-state) is an SSR-friendly [`ref`](https://vuejs.org/api/reactivity-core.html#ref) replacement. Its value will be preserved after server-side rendering (during client-side hydration) and shared across all components using a unique key.
 
-::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=mv0WcBABcIk" target="_blank"}
+::tip{icon="i-ph-video" to="https://www.youtube.com/watch?v=mv0WcBABcIk" target="_blank"}
 Watch a video from Alexander Lichter about why and when to use `useState()`.
 ::
 
@@ -27,7 +27,7 @@ Never define `const state = ref()` outside of `<script setup>` or `setup()` func
 For example, doing `export myState = ref({})` would result in state shared across requests on the server and can lead to memory leaks.
 ::
 
-::tip{icon="i-ph-check-circle-duotone"}
+::tip{icon="i-ph-check-circle"}
 Instead use `const useX = () => useState('x')`
 ::
 
@@ -212,7 +212,7 @@ const color = useColor() // Same as useState('color')
 </template>
 ```
 
-::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=dZSNW07sO-A" target="_blank"}
+::tip{icon="i-ph-video" to="https://www.youtube.com/watch?v=dZSNW07sO-A" target="_blank"}
 Watch a video from Daniel Roe on how to deal with global state and SSR in Nuxt.
 ::
 
diff --git a/docs/1.getting-started/8.error-handling.md b/docs/1.getting-started/8.error-handling.md
index e72484dcaf..7055b483b3 100644
--- a/docs/1.getting-started/8.error-handling.md
+++ b/docs/1.getting-started/8.error-handling.md
@@ -1,7 +1,7 @@
 ---
 title: 'Error Handling'
 description: 'Learn how to catch and handle errors in Nuxt.'
-navigation.icon: i-ph-bug-beetle-duotone
+navigation.icon: i-ph-bug-beetle
 ---
 
 Nuxt is a full-stack framework, which means there are several sources of unpreventable user runtime errors that can happen in different contexts:
diff --git a/docs/1.getting-started/8.server.md b/docs/1.getting-started/8.server.md
index 2a67cc3945..434d7619ef 100644
--- a/docs/1.getting-started/8.server.md
+++ b/docs/1.getting-started/8.server.md
@@ -1,7 +1,7 @@
 ---
 title: 'Server'
 description: Build full-stack applications with Nuxt's server framework. You can fetch data from your database or another server, create APIs, or even generate static server-side content like a sitemap or a RSS feed - all from a single codebase.
-navigation.icon: i-ph-computer-tower-duotone
+navigation.icon: i-ph-computer-tower
 ---
 
 :read-more{to="/docs/guide/directory-structure/server"}
@@ -20,7 +20,7 @@ Using Nitro gives Nuxt superpowers:
 
 Nitro is internally using [h3](https://github.com/unjs/h3), a minimal H(TTP) framework built for high performance and portability.
 
-::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=DkvgJa-X31k" target="_blank"}
+::tip{icon="i-ph-video" to="https://www.youtube.com/watch?v=DkvgJa-X31k" target="_blank"}
 Watch a video from Alexander Lichter to understand the responsibilities of Nuxt and Nitro in your application.
 ::
 
diff --git a/docs/1.getting-started/9.layers.md b/docs/1.getting-started/9.layers.md
index 05763934e0..4fade99fe4 100644
--- a/docs/1.getting-started/9.layers.md
+++ b/docs/1.getting-started/9.layers.md
@@ -1,7 +1,7 @@
 ---
 title: 'Layers'
 description: Nuxt provides a powerful system that allows you to extend the default files, configs, and much more.
-navigation.icon: i-ph-stack-duotone
+navigation.icon: i-ph-stack
 ---
 
 One of the core features of Nuxt is the layers and extending support. You can extend a default Nuxt application to reuse components, utils, and configuration. The layers structure is almost identical to a standard Nuxt application which makes them easy to author and maintain.
@@ -53,11 +53,11 @@ Nuxt uses [unjs/c12](https://c12.unjs.io) and [unjs/giget](https://giget.unjs.io
 Read more about layers in the **Layer Author Guide**.
 ::
 
-::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=lnFCM7c9f7I" target="_blank"}
+::tip{icon="i-ph-video" to="https://www.youtube.com/watch?v=lnFCM7c9f7I" target="_blank"}
 Watch a video from Learn Vue about Nuxt Layers.
 ::
 
-::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=fr5yo3aVkfA" target="_blank"}
+::tip{icon="i-ph-video" to="https://www.youtube.com/watch?v=fr5yo3aVkfA" target="_blank"}
 Watch a video from Alexander Lichter about Nuxt Layers.
 ::
 
diff --git a/docs/1.getting-started/9.prerendering.md b/docs/1.getting-started/9.prerendering.md
index 18e82efdf5..5644911820 100644
--- a/docs/1.getting-started/9.prerendering.md
+++ b/docs/1.getting-started/9.prerendering.md
@@ -1,7 +1,7 @@
 ---
 title: "Prerendering"
 description: Nuxt allows pages to be statically rendered at build time to improve certain performance or SEO metrics
-navigation.icon: i-ph-code-block-duotone
+navigation.icon: i-ph-code-block
 ---
 
 Nuxt allows for select pages from your application to be rendered at build time. Nuxt will serve the prebuilt pages when requested instead of generating them on the fly.
@@ -105,7 +105,7 @@ Read more about Nitro's `routeRules` configuration.
 
 As a shorthand, you can also configure this in a page file using [`defineRouteRules`](/docs/api/utils/define-route-rules).
 
-::read-more{to="/docs/guide/going-further/experimental-features#inlinerouterules" icon="i-ph-star-duotone"}
+::read-more{to="/docs/guide/going-further/experimental-features#inlinerouterules" icon="i-ph-star"}
 This feature is experimental and in order to use it you must enable the `experimental.inlineRouteRules` option in your `nuxt.config`.
 ::
 
diff --git a/docs/1.getting-started/_dir.yml b/docs/1.getting-started/_dir.yml
index 2a4a0c0f12..ef9e76455c 100644
--- a/docs/1.getting-started/_dir.yml
+++ b/docs/1.getting-started/_dir.yml
@@ -1,3 +1,3 @@
 title: Get Started
 titleTemplate: '%s · Get Started with Nuxt'
-icon: i-ph-rocket-launch-duotone
+icon: i-ph-rocket-launch
diff --git a/docs/2.guide/0.index.md b/docs/2.guide/0.index.md
index a93d01cdb6..5f2e2f46a0 100644
--- a/docs/2.guide/0.index.md
+++ b/docs/2.guide/0.index.md
@@ -7,16 +7,16 @@ surround: false
 ---
 
 ::card-group{class="sm:grid-cols-1"}
-  ::card{icon="i-ph-medal-duotone" title="Key Concepts" to="/docs/guide/concepts"}
+  ::card{icon="i-ph-medal" title="Key Concepts" to="/docs/guide/concepts"}
   Discover the main concepts behind Nuxt, from auto-import, hybrid rendering to its TypeScript support.
   ::
-  ::card{icon="i-ph-folders-duotone" title="Directory Structure" to="/docs/guide/directory-structure"}
+  ::card{icon="i-ph-folders" title="Directory Structure" to="/docs/guide/directory-structure"}
   Learn about Nuxt directory structure and what benefits each directory or file offers.
   ::
-  ::card{icon="i-ph-star-duotone" title="Going Further" to="/docs/guide/going-further"}
+  ::card{icon="i-ph-star" title="Going Further" to="/docs/guide/going-further"}
   Master Nuxt with advanced concepts like experimental features, hooks, modules, and more.
   ::
-  ::card{icon="i-ph-book-open-duotone" title="Recipes" to="/docs/guide/recipes"}
+  ::card{icon="i-ph-book-open" title="Recipes" to="/docs/guide/recipes"}
   Find solutions to common problems and learn how to implement them in your Nuxt project.
   ::
 ::
diff --git a/docs/2.guide/1.concepts/1.auto-imports.md b/docs/2.guide/1.concepts/1.auto-imports.md
index a0b54f7657..1111714a9e 100644
--- a/docs/2.guide/1.concepts/1.auto-imports.md
+++ b/docs/2.guide/1.concepts/1.auto-imports.md
@@ -60,7 +60,7 @@ That means that (with very few exceptions) you cannot use them outside a Nuxt pl
 
 If you get an error message like `Nuxt instance is unavailable` then it probably means you are calling a Nuxt composable in the wrong place in the Vue or Nuxt lifecycle.
 
-::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=ofuKRZLtOdY" target="_blank"}
+::tip{icon="i-ph-video" to="https://www.youtube.com/watch?v=ofuKRZLtOdY" target="_blank"}
 Watch a video from Alexander Lichter about handling async code in composables and fixing `Nuxt instance is unavailable` in your app.
 ::
 
@@ -68,7 +68,7 @@ Watch a video from Alexander Lichter about handling async code in composables an
 When using a composable that requires the Nuxt context inside a non-SFC component, you need to wrap your component with `defineNuxtComponent` instead of `defineComponent`
 ::
 
-::read-more{to="/docs/guide/going-further/experimental-features#asynccontext" icon="i-ph-star-duotone"}
+::read-more{to="/docs/guide/going-further/experimental-features#asynccontext" icon="i-ph-star"}
 Checkout the `asyncContext` experimental feature to use Nuxt composables in async functions.
 ::
 
@@ -182,6 +182,6 @@ export default defineNuxtConfig({
 })
 ```
 
-::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=FT2LQJ2NvVI" target="_blank"}
+::tip{icon="i-ph-video" to="https://www.youtube.com/watch?v=FT2LQJ2NvVI" target="_blank"}
 Watch a video from Alexander Lichter on how to easily set up custom auto imports.
 ::
diff --git a/docs/2.guide/1.concepts/8.typescript.md b/docs/2.guide/1.concepts/8.typescript.md
index 31d247b7e8..a06015dc98 100644
--- a/docs/2.guide/1.concepts/8.typescript.md
+++ b/docs/2.guide/1.concepts/8.typescript.md
@@ -61,7 +61,7 @@ This file contains the recommended basic TypeScript configuration for your proje
 
 [Read more about how to extend this configuration](/docs/guide/directory-structure/tsconfig).
 
-::tip{icon="i-ph-video-duotone" to="https://youtu.be/umLI7SlPygY" target="_blank"}
+::tip{icon="i-ph-video" to="https://youtu.be/umLI7SlPygY" target="_blank"}
 Watch a video from Daniel Roe explaining built-in Nuxt aliases.
 ::
 
diff --git a/docs/2.guide/1.concepts/9.code-style.md b/docs/2.guide/1.concepts/9.code-style.md
index 2a6a32afb3..edbfa3c490 100644
--- a/docs/2.guide/1.concepts/9.code-style.md
+++ b/docs/2.guide/1.concepts/9.code-style.md
@@ -7,7 +7,7 @@ description: "Nuxt supports ESLint out of the box"
 
 The recommended approach for Nuxt is to enable ESLint support using the [`@nuxt/eslint`](https://eslint.nuxt.com/packages/module) module, that will setup project-aware ESLint configuration for you.
 
-:::callout{icon="i-ph-lightbulb-duotone"}
+:::callout{icon="i-ph-lightbulb"}
 The module is designed for the [new ESLint flat config format](https://eslint.org/docs/latest/use/configure/configuration-files-new) with is the [default format since ESLint v9](https://eslint.org/blog/2024/04/eslint-v9.0.0-released/).
 
 If you are using the legacy `.eslintrc` config, you will need to [configure manually with `@nuxt/eslint-config`](https://eslint.nuxt.com/packages/config#legacy-config-format). We highly recommend you to migrate over the flat config to be future-proof.
diff --git a/docs/2.guide/1.concepts/_dir.yml b/docs/2.guide/1.concepts/_dir.yml
index 5ba97e4962..83d82a0dee 100644
--- a/docs/2.guide/1.concepts/_dir.yml
+++ b/docs/2.guide/1.concepts/_dir.yml
@@ -1,3 +1,3 @@
 title: Key Concepts
 titleTemplate: '%s · Nuxt Concepts'
-icon: i-ph-medal-duotone
+icon: i-ph-medal
diff --git a/docs/2.guide/2.directory-structure/0.nuxt.md b/docs/2.guide/2.directory-structure/0.nuxt.md
index c60627ca9b..603b9108ee 100644
--- a/docs/2.guide/2.directory-structure/0.nuxt.md
+++ b/docs/2.guide/2.directory-structure/0.nuxt.md
@@ -2,7 +2,7 @@
 title: ".nuxt"
 description: "Nuxt uses the .nuxt/ directory in development to generate your Vue application."
 head.title: ".nuxt/"
-navigation.icon: i-ph-folder-duotone
+navigation.icon: i-ph-folder
 ---
 
 ::important
diff --git a/docs/2.guide/2.directory-structure/0.output.md b/docs/2.guide/2.directory-structure/0.output.md
index 2db69102fe..dc0f868d65 100644
--- a/docs/2.guide/2.directory-structure/0.output.md
+++ b/docs/2.guide/2.directory-structure/0.output.md
@@ -2,7 +2,7 @@
 title: ".output"
 description: "Nuxt creates the .output/ directory when building your application for production."
 head.title: ".output/"
-navigation.icon: i-ph-folder-duotone
+navigation.icon: i-ph-folder
 ---
 
 ::important
diff --git a/docs/2.guide/2.directory-structure/1.assets.md b/docs/2.guide/2.directory-structure/1.assets.md
index b274baef9e..edf9c52bd6 100644
--- a/docs/2.guide/2.directory-structure/1.assets.md
+++ b/docs/2.guide/2.directory-structure/1.assets.md
@@ -2,7 +2,7 @@
 title: "assets"
 description: "The assets/ directory is used to add all the website's assets that the build tool will process."
 head.title: "assets/"
-navigation.icon: i-ph-folder-duotone
+navigation.icon: i-ph-folder
 ---
 
 The directory usually contains the following types of files:
diff --git a/docs/2.guide/2.directory-structure/1.components.md b/docs/2.guide/2.directory-structure/1.components.md
index 04dad5527b..fbd03b63b4 100644
--- a/docs/2.guide/2.directory-structure/1.components.md
+++ b/docs/2.guide/2.directory-structure/1.components.md
@@ -2,7 +2,7 @@
 title: "components"
 head.title: "components/"
 description: "The components/ directory is where you put all your Vue components."
-navigation.icon: i-ph-folder-duotone
+navigation.icon: i-ph-folder
 ---
 
 Nuxt automatically imports any components in this directory (along with components that are registered by any modules you may be using).
@@ -254,11 +254,11 @@ Server components allow server-rendering individual components within your clien
 
 Server components can either be used on their own or paired with a [client component](#paired-with-a-client-component).
 
-::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=u1yyXe86xJM" target="_blank"}
+::tip{icon="i-ph-video" to="https://www.youtube.com/watch?v=u1yyXe86xJM" target="_blank"}
 Watch Learn Vue video about Nuxt Server Components.
 ::
 
-::tip{icon="i-ph-article-duotone" to="https://roe.dev/blog/nuxt-server-components" target="_blank"}
+::tip{icon="i-ph-article" to="https://roe.dev/blog/nuxt-server-components" target="_blank"}
 Read Daniel Roe's guide to Nuxt Server Components.
 ::
 
diff --git a/docs/2.guide/2.directory-structure/1.composables.md b/docs/2.guide/2.directory-structure/1.composables.md
index 5adae8bd29..dbd3510b56 100644
--- a/docs/2.guide/2.directory-structure/1.composables.md
+++ b/docs/2.guide/2.directory-structure/1.composables.md
@@ -2,7 +2,7 @@
 title: 'composables'
 head.title: 'composables/'
 description: Use the composables/ directory to auto-import your Vue composables into your application.
-navigation.icon: i-ph-folder-duotone
+navigation.icon: i-ph-folder
 ---
 
 ## Usage
diff --git a/docs/2.guide/2.directory-structure/1.content.md b/docs/2.guide/2.directory-structure/1.content.md
index 361a5971c8..5800a362a0 100644
--- a/docs/2.guide/2.directory-structure/1.content.md
+++ b/docs/2.guide/2.directory-structure/1.content.md
@@ -2,7 +2,7 @@
 title: 'content'
 head.title: 'content/'
 description: Use the content/ directory to create a file-based CMS for your application.
-navigation.icon: i-ph-folder-duotone
+navigation.icon: i-ph-folder
 ---
 
 [Nuxt Content](https://content.nuxt.com) reads the [`content/` directory](/docs/guide/directory-structure/content) in your project and parses `.md`, `.yml`, `.csv` and `.json` files to create a file-based CMS for your application.
diff --git a/docs/2.guide/2.directory-structure/1.layouts.md b/docs/2.guide/2.directory-structure/1.layouts.md
index ee95033f8e..4aa9fc98f8 100644
--- a/docs/2.guide/2.directory-structure/1.layouts.md
+++ b/docs/2.guide/2.directory-structure/1.layouts.md
@@ -2,10 +2,10 @@
 title: "layouts"
 head.title: "layouts/"
 description: "Nuxt provides a layouts framework to extract common UI patterns into reusable layouts."
-navigation.icon: i-ph-folder-duotone
+navigation.icon: i-ph-folder
 ---
 
-::tip{icon="i-ph-rocket-launch-duotone" color="gray" }
+::tip{icon="i-ph-rocket-launch" color="gray" }
 For best performance, components placed in this directory will be automatically loaded via asynchronous import when used.
 ::
 
diff --git a/docs/2.guide/2.directory-structure/1.middleware.md b/docs/2.guide/2.directory-structure/1.middleware.md
index 64e66ecf6d..3fbcc732ce 100644
--- a/docs/2.guide/2.directory-structure/1.middleware.md
+++ b/docs/2.guide/2.directory-structure/1.middleware.md
@@ -2,7 +2,7 @@
 title: "middleware"
 description: "Nuxt provides middleware to run code before navigating to a particular route."
 head.title: "middleware/"
-navigation.icon: i-ph-folder-duotone
+navigation.icon: i-ph-folder
 ---
 
 Nuxt provides a customizable **route middleware** framework you can use throughout your application, ideal for extracting code that you want to run before navigating to a particular route.
diff --git a/docs/2.guide/2.directory-structure/1.modules.md b/docs/2.guide/2.directory-structure/1.modules.md
index f544e815bc..0321c56f69 100644
--- a/docs/2.guide/2.directory-structure/1.modules.md
+++ b/docs/2.guide/2.directory-structure/1.modules.md
@@ -2,7 +2,7 @@
 title: 'modules'
 head.title: 'modules/'
 description: Use the modules/ directory to automatically register local modules within your application.
-navigation.icon: i-ph-folder-duotone
+navigation.icon: i-ph-folder
 ---
 
 It is a good place to place any local modules you develop while building your application.
@@ -61,6 +61,6 @@ modules/
 
 :read-more{to="/docs/guide/going-further/modules"}
 
-::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/creating-your-first-module-from-scratch?friend=nuxt" target="_blank"}
+::tip{icon="i-ph-video" to="https://vueschool.io/lessons/creating-your-first-module-from-scratch?friend=nuxt" target="_blank"}
 Watch Vue School video about Nuxt private modules.
 ::
diff --git a/docs/2.guide/2.directory-structure/1.node_modules.md b/docs/2.guide/2.directory-structure/1.node_modules.md
index 13c7780e6a..afdb2d753a 100644
--- a/docs/2.guide/2.directory-structure/1.node_modules.md
+++ b/docs/2.guide/2.directory-structure/1.node_modules.md
@@ -2,7 +2,7 @@
 title: "node_modules"
 description: "The package manager stores the dependencies of your project in the node_modules/ directory."
 head.title: "node_modules/"
-navigation.icon: i-ph-folder-duotone
+navigation.icon: i-ph-folder
 ---
 
 The package manager ([`npm`](https://docs.npmjs.com/cli/commands/npm) or [`yarn`](https://yarnpkg.com) or [`pnpm`](https://pnpm.io/cli/install) or [`bun`](https://bun.sh/package-manager)) creates this directory to store the dependencies of your project.
diff --git a/docs/2.guide/2.directory-structure/1.pages.md b/docs/2.guide/2.directory-structure/1.pages.md
index 1367f6f871..ce14e9075f 100644
--- a/docs/2.guide/2.directory-structure/1.pages.md
+++ b/docs/2.guide/2.directory-structure/1.pages.md
@@ -2,7 +2,7 @@
 title: "pages"
 description: "Nuxt provides file-based routing to create routes within your web application."
 head.title: "pages/"
-navigation.icon: i-ph-folder-duotone
+navigation.icon: i-ph-folder
 ---
 
 ::note
diff --git a/docs/2.guide/2.directory-structure/1.plugins.md b/docs/2.guide/2.directory-structure/1.plugins.md
index d76acdade7..d5edce56b3 100644
--- a/docs/2.guide/2.directory-structure/1.plugins.md
+++ b/docs/2.guide/2.directory-structure/1.plugins.md
@@ -2,7 +2,7 @@
 title: "plugins"
 description: "Nuxt has a plugins system to use Vue plugins and more at the creation of your Vue application."
 head.title: "plugins/"
-navigation.icon: i-ph-folder-duotone
+navigation.icon: i-ph-folder
 ---
 
 Nuxt automatically reads the files in the `plugins/` directory and loads them at the creation of the Vue application.
@@ -76,7 +76,7 @@ export default defineNuxtPlugin({
 })
 ```
 
-::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=2aXZyXB1QGQ" target="_blank"}
+::tip{icon="i-ph-video" to="https://www.youtube.com/watch?v=2aXZyXB1QGQ" target="_blank"}
 Watch a video from Alexander Lichter about the Object Syntax for Nuxt plugins.
 ::
 
diff --git a/docs/2.guide/2.directory-structure/1.public.md b/docs/2.guide/2.directory-structure/1.public.md
index da5daa87bf..894654a962 100644
--- a/docs/2.guide/2.directory-structure/1.public.md
+++ b/docs/2.guide/2.directory-structure/1.public.md
@@ -2,7 +2,7 @@
 title: "public"
 description: "The public/ directory is used to serve your website's static assets."
 head.title: "public/"
-navigation.icon: i-ph-folder-duotone
+navigation.icon: i-ph-folder
 ---
 
 Files contained within the `public/` directory are served at the root and are not modified by the build process. This is suitable for files that have to keep their names (e.g. `robots.txt`) _or_ likely won't change (e.g. `favicon.ico`).
diff --git a/docs/2.guide/2.directory-structure/1.server.md b/docs/2.guide/2.directory-structure/1.server.md
index 37e9cfe1f6..0f5111e3ca 100644
--- a/docs/2.guide/2.directory-structure/1.server.md
+++ b/docs/2.guide/2.directory-structure/1.server.md
@@ -2,7 +2,7 @@
 title: server
 head.title: 'server/'
 description: The server/ directory is used to register API and server handlers to your application.
-navigation.icon: i-ph-folder-duotone
+navigation.icon: i-ph-folder
 ---
 
 Nuxt automatically scans files inside these directories to register API and server handlers with Hot Module Replacement (HMR) support.
diff --git a/docs/2.guide/2.directory-structure/1.utils.md b/docs/2.guide/2.directory-structure/1.utils.md
index 74d847d675..f7148c93fb 100644
--- a/docs/2.guide/2.directory-structure/1.utils.md
+++ b/docs/2.guide/2.directory-structure/1.utils.md
@@ -2,7 +2,7 @@
 title: 'utils'
 head.title: 'utils/'
 description: Use the utils/ directory to auto-import your utility functions throughout your application.
-navigation.icon: i-ph-folder-duotone
+navigation.icon: i-ph-folder
 ---
 
 The main purpose of the [`utils/` directory](/docs/guide/directory-structure/utils) is to allow a semantic distinction between your Vue composables and other auto-imported utility functions.
diff --git a/docs/2.guide/2.directory-structure/2.env.md b/docs/2.guide/2.directory-structure/2.env.md
index b0d4a82e6e..422dde9f90 100644
--- a/docs/2.guide/2.directory-structure/2.env.md
+++ b/docs/2.guide/2.directory-structure/2.env.md
@@ -2,7 +2,7 @@
 title: ".env"
 description: "A .env file specifies your build/dev-time environment variables."
 head.title: ".env"
-navigation.icon: i-ph-file-duotone
+navigation.icon: i-ph-file
 ---
 
 ::important
diff --git a/docs/2.guide/2.directory-structure/2.gitignore.md b/docs/2.guide/2.directory-structure/2.gitignore.md
index a4d69321ee..9247e32dbd 100644
--- a/docs/2.guide/2.directory-structure/2.gitignore.md
+++ b/docs/2.guide/2.directory-structure/2.gitignore.md
@@ -2,7 +2,7 @@
 title: ".gitignore"
 description: "A .gitignore file specifies intentionally untracked files that git should ignore."
 head.title: ".gitignore"
-navigation.icon: i-ph-file-duotone
+navigation.icon: i-ph-file
 ---
 
 A `.gitignore` file specifies intentionally untracked files that git should ignore.
diff --git a/docs/2.guide/2.directory-structure/2.nuxtignore.md b/docs/2.guide/2.directory-structure/2.nuxtignore.md
index 6c34c0be42..93a1139b14 100644
--- a/docs/2.guide/2.directory-structure/2.nuxtignore.md
+++ b/docs/2.guide/2.directory-structure/2.nuxtignore.md
@@ -2,7 +2,7 @@
 title: .nuxtignore
 head.title: '.nuxtignore'
 description: The .nuxtignore file lets Nuxt ignore files in your project’s root directory during the build phase.
-navigation.icon: i-ph-file-duotone
+navigation.icon: i-ph-file
 ---
 
 The `.nuxtignore` file tells Nuxt to ignore files in your project’s root directory ([`rootDir`](/docs/api/nuxt-config#rootdir)) during the build phase.
diff --git a/docs/2.guide/2.directory-structure/3.app-config.md b/docs/2.guide/2.directory-structure/3.app-config.md
index 3e97d0e88b..656d5c16a1 100644
--- a/docs/2.guide/2.directory-structure/3.app-config.md
+++ b/docs/2.guide/2.directory-structure/3.app-config.md
@@ -2,7 +2,7 @@
 title: app.config.ts
 head.title: 'app.config.ts'
 description: Expose reactive configuration within your application with the App Config file.
-navigation.icon: i-ph-file-duotone
+navigation.icon: i-ph-file
 ---
 
 Nuxt provides an `app.config` config file to expose reactive configuration within your application with the ability to update it at runtime within lifecycle or using a nuxt plugin and editing it with HMR (hot-module-replacement).
diff --git a/docs/2.guide/2.directory-structure/3.app.md b/docs/2.guide/2.directory-structure/3.app.md
index 2716e38581..8158891ada 100644
--- a/docs/2.guide/2.directory-structure/3.app.md
+++ b/docs/2.guide/2.directory-structure/3.app.md
@@ -2,7 +2,7 @@
 title: "app.vue"
 description: "The app.vue file is the main component of your Nuxt application."
 head.title: "app.vue"
-navigation.icon: i-ph-file-duotone
+navigation.icon: i-ph-file
 ---
 
 ## Minimal Usage
diff --git a/docs/2.guide/2.directory-structure/3.error.md b/docs/2.guide/2.directory-structure/3.error.md
index ffdd6eac0e..13dd45bf7a 100644
--- a/docs/2.guide/2.directory-structure/3.error.md
+++ b/docs/2.guide/2.directory-structure/3.error.md
@@ -2,7 +2,7 @@
 title: "error.vue"
 description: "The error.vue file is the error page in your Nuxt application."
 head.title: "error.vue"
-navigation.icon: i-ph-file-duotone
+navigation.icon: i-ph-file
 ---
 
 During the lifespan of your application, some errors may appear unexpectedly at runtime. In such case, we can use the `error.vue` file to override the default error files and display the error nicely.
diff --git a/docs/2.guide/2.directory-structure/3.nuxt-config.md b/docs/2.guide/2.directory-structure/3.nuxt-config.md
index 1174095d2b..997f8999bc 100644
--- a/docs/2.guide/2.directory-structure/3.nuxt-config.md
+++ b/docs/2.guide/2.directory-structure/3.nuxt-config.md
@@ -2,7 +2,7 @@
 title: "nuxt.config.ts"
 description: "Nuxt can be easily configured with a single nuxt.config file."
 head.title: "nuxt.config.ts"
-navigation.icon: i-ph-file-duotone
+navigation.icon: i-ph-file
 ---
 
 The `nuxt.config` file extension can either be `.js`, `.ts` or `.mjs`.
diff --git a/docs/2.guide/2.directory-structure/3.package.md b/docs/2.guide/2.directory-structure/3.package.md
index ad5757fbf0..c2e6e56607 100644
--- a/docs/2.guide/2.directory-structure/3.package.md
+++ b/docs/2.guide/2.directory-structure/3.package.md
@@ -2,7 +2,7 @@
 title: package.json
 head.title: package.json
 description: The package.json file contains all the dependencies and scripts for your application.
-navigation.icon: i-ph-file-duotone
+navigation.icon: i-ph-file
 ---
 
 The minimal `package.json` of your Nuxt application should looks like:
diff --git a/docs/2.guide/2.directory-structure/3.tsconfig.md b/docs/2.guide/2.directory-structure/3.tsconfig.md
index eca36286d1..5ed9df4449 100644
--- a/docs/2.guide/2.directory-structure/3.tsconfig.md
+++ b/docs/2.guide/2.directory-structure/3.tsconfig.md
@@ -2,7 +2,7 @@
 title: "tsconfig.json"
 description: "Nuxt generates a .nuxt/tsconfig.json file with sensible defaults and your aliases."
 head.title: "tsconfig.json"
-navigation.icon: i-ph-file-duotone
+navigation.icon: i-ph-file
 ---
 
 Nuxt [automatically generates](/docs/guide/concepts/typescript) a `.nuxt/tsconfig.json` file with the resolved aliases you are using in your Nuxt project, as well as with other sensible defaults.
diff --git a/docs/2.guide/2.directory-structure/_dir.yml b/docs/2.guide/2.directory-structure/_dir.yml
index 4d663658ad..4f0a802ac3 100644
--- a/docs/2.guide/2.directory-structure/_dir.yml
+++ b/docs/2.guide/2.directory-structure/_dir.yml
@@ -1,3 +1,3 @@
 title: Directory Structure
 titleTemplate: '%s · Nuxt Directory Structure'
-icon: i-ph-folders-duotone
+icon: i-ph-folders
diff --git a/docs/2.guide/3.going-further/1.experimental-features.md b/docs/2.guide/3.going-further/1.experimental-features.md
index 136cadf805..fcdf8cc00e 100644
--- a/docs/2.guide/3.going-further/1.experimental-features.md
+++ b/docs/2.guide/3.going-further/1.experimental-features.md
@@ -104,11 +104,11 @@ export default defineNuxtConfig({
 
 Matching route rules will be created, based on the page's `path`.
 
-::read-more{to="/docs/api/utils/define-route-rules" icon="i-ph-function-duotone"}
+::read-more{to="/docs/api/utils/define-route-rules" icon="i-ph-function"}
 Read more in `defineRouteRules` utility.
 ::
 
-:read-more{to="/docs/guide/concepts/rendering#hybrid-rendering" icon="i-ph-medal-duotone"}
+:read-more{to="/docs/guide/concepts/rendering#hybrid-rendering" icon="i-ph-medal"}
 
 ## renderJsonPayloads
 
@@ -254,7 +254,7 @@ Out of the box, this will enable typed usage of [`navigateTo`](/docs/api/utils/n
 
 You can even get typed params within a page by using `const route = useRoute('route-name')`.
 
-::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=SXk-L19gTZk" target="_blank"}
+::tip{icon="i-ph-video" to="https://www.youtube.com/watch?v=SXk-L19gTZk" target="_blank"}
 Watch a video from Daniel Roe explaining type-safe routing in Nuxt.
 ::
 
@@ -292,7 +292,7 @@ export default defineNuxtConfig({
 })
 ```
 
-::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=1jUupYHVvrU" target="_blank"}
+::tip{icon="i-ph-video" to="https://www.youtube.com/watch?v=1jUupYHVvrU" target="_blank"}
 Watch a video from Alexander Lichter about the experimental `sharedPrerenderData` setting.
 ::
 
diff --git a/docs/2.guide/3.going-further/10.runtime-config.md b/docs/2.guide/3.going-further/10.runtime-config.md
index d43b794bf1..69f9fb9876 100644
--- a/docs/2.guide/3.going-further/10.runtime-config.md
+++ b/docs/2.guide/3.going-further/10.runtime-config.md
@@ -61,7 +61,7 @@ Setting the default of `runtimeConfig` values to *differently named environment
 It is advised to use environment variables that match the structure of your `runtimeConfig` object.
 ::
 
-::tip{icon="i-ph-video-duotone" to="https://youtu.be/_FYV5WfiWvs" target="_blank"}
+::tip{icon="i-ph-video" to="https://youtu.be/_FYV5WfiWvs" target="_blank"}
 Watch a video from Alexander Lichter showcasing the top mistake developers make using runtimeConfig.
 ::
 
diff --git a/docs/2.guide/3.going-further/3.modules.md b/docs/2.guide/3.going-further/3.modules.md
index eb418d0f72..b12d886821 100644
--- a/docs/2.guide/3.going-further/3.modules.md
+++ b/docs/2.guide/3.going-further/3.modules.md
@@ -45,7 +45,7 @@ This will create a `my-module` project with all the boilerplate necessary to dev
 
 Learn how to perform basic tasks with the module starter.
 
-::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/navigating-the-official-starter-template?friend=nuxt" target="_blank"}
+::tip{icon="i-ph-video" to="https://vueschool.io/lessons/navigating-the-official-starter-template?friend=nuxt" target="_blank"}
 Watch Vue School video about Nuxt module starter template.
 ::
 
@@ -274,7 +274,7 @@ export default defineNuxtModule({
 
 When you need to handle more complex configuration alterations, you should consider using [defu](https://github.com/unjs/defu).
 
-::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/extending-and-altering-nuxt-configuration-and-options?friend=nuxt" target="_blank"}
+::tip{icon="i-ph-video" to="https://vueschool.io/lessons/extending-and-altering-nuxt-configuration-and-options?friend=nuxt" target="_blank"}
 Watch Vue School video about altering Nuxt configuration.
 ::
 
@@ -311,7 +311,7 @@ Be careful not to expose any sensitive module configuration on the public runtim
 
 :read-more{to="/docs/guide/going-further/runtime-config"}
 
-::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/passing-and-exposing-module-options?friend=nuxt" target="_blank"}
+::tip{icon="i-ph-video" to="https://vueschool.io/lessons/passing-and-exposing-module-options?friend=nuxt" target="_blank"}
 Watch Vue School video about passing and exposing Nuxt module options.
 ::
 
@@ -538,7 +538,7 @@ export default defineNuxtModule({
 
 :read-more{to="/docs/api/advanced/hooks"}
 
-::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/nuxt-lifecycle-hooks?friend=nuxt" target="_blank"}
+::tip{icon="i-ph-video" to="https://vueschool.io/lessons/nuxt-lifecycle-hooks?friend=nuxt" target="_blank"}
 Watch Vue School video about using Nuxt lifecycle hooks in modules.
 ::
 
@@ -764,7 +764,7 @@ The module starter comes with a default set of tools and configurations (e.g. ES
 
 [Nuxt Module ecosystem](/modules) represents more than 15 million monthly NPM downloads and provides extended functionalities and integrations with all sort of tools. You can be part of this ecosystem!
 
-::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/exploring-nuxt-modules-ecosystem-and-module-types?friend=nuxt" target="_blank"}
+::tip{icon="i-ph-video" to="https://vueschool.io/lessons/exploring-nuxt-modules-ecosystem-and-module-types?friend=nuxt" target="_blank"}
 Watch Vue School video about Nuxt module types.
 ::
 
diff --git a/docs/2.guide/3.going-further/_dir.yml b/docs/2.guide/3.going-further/_dir.yml
index 20cbae3d01..80b2c5b728 100644
--- a/docs/2.guide/3.going-further/_dir.yml
+++ b/docs/2.guide/3.going-further/_dir.yml
@@ -1,3 +1,3 @@
 title: Going Further
 titleTemplate: '%s · Nuxt Advanced'
-icon: i-ph-star-duotone
+icon: i-ph-star
diff --git a/docs/2.guide/4.recipes/_dir.yml b/docs/2.guide/4.recipes/_dir.yml
index b63c755e5f..5030f4b88d 100644
--- a/docs/2.guide/4.recipes/_dir.yml
+++ b/docs/2.guide/4.recipes/_dir.yml
@@ -1,3 +1,3 @@
 title: Recipes
 titleTemplate: '%s · Recipes'
-icon: i-ph-cooking-pot-duotone
+icon: i-ph-cooking-pot
diff --git a/docs/2.guide/_dir.yml b/docs/2.guide/_dir.yml
index 39506eabf0..9fb4817fc8 100644
--- a/docs/2.guide/_dir.yml
+++ b/docs/2.guide/_dir.yml
@@ -1,2 +1,2 @@
 title: 'Guide'
-icon: i-ph-book-open-duotone
+icon: i-ph-book-open
diff --git a/docs/3.api/1.components/_dir.yml b/docs/3.api/1.components/_dir.yml
index d78fe4060a..33401303cf 100644
--- a/docs/3.api/1.components/_dir.yml
+++ b/docs/3.api/1.components/_dir.yml
@@ -1,3 +1,3 @@
 title: 'Components'
 titleTemplate: '%s · Nuxt Components'
-icon: i-ph-cube-duotone
+icon: i-ph-cube
diff --git a/docs/3.api/2.composables/_dir.yml b/docs/3.api/2.composables/_dir.yml
index 35d41bbd10..e33d9ed036 100644
--- a/docs/3.api/2.composables/_dir.yml
+++ b/docs/3.api/2.composables/_dir.yml
@@ -1,3 +1,3 @@
 title: 'Composables'
 titleTemplate: '%s · Nuxt Composables'
-icon: i-ph-arrows-left-right-duotone
+icon: i-ph-arrows-left-right
diff --git a/docs/3.api/2.composables/use-fetch.md b/docs/3.api/2.composables/use-fetch.md
index e759d165f1..6b07d44737 100644
--- a/docs/3.api/2.composables/use-fetch.md
+++ b/docs/3.api/2.composables/use-fetch.md
@@ -74,7 +74,7 @@ const { data, status, error, refresh, clear } = await useFetch('/api/auth/login'
 If you encounter the `data` variable destructured from a `useFetch` returns a string and not a JSON parsed object then make sure your component doesn't include an import statement like `import { useFetch } from '@vueuse/core`.
 ::
 
-::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=njsGVmcWviY" target="_blank"}
+::tip{icon="i-ph-video" to="https://www.youtube.com/watch?v=njsGVmcWviY" target="_blank"}
 Watch the video from Alexander Lichter to avoid using `useFetch` the wrong way!
 ::
 
diff --git a/docs/3.api/2.composables/use-nuxt-app.md b/docs/3.api/2.composables/use-nuxt-app.md
index 5ab9289638..6b915edf00 100644
--- a/docs/3.api/2.composables/use-nuxt-app.md
+++ b/docs/3.api/2.composables/use-nuxt-app.md
@@ -138,7 +138,7 @@ Nuxt exposes the following properties through `ssrContext`:
 
   Since [Nuxt v3.4](https://nuxt.com/blog/v3-4#payload-enhancements), it is possible to define your own reducer/reviver for types that are not supported by Nuxt.
 
-  ::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=8w6ffRBs8a4" target="_blank"}
+  ::tip{icon="i-ph-video" to="https://www.youtube.com/watch?v=8w6ffRBs8a4" target="_blank"}
   Watch a video from Alexander Lichter about serializing payloads, especially with regards to classes.
   ::
 
diff --git a/docs/3.api/2.composables/use-state.md b/docs/3.api/2.composables/use-state.md
index 513bd407c6..c8194dc9ed 100644
--- a/docs/3.api/2.composables/use-state.md
+++ b/docs/3.api/2.composables/use-state.md
@@ -25,7 +25,7 @@ Because the data inside `useState` will be serialized to JSON, it is important t
 `useState` is a reserved function name transformed by the compiler, so you should not name your own function `useState`.
 ::
 
-::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=mv0WcBABcIk" target="_blank"}
+::tip{icon="i-ph-video" to="https://www.youtube.com/watch?v=mv0WcBABcIk" target="_blank"}
 Watch a video from Alexander Lichter about why and when to use `useState()`.
 ::
 
diff --git a/docs/3.api/3.utils/$fetch.md b/docs/3.api/3.utils/$fetch.md
index ff0ed5cf05..ab8a947aad 100644
--- a/docs/3.api/3.utils/$fetch.md
+++ b/docs/3.api/3.utils/$fetch.md
@@ -10,11 +10,11 @@ links:
 
 Nuxt uses [ofetch](https://github.com/unjs/ofetch) to expose globally the `$fetch` helper for making HTTP requests within your Vue app or API routes.
 
-::tip{icon="i-ph-rocket-launch-duotone" color="gray"}
+::tip{icon="i-ph-rocket-launch" color="gray"}
 During server-side rendering, calling `$fetch` to fetch your internal [API routes](/docs/guide/directory-structure/server) will directly call the relevant function (emulating the request), **saving an additional API call**.
 ::
 
-::note{color="blue" icon="i-ph-info-duotone"}
+::note{color="blue" icon="i-ph-info"}
 Using `$fetch` in components without wrapping it with [`useAsyncData`](/docs/api/composables/use-async-data) causes fetching the data twice: initially on the server, then again on the client-side during hydration, because `$fetch` does not transfer state from the server to the client. Thus, the fetch will be executed on both sides because the client has to get the data again.
 ::
 
diff --git a/docs/3.api/3.utils/_dir.yml b/docs/3.api/3.utils/_dir.yml
index 50d20caf25..c3ef54ea5c 100644
--- a/docs/3.api/3.utils/_dir.yml
+++ b/docs/3.api/3.utils/_dir.yml
@@ -1,3 +1,3 @@
 title: 'Utils'
 titleTemplate: '%s · Nuxt Utils'
-navigation.icon: i-ph-function-duotone
+navigation.icon: i-ph-function
diff --git a/docs/3.api/3.utils/define-route-rules.md b/docs/3.api/3.utils/define-route-rules.md
index 309a64fd21..50557cea88 100644
--- a/docs/3.api/3.utils/define-route-rules.md
+++ b/docs/3.api/3.utils/define-route-rules.md
@@ -8,7 +8,7 @@ links:
     size: xs
 ---
 
-::read-more{to="/docs/guide/going-further/experimental-features#inlinerouterules" icon="i-ph-star-duotone"}
+::read-more{to="/docs/guide/going-further/experimental-features#inlinerouterules" icon="i-ph-star"}
 This feature is experimental and in order to use it you must enable the `experimental.inlineRouteRules` option in your `nuxt.config`.
 ::
 
@@ -47,6 +47,6 @@ When running [`nuxt build`](/docs/api/commands/build), the home page will be pre
 
 For more control, such as if you are using a custom `path` or `alias` set in the page's [`definePageMeta`](/docs/api/utils/define-page-meta), you should set `routeRules` directly within your `nuxt.config`.
 
-::read-more{to="/docs/guide/concepts/rendering#hybrid-rendering" icon="i-ph-medal-duotone"}
+::read-more{to="/docs/guide/concepts/rendering#hybrid-rendering" icon="i-ph-medal"}
 Read more about the `routeRules`.
 ::
diff --git a/docs/3.api/3.utils/preload-route-components.md b/docs/3.api/3.utils/preload-route-components.md
index a0bf7c1932..d888bb75d4 100644
--- a/docs/3.api/3.utils/preload-route-components.md
+++ b/docs/3.api/3.utils/preload-route-components.md
@@ -10,7 +10,7 @@ links:
 
 Preloading routes loads the components of a given route that the user might navigate to in future. This ensures that the components are available earlier and less likely to block the navigation, improving performance.
 
-::tip{icon="i-ph-rocket-launch-duotone" color="gray"}
+::tip{icon="i-ph-rocket-launch" color="gray"}
 Nuxt already automatically preloads the necessary routes if you're using the `NuxtLink` component.
 ::
 
diff --git a/docs/3.api/3.utils/reload-nuxt-app.md b/docs/3.api/3.utils/reload-nuxt-app.md
index 3b25a95905..0244c78b9c 100644
--- a/docs/3.api/3.utils/reload-nuxt-app.md
+++ b/docs/3.api/3.utils/reload-nuxt-app.md
@@ -14,7 +14,7 @@ links:
 
 By default, it will also save the current `state` of your app (that is, any state you could access with `useState`).
 
-::read-more{to="/docs/guide/going-further/experimental-features#restorestate" icon="i-ph-star-duotone"}
+::read-more{to="/docs/guide/going-further/experimental-features#restorestate" icon="i-ph-star"}
 You can enable experimental restoration of this state by enabling the `experimental.restoreState` option in your `nuxt.config` file.
 ::
 
diff --git a/docs/3.api/4.commands/_dir.yml b/docs/3.api/4.commands/_dir.yml
index b1123168e0..00af2f6eb1 100644
--- a/docs/3.api/4.commands/_dir.yml
+++ b/docs/3.api/4.commands/_dir.yml
@@ -1,3 +1,3 @@
 title: 'Commands'
-icon: i-ph-terminal-window-duotone
+icon: i-ph-terminal-window
 titleTemplate: '%s · Nuxt Commands'
diff --git a/docs/3.api/5.kit/12.resolving.md b/docs/3.api/5.kit/12.resolving.md
index eac13cab4f..8218ecfb0d 100644
--- a/docs/3.api/5.kit/12.resolving.md
+++ b/docs/3.api/5.kit/12.resolving.md
@@ -211,7 +211,7 @@ Type of path to resolve. If set to `'file'`, the function will try to resolve a
 
 Creates resolver relative to base path.
 
-::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/resolving-paths-and-injecting-assets-to-the-app?friend=nuxt" target="_blank"}
+::tip{icon="i-ph-video" to="https://vueschool.io/lessons/resolving-paths-and-injecting-assets-to-the-app?friend=nuxt" target="_blank"}
 Watch Vue School video about createResolver.
 ::
 
diff --git a/docs/3.api/5.kit/4.autoimports.md b/docs/3.api/5.kit/4.autoimports.md
index 6a0b0a08a5..4aa9aac211 100644
--- a/docs/3.api/5.kit/4.autoimports.md
+++ b/docs/3.api/5.kit/4.autoimports.md
@@ -18,7 +18,7 @@ These functions are designed for registering your own utils, composables and Vue
 
 Nuxt auto-imports helper functions, composables and Vue APIs to use across your application without explicitly importing them. Based on the directory structure, every Nuxt application can also use auto-imports for its own composables and plugins. Composables or plugins can use these functions.
 
-::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/expanding-nuxt-s-auto-imports?friend=nuxt" target="_blank"}
+::tip{icon="i-ph-video" to="https://vueschool.io/lessons/expanding-nuxt-s-auto-imports?friend=nuxt" target="_blank"}
 Watch Vue School video about Auto-imports Nuxt Kit utilities.
 ::
 
diff --git a/docs/3.api/5.kit/5.components.md b/docs/3.api/5.kit/5.components.md
index b112c84962..3d41667d31 100644
--- a/docs/3.api/5.kit/5.components.md
+++ b/docs/3.api/5.kit/5.components.md
@@ -10,7 +10,7 @@ links:
 
 Components are the building blocks of your Nuxt application. They are reusable Vue instances that can be used to create a user interface. In Nuxt, components from the components directory are automatically imported by default. However, if you need to import components from an alternative directory or wish to selectively import them as needed, `@nuxt/kit` provides the `addComponentsDir` and `addComponent` methods. These utils allow you to customize the component configuration to better suit your needs.
 
-::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/injecting-components-and-component-directories?friend=nuxt" target="_blank"}
+::tip{icon="i-ph-video" to="https://vueschool.io/lessons/injecting-components-and-component-directories?friend=nuxt" target="_blank"}
 Watch Vue School video about injecting components.
 ::
 
diff --git a/docs/3.api/5.kit/7.pages.md b/docs/3.api/5.kit/7.pages.md
index 7e7dd6e8d3..8c1d91a685 100644
--- a/docs/3.api/5.kit/7.pages.md
+++ b/docs/3.api/5.kit/7.pages.md
@@ -12,7 +12,7 @@ links:
 
 In Nuxt 3, routes are automatically generated based on the structure of the files in the `pages` directory. However, there may be scenarios where you'd want to customize these routes. For instance, you might need to add a route for a dynamic page not generated by Nuxt, remove an existing route, or modify the configuration of a route. For such customizations, Nuxt offers the `extendPages` feature, which allows you to extend and alter the pages configuration.
 
-::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/extend-and-alter-nuxt-pages?friend=nuxt" target="_blank"}
+::tip{icon="i-ph-video" to="https://vueschool.io/lessons/extend-and-alter-nuxt-pages?friend=nuxt" target="_blank"}
 Watch Vue School video about extendPages.
 ::
 
@@ -71,7 +71,7 @@ Nuxt is powered by the [Nitro](https://nitro.unjs.io) server engine. With Nitro,
 You can read more about Nitro route rules in the [Nitro documentation](https://nitro.unjs.io/guide/routing#route-rules).
 ::
 
-::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/adding-route-rules-and-route-middlewares?friend=nuxt" target="_blank"}
+::tip{icon="i-ph-video" to="https://vueschool.io/lessons/adding-route-rules-and-route-middlewares?friend=nuxt" target="_blank"}
 Watch Vue School video about adding route rules and route middelwares.
 ::
 
@@ -192,7 +192,7 @@ Route middlewares can be also defined in plugins via [`addRouteMiddleware`](/doc
 Read more about route middlewares in the [Route middleware documentation](/docs/getting-started/routing#route-middleware).
 ::
 
-::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/adding-route-rules-and-route-middlewares?friend=nuxt" target="_blank"}
+::tip{icon="i-ph-video" to="https://vueschool.io/lessons/adding-route-rules-and-route-middlewares?friend=nuxt" target="_blank"}
 Watch Vue School video about adding route rules and route middelwares.
 ::
 
diff --git a/docs/3.api/5.kit/9.plugins.md b/docs/3.api/5.kit/9.plugins.md
index 4ee2eda5af..e2f09cfc76 100644
--- a/docs/3.api/5.kit/9.plugins.md
+++ b/docs/3.api/5.kit/9.plugins.md
@@ -14,7 +14,7 @@ Plugins are self-contained code that usually add app-level functionality to Vue.
 
 Registers a Nuxt plugin and to the plugins array.
 
-::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/injecting-plugins?friend=nuxt" target="_blank"}
+::tip{icon="i-ph-video" to="https://vueschool.io/lessons/injecting-plugins?friend=nuxt" target="_blank"}
 Watch Vue School video about addPlugin.
 ::
 
@@ -114,7 +114,7 @@ export default defineNuxtPlugin((nuxtApp) => {
 
 Adds a template and registers as a nuxt plugin. This is useful for plugins that need to generate code at build time.
 
-::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/injecting-plugin-templates?friend=nuxt" target="_blank"}
+::tip{icon="i-ph-video" to="https://vueschool.io/lessons/injecting-plugin-templates?friend=nuxt" target="_blank"}
 Watch Vue School video about addPluginTemplate.
 ::
 
diff --git a/docs/3.api/5.kit/_dir.yml b/docs/3.api/5.kit/_dir.yml
index dda66db56e..86a5d387a4 100644
--- a/docs/3.api/5.kit/_dir.yml
+++ b/docs/3.api/5.kit/_dir.yml
@@ -1,3 +1,3 @@
 title: Nuxt Kit
-navigation.icon: i-ph-toolbox-duotone
+navigation.icon: i-ph-toolbox
 titleTemplate: '%s · Nuxt Kit'
diff --git a/docs/3.api/6.advanced/_dir.yml b/docs/3.api/6.advanced/_dir.yml
index b8a90804b7..e0a580e33c 100644
--- a/docs/3.api/6.advanced/_dir.yml
+++ b/docs/3.api/6.advanced/_dir.yml
@@ -1 +1 @@
-icon: i-ph-brain-duotone
+icon: i-ph-brain
diff --git a/docs/3.api/6.nuxt-config.md b/docs/3.api/6.nuxt-config.md
index 7f915757f6..cad9250920 100644
--- a/docs/3.api/6.nuxt-config.md
+++ b/docs/3.api/6.nuxt-config.md
@@ -2,7 +2,7 @@
 title: Nuxt Configuration
 titleTemplate: '%s'
 description: Discover all the options you can use in your nuxt.config.ts file.
-navigation.icon: i-ph-gear-duotone
+navigation.icon: i-ph-gear
 ---
 
 ::note{icon="i-simple-icons-github" color="gray" to="https://github.com/nuxt/nuxt/tree/main/packages/schema/src/config" target="_blank"}
diff --git a/docs/3.api/index.md b/docs/3.api/index.md
index f0b12b7425..7e4970a2ae 100644
--- a/docs/3.api/index.md
+++ b/docs/3.api/index.md
@@ -7,25 +7,25 @@ surround: false
 ---
 
 ::card-group
-  ::card{icon="i-ph-cube-duotone" title="Components" to="/docs/api/components/client-only"}
+  ::card{icon="i-ph-cube" title="Components" to="/docs/api/components/client-only"}
   Explore Nuxt built-in components for pages, layouts, head, and more.
   ::
-  ::card{icon="i-ph-arrows-left-right-duotone" title="Composables" to="/docs/api/composables/use-app-config"}
+  ::card{icon="i-ph-arrows-left-right" title="Composables" to="/docs/api/composables/use-app-config"}
   Discover Nuxt composable functions for data-fetching, head management and more.
   ::
-  ::card{icon="i-ph-function-duotone" title="Utils" to="/docs/api/utils/dollarfetch"}
+  ::card{icon="i-ph-function" title="Utils" to="/docs/api/utils/dollarfetch"}
   Learn about Nuxt utility functions for navigation, error handling and more.
   ::
-  ::card{icon="i-ph-terminal-window-duotone" title="Commands" to="/docs/api/commands/add"}
+  ::card{icon="i-ph-terminal-window" title="Commands" to="/docs/api/commands/add"}
   List of Nuxt CLI commands to init, analyze, build, and preview your application.
   ::
-  ::card{icon="i-ph-toolbox-duotone" title="Nuxt Kit" to="/docs/api/kit/modules"}
+  ::card{icon="i-ph-toolbox" title="Nuxt Kit" to="/docs/api/kit/modules"}
   Understand Nuxt Kit utilities to create modules and control Nuxt.
   ::
-  ::card{icon="i-ph-brain-duotone" title="Advanced" to="/docs/api/advanced/hooks"}
+  ::card{icon="i-ph-brain" title="Advanced" to="/docs/api/advanced/hooks"}
   Go deep in Nuxt internals with Nuxt lifecycle hooks.
   ::
-  ::card{icon="i-ph-gear-duotone" title="Nuxt Configuration" to="/docs/api/nuxt-config"}
+  ::card{icon="i-ph-gear" title="Nuxt Configuration" to="/docs/api/nuxt-config"}
   Explore all Nuxt configuration options to customize your application.
   ::
 ::
diff --git a/docs/5.community/2.getting-help.md b/docs/5.community/2.getting-help.md
index 4100c849d6..ded7e1292a 100644
--- a/docs/5.community/2.getting-help.md
+++ b/docs/5.community/2.getting-help.md
@@ -2,7 +2,7 @@
 title: Getting Help
 description: We're a friendly community of developers and we'd love to help.
 navigation:
-  icon: i-ph-lifebuoy-duotone
+  icon: i-ph-lifebuoy
 ---
 
 At some point, you may find that there's an issue you need some help with.
diff --git a/docs/5.community/3.reporting-bugs.md b/docs/5.community/3.reporting-bugs.md
index c82a6d8ba6..30b60f3386 100644
--- a/docs/5.community/3.reporting-bugs.md
+++ b/docs/5.community/3.reporting-bugs.md
@@ -1,7 +1,7 @@
 ---
 title: 'Reporting Bugs'
 description: 'One of the most valuable roles in open source is taking the time to report bugs helpfully.'
-navigation.icon: i-ph-bug-duotone
+navigation.icon: i-ph-bug
 ---
 
 Try as we might, we will never completely eliminate bugs.
diff --git a/docs/5.community/4.contribution.md b/docs/5.community/4.contribution.md
index 3702d845a8..d8e58c24dc 100644
--- a/docs/5.community/4.contribution.md
+++ b/docs/5.community/4.contribution.md
@@ -1,7 +1,7 @@
 ---
 title: 'Contribution'
 description: 'Nuxt is a community project - and so we love contributions of all kinds! ❤️'
-navigation.icon: i-ph-git-pull-request-duotone
+navigation.icon: i-ph-git-pull-request
 ---
 
 There is a range of different ways you might be able to contribute to the Nuxt ecosystem.
@@ -184,21 +184,21 @@ Here are some tips that may help improve your documentation:
 
   Keep in mind your readers can have different backgrounds and experiences. Therefore, these words don't convey meaning and can be harmful.
 
-  ::caution{ icon="i-ph-x-circle-duotone"}
+  ::caution{ icon="i-ph-x-circle"}
   Simply make sure the function returns a promise.
   ::
 
-  ::tip{icon="i-ph-check-circle-duotone"}
+  ::tip{icon="i-ph-check-circle"}
   Make sure the function returns a [promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise).
   ::
 
 * Prefer [active voice](https://developers.google.com/tech-writing/one/active-voice).
 
-  ::caution{icon="i-ph-x-circle-duotone"}
+  ::caution{icon="i-ph-x-circle"}
   An error will be thrown by Nuxt.
   ::
 
-  ::tip{icon="i-ph-check-circle-duotone"}
+  ::tip{icon="i-ph-check-circle"}
   Nuxt will throw an error.
   ::
 
diff --git a/docs/5.community/5.framework-contribution.md b/docs/5.community/5.framework-contribution.md
index a96de2e749..7c9315fa3a 100644
--- a/docs/5.community/5.framework-contribution.md
+++ b/docs/5.community/5.framework-contribution.md
@@ -1,6 +1,6 @@
 ---
 title: 'Framework'
-navigation.icon: i-ph-github-logo-duotone
+navigation.icon: i-ph-github-logo
 description: Some specific points about contributions to the framework repository.
 ---
 
diff --git a/docs/5.community/6.roadmap.md b/docs/5.community/6.roadmap.md
index 4230570244..df987f8bfb 100644
--- a/docs/5.community/6.roadmap.md
+++ b/docs/5.community/6.roadmap.md
@@ -1,7 +1,7 @@
 ---
 title: 'Roadmap'
 description: 'Nuxt is constantly evolving, with new features and modules being added all the time.'
-navigation.icon: i-ph-map-trifold-duotone
+navigation.icon: i-ph-map-trifold
 ---
 
 ::read-more{to="/blog"}
diff --git a/docs/5.community/7.changelog.md b/docs/5.community/7.changelog.md
index bc1d34cb72..942ec3e32b 100644
--- a/docs/5.community/7.changelog.md
+++ b/docs/5.community/7.changelog.md
@@ -1,7 +1,7 @@
 ---
 title: 'Releases'
 description: Discover the latest releases of Nuxt & Nuxt official modules.
-navigation.icon: i-ph-notification-duotone
+navigation.icon: i-ph-notification
 ---
 
 ::card-group
diff --git a/docs/5.community/_dir.yml b/docs/5.community/_dir.yml
index 1330352c11..de92f13d6f 100644
--- a/docs/5.community/_dir.yml
+++ b/docs/5.community/_dir.yml
@@ -1,3 +1,3 @@
 title: 'Community'
 titleTemplate: '%s · Nuxt Community'
-icon: i-ph-chats-teardrop-duotone
+icon: i-ph-chats-teardrop
diff --git a/docs/6.bridge/_dir.yml b/docs/6.bridge/_dir.yml
index f2a37c2daa..f7db65f48d 100644
--- a/docs/6.bridge/_dir.yml
+++ b/docs/6.bridge/_dir.yml
@@ -1,3 +1,3 @@
 titleTemplate: 'Migrate to Nuxt Bridge: %s'
 title: 'Migrate to Nuxt Bridge'
-icon: i-ph-bridge-duotone
+icon: i-ph-bridge
diff --git a/docs/7.migration/20.module-authors.md b/docs/7.migration/20.module-authors.md
index ff42347c12..abe8fc67c1 100644
--- a/docs/7.migration/20.module-authors.md
+++ b/docs/7.migration/20.module-authors.md
@@ -9,7 +9,7 @@ Nuxt 3 has a basic backward compatibility layer for Nuxt 2 modules using `@nuxt/
 
 We have prepared a [Dedicated Guide](/docs/guide/going-further/modules) for authoring Nuxt 3 ready modules using `@nuxt/kit`. Currently best migration path is to follow it and rewrite your modules. Rest of this guide includes preparation steps if you prefer to avoid a full rewrite yet making modules compatible with Nuxt 3.
 
-::tip{icon="i-ph-puzzle-piece-duotone" to="/modules"}
+::tip{icon="i-ph-puzzle-piece" to="/modules"}
 Explore Nuxt 3 compatible modules.
 ::
 
diff --git a/docs/7.migration/_dir.yml b/docs/7.migration/_dir.yml
index 54585df393..a880111684 100644
--- a/docs/7.migration/_dir.yml
+++ b/docs/7.migration/_dir.yml
@@ -1,3 +1,3 @@
 titleTemplate: 'Migrate to Nuxt 3: %s'
 title: 'Migrate to Nuxt 3'
-icon: i-ph-arrow-circle-up-duotone
+icon: i-ph-arrow-circle-up
diff --git a/docs/_dir.yml b/docs/_dir.yml
index 6639eb3a35..18fdf7dc26 100644
--- a/docs/_dir.yml
+++ b/docs/_dir.yml
@@ -1,2 +1,2 @@
 title: Docs
-icon: i-ph-book-bookmark-duotone
+icon: i-ph-book-bookmark