diff --git a/docs/content/3.components/icon.md b/docs/content/3.components/icon.md
index 69b4c02e..b8e4ecb7 100644
--- a/docs/content/3.components/icon.md
+++ b/docs/content/3.components/icon.md
@@ -13,15 +13,14 @@ links:
 
 You can use any name from the https://icones.js.org collection such as the `i-` prefix:
 
-::component-card
+::component-code
 ---
-baseProps:
-  class: 'w-5 h-5'
 props:
   name: 'i-heroicons-light-bulb'
+  class: 'w-5 h-5'
 ---
 ::
 
-::callout{icon="i-heroicons-light-bulb"}
+::tip
 It's highly recommended to install the icons collections you need, read more about this in [Theming](/getting-started/theming#icons).
 ::
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index dbed5d0f..2340dad9 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -120,6 +120,7 @@ export default defineNuxtConfig({
       const globals = components.filter(c => [
         'UBadge',
         'UButton',
+        'UIcon',
         'UKbd',
         'ULink'
       ].includes(c.pascalName))