diff --git a/.agents/skills/studio-app-building/DESIGN.md b/.agents/skills/studio-app-building/DESIGN.md
index 7255b5fbb..a5c1029fd 100644
--- a/.agents/skills/studio-app-building/DESIGN.md
+++ b/.agents/skills/studio-app-building/DESIGN.md
@@ -119,7 +119,7 @@ principles above instead; the widths are starting points, not limits.
   `width: "320px"` with a left hairline, holding label/value rows (label
   `text-sm` `ink-gray-6`, value `text-base` `ink-gray-8`).
 - **Empty state** (any list/dashboard with no data): centered column,
-  `padding: "64px 0px"`, `gap: "12px"` — an icon in a `var(--surface-gray-2)`
+  `padding: "64px 0px"`, `gap: "12px"` — an `Icon` in a `var(--surface-gray-2)`
   circle (`padding: "12px"`, `borderRadius: "9999px"`, icon `ink-gray-5`), a
   `text-base` `ink-gray-7` title, a `text-sm` `ink-gray-5` caption, and one
   solid CTA. Never render a bare "No data" string.
diff --git a/.agents/skills/studio-app-building/RULES.md b/.agents/skills/studio-app-building/RULES.md
index aaaacf015..287415631 100644
--- a/.agents/skills/studio-app-building/RULES.md
+++ b/.agents/skills/studio-app-building/RULES.md
@@ -37,6 +37,11 @@
   `value` prop with `{{ value }}`.
 - Icons are plain `lucide-<name>` strings on any `icon`, `iconLeft` or `iconRight`
   prop and on `Icon`; there is no `getIcon()` helper and no `FeatherIcon`.
+- Use the `Icon` component for a standalone lucide icon:
+  `{"componentName": "Icon", "componentProps": {"icon": "lucide-<name>"}}`.
+  Do not make a raw `span` with a `lucide-*` class. It has no `icon` prop, so the
+  icon picker does not show for it.
+  For a custom SVG (a logo or an illustration), use an `HTML` block.
 - Style values use espresso tokens — `var(--ink-…)` for text, `var(--surface-…)`
   for backgrounds, `var(--outline-…)` for borders — NEVER raw hex or rgb().
   Pick the exact step by ROLE from the design language.
diff --git a/studio/ai/prompts.py b/studio/ai/prompts.py
index 86f744cc1..706c22632 100644
--- a/studio/ai/prompts.py
+++ b/studio/ai/prompts.py
@@ -17,10 +17,11 @@
 - ImageView: {image: "url", size: "xs|sm|md|lg|xl"}
 - Divider: (no props)
 - Tooltip: {text: "string"}
-- HTML: {html: "<p>raw html</p>"}
+- HTML: {html: "<p>raw html</p>"} # can also use for a custom SVG (a logo or an illustration)
+- Icon: {icon: "lucide-icon-name"} # use for a standalone lucide icon, NEVER a raw span with a lucide-* class
 
 INPUTS:
-- TextInput: {modelValue: "string", label: "string", placeholder: "string"} # slots: prefix, suffix (e.g. an icon before/after the field)
+- TextInput: {modelValue: "string", label: "string", placeholder: "string"} # slots: prefix, suffix (e.g. an Icon before/after the field)
 - Textarea: {modelValue: "string", label: "string", placeholder: "string"}
 - FormControl: {modelValue: "string", type: "text|email|number|textarea|select|date|combobox|multiselect|password|tel|url|range", label: "string", placeholder: "string", required: "boolean", options: [{label: "string", value: "string"}] (for select and combobox)}
 - Select: {modelValue: "string", label: "string", placeholder: "string", options: [{label: "string", value: "string"}]} # slots: prefix, suffix, item-label, empty, footer