diff --git a/docs/content/1.getting-started/4.icons/2.vue.md b/docs/content/1.getting-started/4.icons/2.vue.md
index 3c3071d69a..09ef42de12 100644
--- a/docs/content/1.getting-started/4.icons/2.vue.md
+++ b/docs/content/1.getting-started/4.icons/2.vue.md
@@ -23,7 +23,7 @@ You can use the [Icon](/components/icon) component with a `name` prop to display
 ::component-code{slug="icon"}
 ---
 props:
-  name: 'i-lucide-lightbulb'
+  name: 'i-lucide:lightbulb'
   class: 'size-5'
 ---
 ::
@@ -32,6 +32,10 @@ props:
 You can use any name from the <https://icones.js.org> collection.
 ::
 
+::warning
+You have to separate the icon name from the collection with a colon (`:`). Learn more about the [Iconify naming convention](https://iconify.design/docs/icon-components/vue/#icon).
+::
+
 ### Component Props
 
 Some components also have an `icon` prop to display an icon, like the [Button](/components/button) for example:
@@ -42,7 +46,7 @@ ignore:
   - color
   - variant
 props:
-  icon: i-lucide-sun
+  icon: i-lucide:sun
   variant: subtle
 slots:
   default: Button