diff --git a/docs/content/docs/1.getting-started/1.index.md b/docs/content/docs/1.getting-started/1.index.md
index 4033635bc..d4e5833b4 100644
--- a/docs/content/docs/1.getting-started/1.index.md
+++ b/docs/content/docs/1.getting-started/1.index.md
@@ -3,11 +3,11 @@ title: Installation
 description: Get started with Nuxt i18n module.
 ---
 
-::callout
+::callout{icon="i-heroicons-light-bulb"}
 You are reading the `v8` documentation compatible with **Nuxt 3**. :br Checkout [v7 Docs](/docs/v7) for **Nuxt 2** compatible version.
 ::
 
-::callout
+::callout{icon="i-heroicons-light-bulb"}
 Nuxt i18n module is using **Vue i18n v9**. See [Vue i18n docs](https://vue-i18n.intlify.dev/) for more.
 ::
 
diff --git a/docs/content/docs/1.getting-started/2.usage.md b/docs/content/docs/1.getting-started/2.usage.md
index 2866693a2..14dc5e574 100644
--- a/docs/content/docs/1.getting-started/2.usage.md
+++ b/docs/content/docs/1.getting-started/2.usage.md
@@ -33,12 +33,12 @@ export default defineI18nConfig(() => ({
 
 The `i18n.config` file exports the same options as the `createI18n` function of Vue I18n. The configuration is passed to the `createI18n` function via the Nuxt plugin (runtime) of this module internally. For more details about configuration, see the [Vue I18n documentation](https://vue-i18n.intlify.dev/api/general.html#createi18n).
 
-::callout
+::callout{icon="i-heroicons-light-bulb"}
 The following documentation explains how to use the Nuxt i18n module using Vue I18n Composition API. :br
 For more information on how to use Vue I18n Composition API, please see the docs [here](https://vue-i18n.intlify.dev/guide/advanced/composition.html).
 ::
 
-::callout{type="warning"}
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 You can also use Vue I18n's Legacy API in the Nuxt i18n module, this requires configuring [nuxt.config](https://i18n.nuxtjs.org/options/bundle) and i18n.config (`legacy: true`)
 ::
 
@@ -62,7 +62,7 @@ const { locale, setLocale } = useI18n()
 
 You now have a really simple Vue I18n based translation environment ready to go! The `<button>` elements can be used to switch between the English and French languages, by clicking either of the buttons you can see the word "welcome" translate and the page URL change to its corresponding language.
 
-::callout
+::callout{icon="i-heroicons-light-bulb"}
 For more information about **Vue I18n**, you can refer to its documentation [here](https://vue-i18n.intlify.dev/).
 ::
 
@@ -126,7 +126,7 @@ const localePath = useLocalePath()
 
 Note that `localePath` can use the route's unprefixed path, which must start with `'/'` or the route's base name to generate the localized URL. The base name corresponds to the names Nuxt generates when parsing your `pages` directory, more info in [Nuxt docs](https://nuxt.com/docs/guide/directory-structure/pages).
 
-::callout
+::callout{icon="i-heroicons-light-bulb"}
 If you prefer to use the Options API, you can use `this.localePath`. This API is kept for migration from Nuxt 2.
 ::
 
@@ -147,7 +147,7 @@ const switchLocalePath = useSwitchLocalePath()
 </template>
 ```
 
-::callout
+::callout{icon="i-heroicons-light-bulb"}
 If you prefer to use the Options API, you can use `this.switchLocalePath`. This API is kept for migration from Nuxt 2.
 ::
 
@@ -175,6 +175,6 @@ function onClick() {
 </template>
 ```
 
-::callout
+::callout{icon="i-heroicons-light-bulb"}
 If you prefer to use the Options API, you can use `this.localeRoute`. This API is kept for migration from Nuxt 2.
 ::
diff --git a/docs/content/docs/2.guide/1.index.md b/docs/content/docs/2.guide/1.index.md
index fe7d95151..600cb4c5e 100644
--- a/docs/content/docs/2.guide/1.index.md
+++ b/docs/content/docs/2.guide/1.index.md
@@ -3,7 +3,7 @@ title: Routing Strategies
 description: Nuxt i18n module overrides Nuxt default routes to add locale prefixes to every URL with routing strategies.
 ---
 
-::callout
+::callout{icon="i-heroicons-light-bulb"}
 This feature works under [nuxt routing](https://nuxt.com/docs/getting-started/routing). It's assumed that you are using the `pages` directory to control routing.
 ::
 
@@ -57,7 +57,7 @@ There are 4 supported strategies that affect how app's routes are generated:
 
 With this strategy, your routes won't have a locale prefix added. The locale will be detected & changed without changing the URL. This implies that you have to rely on browser & cookie detection, and implement locale switches by calling the i18n API.
 
-::callout
+::callout{icon="i-heroicons-light-bulb"}
 This strategy doesn't support [Custom paths](/docs/guide/custom-paths) and [Ignore routes](/docs/guide/ignoring-localized-routes) features.
 ::
 
diff --git a/docs/content/docs/2.guide/11.per-component-translations.md b/docs/content/docs/2.guide/11.per-component-translations.md
index cb793d22f..56064545f 100644
--- a/docs/content/docs/2.guide/11.per-component-translations.md
+++ b/docs/content/docs/2.guide/11.per-component-translations.md
@@ -41,11 +41,11 @@ ja:
 </i18n>
 ```
 
-::callout{type="info"}
+::callout{icon="i-heroicons-light-bulb"}
 Read more about [i18n custom blocks](https://vue-i18n.intlify.dev/guide/advanced/sfc.html)
 ::
 
-::callout{type="warning"}
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 When you use per-component translations, you will need to use `t` exported by `useI18n`, **not `$t`**.
 To read more about `$t` which isn't used in per-component translation, see the ["implicit with injected properties and functions" section of Vue I18n docs](https://vue-i18n.intlify.dev/guide/advanced/composition.html#implicit-with-injected-properties-and-functions).
 ::
diff --git a/docs/content/docs/2.guide/12.extend-messages.md b/docs/content/docs/2.guide/12.extend-messages.md
index 9366fb06d..4f7a8d891 100644
--- a/docs/content/docs/2.guide/12.extend-messages.md
+++ b/docs/content/docs/2.guide/12.extend-messages.md
@@ -72,6 +72,6 @@ export default defineNuxtConfig({
 })
 ```
 
-::callout
+::callout{icon="i-heroicons-light-bulb"}
 Because module's messages are merged with the project's ones, it's safer to prefix them. Main project messages **will always override** messages provided by modules.
 ::
diff --git a/docs/content/docs/2.guide/13.extend-pages.md b/docs/content/docs/2.guide/13.extend-pages.md
index 6331248d8..4301cc77e 100644
--- a/docs/content/docs/2.guide/13.extend-pages.md
+++ b/docs/content/docs/2.guide/13.extend-pages.md
@@ -3,11 +3,11 @@ title: Extending pages
 description: Adding localized pages from a module.
 ---
 
-::callout{type="info"}
+::callout{icon="i-heroicons-light-bulb"}
 This is a workaround, support for extending pages with localization regardless of module registration order may be added in the future.
 ::
 
-::callout{type="warning"}
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 Your module has to registered before `@nuxtjs/i18n` to ensure localized routes are generated for the added pages.
 ::
 
diff --git a/docs/content/docs/2.guide/14.layers.md b/docs/content/docs/2.guide/14.layers.md
index c461ac554..d7f0b5ea5 100644
--- a/docs/content/docs/2.guide/14.layers.md
+++ b/docs/content/docs/2.guide/14.layers.md
@@ -82,7 +82,7 @@ export default defineNuxtConfig({
 
 ::
 
-::callout{type="info"}
+::callout{icon="i-heroicons-light-bulb"}
 Note how some options such as `lazy` are inherited, while options such as `langDir` and `locales` need to be set for every layer (project included) providing locale files.
 ::
 
diff --git a/docs/content/docs/2.guide/15.server-side-translations.md b/docs/content/docs/2.guide/15.server-side-translations.md
index 9bfef06d1..caa3873d7 100644
--- a/docs/content/docs/2.guide/15.server-side-translations.md
+++ b/docs/content/docs/2.guide/15.server-side-translations.md
@@ -5,7 +5,7 @@ description: Translate on the server-side and return it as a response.
 
 You can do the translation on the server-side and return it as a response. The locale messages defined in nuxt i18n module options are integrated, so all you need to do is configure the locale detector.
 
-::callout{type="warning"}
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 **This feature is experimental,** that is supported from v8 RC8.
 ::
 
@@ -80,6 +80,6 @@ export default defineEventHandler(async event => {
 })
 ```
 
-::callout{type="info"}
+::callout{icon="i-heroicons-light-bulb"}
 For the key of the translation function, you can specify the locale messages set in the nuxt-i18n options inside the nuxt.config, or the locale loaded in the i18n.config messages.
 ::
diff --git a/docs/content/docs/2.guide/16.install-module.md b/docs/content/docs/2.guide/16.install-module.md
index ada3e9255..4e696ffd4 100644
--- a/docs/content/docs/2.guide/16.install-module.md
+++ b/docs/content/docs/2.guide/16.install-module.md
@@ -5,7 +5,7 @@ description: How to install Nuxt i18n using `installModule` inside of a module.
 
 If you're a **module author** and want your module to install Nuxt i18n, you can do so using `installModule` but you will have to resolve paths used for `vueI18n`, `langDir` and those configured in `locales`.
 
-::callout
+::callout{icon="i-heroicons-light-bulb"}
 We strongly recommend using [layers](/docs/guide/layers) for complete module installations over using `installModule`, layers are merged by priority which allows projects to overwrite options as desired and will not cause conflicts if more than one layer provides options for the Nuxt i18n module.
 
 :br :br
diff --git a/docs/content/docs/2.guide/2.runtime-hooks.md b/docs/content/docs/2.guide/2.runtime-hooks.md
index bc4dd2ce3..39379ce5d 100644
--- a/docs/content/docs/2.guide/2.runtime-hooks.md
+++ b/docs/content/docs/2.guide/2.runtime-hooks.md
@@ -3,7 +3,7 @@ title: Runtime Hooks
 description: Nuxt i18n module exposes some runtime hooks as callbacks that you can use to perform specific tasks that depend on the app's language.
 ---
 
-::callout
+::callout{icon="i-heroicons-light-bulb"}
 For v8.0.0-beta.10 and below, please refer to [callbacks](/docs/v7/callbacks/) and [configuration](/docs/v7/options-reference#onbeforelanguageswitch).
 ::
 
diff --git a/docs/content/docs/2.guide/3.custom-paths.md b/docs/content/docs/2.guide/3.custom-paths.md
index 2016d5210..703663c3f 100644
--- a/docs/content/docs/2.guide/3.custom-paths.md
+++ b/docs/content/docs/2.guide/3.custom-paths.md
@@ -5,7 +5,7 @@ description: Customize the names of the paths for specific locale.
 
 In some cases, you might want to translate URLs in addition to having them prefixed with the locale code. There are 2 ways of configuring custom paths for your [Module configuration](#nodule-configuration) or your pages [Page component](#page-component).
 
-::callout{type="warning"}
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 Custom paths are not supported when using the `no-prefix` [strategy](/docs/guide).
 ::
 
@@ -59,7 +59,7 @@ const localePath = useLocalePath()
 </template>
 ```
 
-::callout{type="warning"}
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 Specifying a path to `localePath` is not supported, currently.
 ::
 
@@ -219,7 +219,7 @@ To configure a custom path for a dynamic route, you need to use it in double squ
 </script>
 ```
 
-::callout{type="info"}
+::callout{icon="i-heroicons-light-bulb"}
 `defineI18nRoute` compiler macro is tree-shaked out at build time and is not included in the dist files.
 ::
 
diff --git a/docs/content/docs/2.guide/4.ignoring-localized-routes.md b/docs/content/docs/2.guide/4.ignoring-localized-routes.md
index 757bc6b26..3feb8e6d5 100644
--- a/docs/content/docs/2.guide/4.ignoring-localized-routes.md
+++ b/docs/content/docs/2.guide/4.ignoring-localized-routes.md
@@ -3,7 +3,7 @@ title: Ignoring Localized Routes
 description: Customize localized route exclusions per page component.
 ---
 
-::callout{type="warning"}
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 This feature is not supported with the `no-prefix` [strategy](/docs/guide).
 ::
 
diff --git a/docs/content/docs/2.guide/5.browser-language-detection.md b/docs/content/docs/2.guide/5.browser-language-detection.md
index f3c6c02a1..4efe6002a 100644
--- a/docs/content/docs/2.guide/5.browser-language-detection.md
+++ b/docs/content/docs/2.guide/5.browser-language-detection.md
@@ -17,7 +17,7 @@ export default defineNuxtConfig({
 })
 ```
 
-::callout
+::callout{icon="i-heroicons-light-bulb"}
 For better SEO, it's recommended to set `redirectOn` to `root` (which is the default value). When set, the language detection is only attempted when the user visits the root path (`/`) of the site. This allows crawlers to access the requested page rather than being redirected away based on detected locale. It also allows linking to pages in specific locales.
 ::
 
diff --git a/docs/content/docs/2.guide/7.lazy-load-translations.md b/docs/content/docs/2.guide/7.lazy-load-translations.md
index 1abea3298..1294c2157 100644
--- a/docs/content/docs/2.guide/7.lazy-load-translations.md
+++ b/docs/content/docs/2.guide/7.lazy-load-translations.md
@@ -66,7 +66,7 @@ export default {
 }
 ```
 
-::callout{type="info"}
+::callout{icon="i-heroicons-light-bulb"}
 If your function returns an object of locale messages, **you must define it in the `defineI18nLocale` composable function**.
 
 About `defineI18nLocale` details, see the [here](/docs/api#defineI18nLocale).
@@ -209,6 +209,6 @@ const welcome = computed(() => t('welcome')) // Welcome!
 const welcomeDutch = computed(() => t('welcome', 1, { locale: 'nl' })) // Welkom!
 ```
 
-::callout{type="info"}
+::callout{icon="i-heroicons-light-bulb"}
 As messages could be loaded from a remote API invoking the `loadLocaleMessages` function will always load messages, unnecessary loading can impact performance.
 ::
diff --git a/docs/content/docs/2.guide/8.lang-switcher.md b/docs/content/docs/2.guide/8.lang-switcher.md
index 91003381d..501bec8d2 100644
--- a/docs/content/docs/2.guide/8.lang-switcher.md
+++ b/docs/content/docs/2.guide/8.lang-switcher.md
@@ -45,7 +45,7 @@ export default defineNuxtConfig({
 })
 ```
 
-::callout{type="info"}
+::callout{icon="i-heroicons-light-bulb"}
 To persist the locale on a route change when using `detectBrowserLanguage`, you must explicitly update the stored locale cookie. This is done with [`setLocaleCookie(locale)`](/docs/api/vue-i18n#setlocalecookie) or [`setLocale(locale)`](/docs/api/vue-i18n#setlocale), which sets the cookie and switches to the route of the specified locale. Not doing so can cause redirects based on the locale set on the locale cookie during navigation.
 ::
 
@@ -73,7 +73,7 @@ const availableLocales = computed(() => {
 
 Dealing with dynamic route parameters requires a bit more work because you need to provide parameters translations to **Nuxt i18n module**. The composable `useSetI18nParams` can be used to set translations for route parameters, this is used to set SEO tags as well as changing the routes returned by `switchLocalePath`.
 
-::callout{type="warning"}
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 During SSR it matters when and where you set i18n parameters, since there is no reactivity during SSR.
 
 :br :br
@@ -126,7 +126,7 @@ setI18nParams({
 
 Note that a catch all route is defined **as an array**. In this case, there is only one element, but if you want to use a sub-path, for example `/not-found/post`, define multiple elements as in `['not-found', 'post']`. You will need to define more than one, e.g. `['not-found', 'post']`.
 
-::callout{type="info"}
+::callout{icon="i-heroicons-light-bulb"}
 **Nuxt i18n module** won't reset parameters translations for you, this means that if you use identical parameters for different routes, navigating between those routes might result in conflicting parameters. Make sure you always set params translations in such cases.
 ::
 
@@ -240,13 +240,13 @@ route.meta.pageTransition.onBeforeEnter = async () => {
 
 ## Dynamic route parameters using `definePageMeta` (Deprecated)
 
-::callout{type="warning"}
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 Dynamic route params using `nuxtI18n` on `definePageMeta` has been deprecated and will be removed in `v9`, use the composable [`useSetI18nParams`](/docs/api#useseti18nparams) instead.
 ::
 
 Dynamic params can be configured using `definePageMeta`. These will be merged with route params when generating lang switch routes with `switchLocalePath()`.
 
-::callout{type="warning"}
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 You have to set the `dynamicRouteParams` option to `true` in **Nuxt i18n module**'s options to enable dynamic route parameters.
 ::
 
diff --git a/docs/content/docs/3.options/1.index.md b/docs/content/docs/3.options/1.index.md
index b4011a154..89b33d562 100644
--- a/docs/content/docs/3.options/1.index.md
+++ b/docs/content/docs/3.options/1.index.md
@@ -59,7 +59,7 @@ export default defineI18nConfig(() => {
 })
 ```
 
-::callout{type="warning"}
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 The Vue I18n `messages` option should be returned **by the plain object**.
 
 That will be pre-compiled in the nuxt i18n module via vue-i18n message-compiler as an executable message in the vue-i18n runtime.
diff --git a/docs/content/docs/3.options/10.misc.md b/docs/content/docs/3.options/10.misc.md
index 9ba05e547..36be0cc83 100644
--- a/docs/content/docs/3.options/10.misc.md
+++ b/docs/content/docs/3.options/10.misc.md
@@ -11,12 +11,12 @@ description: Miscellaneous options.
 Supported properties:
 
 - `localeDetector` (default: `''`) - Specify the locale detector to be called per request on the server side. You need to specify the filepath where the locale detector is defined.
-::callout{type="warning"}
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 About how to define the locale detector, see the [`defineI18nLocaleDetector` API](/docs/api#definei18nlocaledetector)
 ::
 - `switchLocalePathLinkSSR` (default: `false`) - Changes the way dynamic route parameters are tracked and updated internally, improving language switcher SSR when using the [`SwitchLocalePathLink`](/docs/api/components#switchlocalepathlink) component.
 - `autoImportTranslationFunctions` (default: `false`) - Automatically imports/initializes `$t`, `$rt`, `$d`, `$n`, `$tm` and `$te` functions in `<script setup>` when used.
-::callout{type="warning"}
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 This feature relies on [Nuxt's Auto-imports](https://nuxt.com/docs/guide/concepts/auto-imports) and will not work if this has been disabled.
 ::
 
@@ -41,7 +41,7 @@ Supported properties:
 
 Enforces the type definition of the API style to be used. If you set `composition`, Composition API types provided by Vue I18n and `@nuxtjs/i18n` are supported, else `legacy`, Options API types are supported.
 
-::callout{type="warning"}
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 If it can not detect Nuxt configuration changing, you may need to run `nuxi prepare`.
 ::
 
@@ -52,7 +52,7 @@ If it can not detect Nuxt configuration changing, you may need to run `nuxi prep
 
 Whether to use `@nuxtjs/i18n` debug mode. If `true`, logs will be output to the console.
 
-::callout{type="warning"}
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 The purpose of this option is to help identify any problems with `@nuxtjs/i18n`.
 
 Don't enable this option in production. It's not optimized for it.
diff --git a/docs/content/docs/3.options/2.routing.md b/docs/content/docs/3.options/2.routing.md
index 7d5a89d17..418c79cc4 100644
--- a/docs/content/docs/3.options/2.routing.md
+++ b/docs/content/docs/3.options/2.routing.md
@@ -14,7 +14,7 @@ Can also be a function (will be passed a Nuxt Context as a parameter) that retur
 
 This property can also be set using [`runtimeConfig`](/docs/options/runtime-config).
 
-::callout{type="info"}
+::callout{icon="i-heroicons-light-bulb"}
 It's especially important to set this option when using SEO features, in which case it's required that generated SEO tags use fully-qualified URLs.
 ::
 
diff --git a/docs/content/docs/3.options/3.lazy.md b/docs/content/docs/3.options/3.lazy.md
index c05ea8e7b..5367bf2f7 100644
--- a/docs/content/docs/3.options/3.lazy.md
+++ b/docs/content/docs/3.options/3.lazy.md
@@ -23,6 +23,6 @@ A relative path to a directory containing translation files to load. Can be used
 
 The path is resolved relative to the project `srcDir` (project root by default).
 
-::callout{type="warning"}
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 Absolute paths will fail in production (eg. `/locales` should be changed into either `locales` or `./locales`)
 ::
diff --git a/docs/content/docs/3.options/4.browser.md b/docs/content/docs/3.options/4.browser.md
index 117dd36f5..ae286de80 100644
--- a/docs/content/docs/3.options/4.browser.md
+++ b/docs/content/docs/3.options/4.browser.md
@@ -12,7 +12,7 @@ Enables browser language detection to automatically redirect visitors to their p
 
 See also [Browser language detection](/docs/guide/browser-language-detection) for a guide.
 
-::callout{type="info"}
+::callout{icon="i-heroicons-light-bulb"}
 Note that for better SEO it's recommended to set `redirectOn` to `root`.
 ::
 
diff --git a/docs/content/docs/3.options/6.compilation.md b/docs/content/docs/3.options/6.compilation.md
index a579f7917..fc9651576 100644
--- a/docs/content/docs/3.options/6.compilation.md
+++ b/docs/content/docs/3.options/6.compilation.md
@@ -19,7 +19,7 @@ Supported properties:
 
 Whether to use the JIT compilation of Vue I18n message compiler.
 
-::callout{type="warning"}
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 Mean that necessary to pre-compile locale messages that are not managed by the nuxt i18n module (e.g. in the case of importing from a specific URL, you will need to precompile them yourself.)
 
 And also, you need to understand that you cannot support use cases where you dynamically compose locale messages from the back-end via an API.
@@ -32,7 +32,7 @@ And also, you need to understand that you cannot support use cases where you dyn
 
 Strictly check that the locale message does not contain HTML tags. If HTML tags are included, an error is thrown.
 
-::callout{type="warning"}
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 If you do not want the error to be thrown, you can work around it by setting it to false. However, **this means that the locale message might cause security issues with XSS**. In that case, we recommend setting the `escapeHtml` option to `true`.
 ::
 
@@ -43,6 +43,6 @@ If you do not want the error to be thrown, you can work around it by setting it
 
 Determine whether to escape HTML tags if they are included in the locale message.
 
-::callout{type="warning"}
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 If `strictMessage` is disabled by setting it to `false`, we recommend enabling this option.
 ::
diff --git a/docs/content/docs/4.api/1.index.md b/docs/content/docs/4.api/1.index.md
index ce2bb3295..495bced8a 100644
--- a/docs/content/docs/4.api/1.index.md
+++ b/docs/content/docs/4.api/1.index.md
@@ -234,7 +234,7 @@ declare function useCookieLocale(): Ref<string>
 
 The `useTranslation` composable returns the translation function.
 
-::callout{type="warning"}
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 **This composable is experimental and server-side only.**
 ::
 
@@ -349,7 +349,7 @@ The locale detector function is used to detect the locale on server-side. It's c
 
 You need return locale string.
 
-::callout{type="warning"}
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 **This composable is experimental.** You need to configure filepath to [`experimental.localeDetector` option](/docs/options/misc#experimental).
 ::
 
diff --git a/docs/content/docs/4.api/4.vue-i18n.md b/docs/content/docs/4.api/4.vue-i18n.md
index 9fcb05be5..ca311fab8 100644
--- a/docs/content/docs/4.api/4.vue-i18n.md
+++ b/docs/content/docs/4.api/4.vue-i18n.md
@@ -3,7 +3,7 @@ title: Vue I18n
 description: Extension of Vue I18n
 ---
 
-::callout{type="info"}
+::callout{icon="i-heroicons-light-bulb"}
 Instance of [Composer (for Composition API)](https://vue-i18n.intlify.dev/api/composition.html#composer) or [VueI18n (for Legacy API)](https://vue-i18n.intlify.dev/api/legacy.html#vuei18n) is exposed as `$i18n` on Vue instance.
 ::
 
diff --git a/docs/content/docs/4.api/5.vue.md b/docs/content/docs/4.api/5.vue.md
index e9e59a33b..fe28553d2 100644
--- a/docs/content/docs/4.api/5.vue.md
+++ b/docs/content/docs/4.api/5.vue.md
@@ -5,7 +5,7 @@ description: Extension of Vue.
 
 ## Extension of Vue
 
-::callout{type="warning"}
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 The APIs listed are available in the Options API. They are kept for Nuxt2 to migration from `@nuxtjs/i18n`. we will be deprecated in the future.
 ::
 
@@ -51,7 +51,7 @@ See also [Link localizing](/docs/getting-started/usage)
 
 ### localeHead()
 
-::callout{type="info"}
+::callout{icon="i-heroicons-light-bulb"}
 `localeHead` is renamed from `$nuxtI18nHead` provided in `@nuxtjs/i18n` v7.x.
 ::
 
diff --git a/docs/content/docs/5.v7/1.index.md b/docs/content/docs/5.v7/1.index.md
index e0b1df1e3..be6219b5d 100644
--- a/docs/content/docs/5.v7/1.index.md
+++ b/docs/content/docs/5.v7/1.index.md
@@ -3,7 +3,7 @@ title: Setup
 description: Setup nuxt/i18n v7 module.
 ---
 
-::callout
+::callout{icon="i-heroicons-light-bulb"}
 Check the [Nuxt.js documentation](https://nuxtjs.org/guides/configuration-glossary/configuration-modules) for more information about installing and using modules in Nuxt.js.
 ::
 
diff --git a/docs/content/docs/5.v7/11.lazy-load-translations.md b/docs/content/docs/5.v7/11.lazy-load-translations.md
index c0f8d4a84..3a7a1c09d 100644
--- a/docs/content/docs/5.v7/11.lazy-load-translations.md
+++ b/docs/content/docs/5.v7/11.lazy-load-translations.md
@@ -64,7 +64,7 @@ export default {
 }
 ```
 
-::callout
+::callout{icon="i-heroicons-light-bulb"}
 Note that if you want to use the `$axios` instance from the `@nuxtjs/axios` module within the exported function, the `@nuxtjs/axios` module must be registered **after** the `@nuxtjs/i18n` module.
 
 This rule in fact applies also to any other module that adds plugins and whose functionality you'd want to use from within that function.
diff --git a/docs/content/docs/5.v7/12.lang-switcher.md b/docs/content/docs/5.v7/12.lang-switcher.md
index de3c7d84b..b2df01a3b 100644
--- a/docs/content/docs/5.v7/12.lang-switcher.md
+++ b/docs/content/docs/5.v7/12.lang-switcher.md
@@ -40,7 +40,7 @@ i18n: {
 }
 ```
 
-::callout
+::callout{icon="i-heroicons-light-bulb"}
 When using `detectBrowserLanguage` and wanting to persist locale on a route change, you must call one of the functions that update the stored locale cookie. Call either [`setLocaleCookie(locale)`](./api#setlocalecookie) to persist just the cookie locale or [`setLocale(locale)`](./api#setlocale) to both persist the cookie locale and switch the route to the specified locale. Otherwise, locale might switch back to the saved one during navigation.
 ::
 
@@ -56,7 +56,7 @@ The template code might look like this, for example:
 
 Dealing with dynamic route parameters requires a bit more work because you need to provide parameters translations to **@nuxtjs/i18n**. For this purpose, **@nuxtjs/i18n**'s store module exposes a `routeParams` state property that will be merged with route params when generating lang switch routes with `switchLocalePath()`.
 
-::callout
+::callout{icon="i-heroicons-light-bulb"}
 Make sure that Vuex [is enabled](https://nuxtjs.org/guides/directory-structure/store) in your app and that you did not set `vuex` option to `false` in **@nuxtjs/i18n**'s options.
 ::
 
@@ -100,7 +100,7 @@ export default {
 </script>
 ```
 
-::callout
+::callout{icon="i-heroicons-light-bulb"}
 **@nuxtjs/i18n** won't reset parameters translations for you, this means that if you use identical parameters for different routes, navigating between those routes might result in conflicting parameters. Make sure you always set params translations in such cases.
 ::
 
diff --git a/docs/content/docs/5.v7/15.per-component-translations.md b/docs/content/docs/5.v7/15.per-component-translations.md
index a4f46e0e8..1a760f0fa 100644
--- a/docs/content/docs/5.v7/15.per-component-translations.md
+++ b/docs/content/docs/5.v7/15.per-component-translations.md
@@ -45,6 +45,6 @@ ja:
 </template>
 ```
 
-::callout
+::callout{icon="i-heroicons-light-bulb"}
 Read more about `i18n` blocks in https://kazupon.github.io/vue-i18n/guide/sfc.html.
 ::
diff --git a/docs/content/docs/5.v7/16.extend-messages.md b/docs/content/docs/5.v7/16.extend-messages.md
index 13994e5d4..95d90188d 100644
--- a/docs/content/docs/5.v7/16.extend-messages.md
+++ b/docs/content/docs/5.v7/16.extend-messages.md
@@ -34,6 +34,6 @@ export default function () {
 
 Now the project has access to new messages and can use them through `$t('my-module-exemple.hello')`.
 
-::callout
+::callout{icon="i-heroicons-light-bulb"}
 Because module's messages are merged with the project's ones, it's safer to prefix them. Main project messages **will always override** the module's ones.
 ::
diff --git a/docs/content/docs/5.v7/18.api.md b/docs/content/docs/5.v7/18.api.md
index 454bcef72..451df7769 100644
--- a/docs/content/docs/5.v7/18.api.md
+++ b/docs/content/docs/5.v7/18.api.md
@@ -5,7 +5,7 @@ description: ''
 
 ## Extension of Vue
 
-::callout
+::callout{icon="i-heroicons-light-bulb"}
 All [Vue I18n properties and methods](http://kazupon.github.io/vue-i18n/api/#vue-injected-methods) (like `$t`, `$i18n`, `v-t` directive and others) are also available even though they are not listed here. Below are only the ones that are added by `@nuxtjs/i18n`.
 ::
 
@@ -77,7 +77,7 @@ See also [SEO](./seo).
 
 ## Extension of VueI18n
 
-::callout
+::callout{icon="i-heroicons-light-bulb"}
 Instance of [VueI18n class](http://kazupon.github.io/vue-i18n/api/#vuei18n-class) (see its [properties and methods](http://kazupon.github.io/vue-i18n/api/#properties)) is exposed as `$i18n` on Vue instance and Vuex Store but as `i18n` on Nuxt `context.app`.
 ::
 
diff --git a/docs/content/docs/5.v7/3.options-reference.md b/docs/content/docs/5.v7/3.options-reference.md
index 727649160..ca74e27b8 100644
--- a/docs/content/docs/5.v7/3.options-reference.md
+++ b/docs/content/docs/5.v7/3.options-reference.md
@@ -14,7 +14,7 @@ The fallback base URL to use as a prefix for alternate URLs in `hreflang` tags.
 
 Can also be a function (will be passed a Nuxt Context as a parameter) that returns a string. Useful to make base URL dynamic based on request headers.
 
-::callout
+::callout{icon="i-heroicons-light-bulb"}
 It's especially important to set this option when using SEO features, in which case it's required that generated SEO tags use fully-qualified URLs.
 ::
 
@@ -47,7 +47,7 @@ When using an object form, the properties can be:
 
 You can access all the properties of the current locale through the `localeProperties` property. When using an array of codes, it will only include the `code` property.
 
-::callout
+::callout{icon="i-heroicons-light-bulb"}
 For direction attribute to be set, you MUST use the `$nuxtI18nHead` method in your layout.
 
 ::
@@ -148,7 +148,7 @@ Enables browser language detection to automatically redirect visitors to their p
 
 See also [Browser language detection](./browser-language-detection) for a guide.
 
-::callout
+::callout{icon="i-heroicons-light-bulb"}
 Note that for better SEO it's recommended to set `redirectOn` to `root`.
 ::
 
@@ -223,7 +223,7 @@ Properties:
 
 Configuration for the `vue-i18n` library that is used internally by this module. See full documentation at http://kazupon.github.io/vue-i18n/api/#constructor-options
 
-::callout
+::callout{icon="i-heroicons-light-bulb"}
 It's also supported to set this property to a path to a local configuration file. The file needs to export a function or plain object. If a function, it will be passed a Nuxt Context as a parameter. It's necessary to use that approach when overriding more complex types (like functions) that can't be stringified correctly.
 ::
 
diff --git a/docs/content/docs/5.v7/6.strategies.md b/docs/content/docs/5.v7/6.strategies.md
index 0342a6a71..a1204a445 100644
--- a/docs/content/docs/5.v7/6.strategies.md
+++ b/docs/content/docs/5.v7/6.strategies.md
@@ -9,7 +9,7 @@ There are four supported strategies that affect how [app's routes](./routing) ar
 
 With this strategy, your routes won't have a locale prefix added. The locale will be detected & changed without changing the URL. This implies that you have to rely on browser & cookie detection, and implement locale switches by calling the i18n API.
 
-::callout
+::callout{icon="i-heroicons-light-bulb"}
 This strategy doesn't support [Custom paths](./custom-paths) and [Ignore routes](./ignoring-localized-routes) features.
 ::
 
@@ -37,7 +37,7 @@ i18n: {
 }
 ```
 
-::callout
+::callout{icon="i-heroicons-light-bulb"}
 
 If on `Nuxt` version lower than 2.10.2, and using strategy `prefix_except_default` or `prefix_and_default`, make sure that that the locale matching `defaultLocale` is last in the array of locales. For example:
 ::
diff --git a/docs/content/docs/5.v7/7.custom-paths.md b/docs/content/docs/5.v7/7.custom-paths.md
index 7e73cf8f5..d53e09cce 100644
--- a/docs/content/docs/5.v7/7.custom-paths.md
+++ b/docs/content/docs/5.v7/7.custom-paths.md
@@ -5,7 +5,7 @@ description: nuxt/i18n v7 custom route paths.
 
 In some cases, you might want to translate URLs in addition to having them prefixed with the locale code. There are 2 ways of configuring custom paths for your pages: [in-component options](#in-component-options) or via the [module's configuration](#modules-configuration).
 
-::callout
+::callout{icon="i-heroicons-light-bulb"}
 Custom paths are not supported when using the `no-prefix` [strategy](./strategies).
 ::
 
diff --git a/docs/content/docs/5.v7/8.ignoring-localized-routes.md b/docs/content/docs/5.v7/8.ignoring-localized-routes.md
index 0fc2fc9b6..5adf720ce 100644
--- a/docs/content/docs/5.v7/8.ignoring-localized-routes.md
+++ b/docs/content/docs/5.v7/8.ignoring-localized-routes.md
@@ -2,7 +2,7 @@
 title: Ignoring Localized Routes
 ---
 
-::callout
+::callout{icon="i-heroicons-light-bulb"}
 This feature is not supported with the `no-prefix` [strategy](./strategies).
 ::
 
diff --git a/docs/content/docs/5.v7/9.browser-language-detection.md b/docs/content/docs/5.v7/9.browser-language-detection.md
index be96f0135..75b87867c 100644
--- a/docs/content/docs/5.v7/9.browser-language-detection.md
+++ b/docs/content/docs/5.v7/9.browser-language-detection.md
@@ -15,7 +15,7 @@ i18n: {
 }
 ```
 
-::callout
+::callout{icon="i-heroicons-light-bulb"}
 For better SEO, it's recommended to set `redirectOn` to `root` (which is the default value). With it set, the language detection is only attempted when the user visits the root path (`/`) of the site. This allows crawlers to access the requested page rather than being redirected away based on detected locale. It also allows linking to pages in specific locales.
 ::