diff --git a/docs/content/1.getting-started/3.theming.md b/docs/content/1.getting-started/3.theming.md
index 8fa3bb9f..6b302a53 100644
--- a/docs/content/1.getting-started/3.theming.md
+++ b/docs/content/1.getting-started/3.theming.md
@@ -278,7 +278,7 @@ const isDark = computed({
 
 ## Icons
 
-Thanks to [`@nuxt/icon`](https://github.com/nuxt/icon), use 200,000+ ready to use icons based on [Iconify](https://iconify.design).
+Thanks to [`@nuxt/icon`](https://github.com/nuxt/icon), add 200,000+ ready to use icons to your Nuxt application based on [Iconify](https://iconify.design).
 
 You can use any name from the https://icones.js.org collection such as the `i-` prefix (for example, `i-heroicons-cog`) with:
 
@@ -320,7 +320,7 @@ npm install @iconify-json/{collection_name}
 
 For example, to use the `i-uil-github` icon, install it's collection with `@iconify-json/uil`. This way the icons can be served locally or from your serverless functions, which is faster and more reliable on both SSR and client-side.
 
-::callout{icon="i-heroicons-cog-6-tooth" to="https://github.com/nuxt/icon?tab=readme-ov-file#custom-local-collections" target="_blank"}
+::callout{icon="i-heroicons-light-bulb" to="https://github.com/nuxt/icon?tab=readme-ov-file#custom-local-collections" target="_blank"}
 Read more about custom collections in the `@nuxt/icon` documentation.
 ::
 
diff --git a/docs/content/2.components/icon.md b/docs/content/2.components/icon.md
index 0a275ca4..69b4c02e 100644
--- a/docs/content/2.components/icon.md
+++ b/docs/content/2.components/icon.md
@@ -1,5 +1,27 @@
 ---
-description: Use 200,000+ ready to use icons from Iconify.
-to: https://github.com/nuxt/icon
-target: _blank
+description: Add 200,000+ ready to use icons to your Nuxt application, based on Iconify.
+links:
+  - label: Iconify
+    icon: i-simple-icons-iconify
+    to: https://icones.js.org
+  - label: Nuxt Icon
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/icon
 ---
+
+## Usage
+
+You can use any name from the https://icones.js.org collection such as the `i-` prefix:
+
+::component-card
+---
+baseProps:
+  class: 'w-5 h-5'
+props:
+  name: 'i-heroicons-light-bulb'
+---
+::
+
+::callout{icon="i-heroicons-light-bulb"}
+It's highly recommended to install the icons collections you need, read more about this in [Theming](/getting-started/theming#icons).
+::