diff --git a/docs/content/1.getting-started/2.installation.md b/docs/content/1.getting-started/2.installation.md
index ea9b14f5..705fb6f9 100644
--- a/docs/content/1.getting-started/2.installation.md
+++ b/docs/content/1.getting-started/2.installation.md
@@ -194,7 +194,7 @@ To enable these two features, you can add the following to your `.vscode/setting
 {
   "tailwindCSS.experimental.classRegex": [
     ["ui:\\s*{([^)]*)\\s*}", "[\"'`]([^\"'`]*).*?[\"'`]"],
-    ["/\\*ui\\*/\\s*{([^;]*)}", ":\\s*[\"'`]([^\"'`]*).*?[\"'`]"]
+    ["/\\*\\s?ui\\s?\\*/\\s*{([^;]*)}", ":\\s*[\"'`]([^\"'`]*).*?[\"'`]"]
   ]
 }
 ```
@@ -207,7 +207,7 @@ An example SFC using IntelliSense (note the `/*ui*/` prefix, also works with `re
 </template>
 
 <script setup lang="ts">
-const ui = /*ui*/ {
+const ui = /* ui */ {
   background: 'bg-white dark:bg-slate-900'
 }
 </script>
diff --git a/docs/content/2.components/icon.md b/docs/content/2.components/icon.md
index 264d5647..366770d5 100644
--- a/docs/content/2.components/icon.md
+++ b/docs/content/2.components/icon.md
@@ -18,7 +18,11 @@ props:
 ::
 
 ::callout{icon="i-heroicons-exclamation-triangle"}
-You won't be able to use any icon in the `name` prop here as icons are bundled using [egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons), read more about this in [Theming](/getting-started/theming#icons).
+You won't be able to use all icons in the `name` prop here as icons are bundled using [egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons).
+::
+
+::callout{icon="i-heroicons-light-bulb"}
+Don't forget to install and specify the icon collections you need in your `nuxt.config.ts`, read more about this in [Theming](/getting-started/theming#icons).
 ::
 
 ### Dynamic