Component Catalog
Icon
Named icon display mapped to the Lucide icon set.
A2UI → Nuxt UI Mapping
| A2UI Property | Nuxt UI Result |
|---|---|
name | UIcon with Lucide icon name |
size | CSS size class |
Example JSONL
{"version":"v0.10","createSurface":{"surfaceId":"icon_demo","catalogId":"standard"}}
{"version":"v0.10","updateComponents":{"surfaceId":"icon_demo","components":[
{"id":"root","component":"Row","children":["star","heart","settings"]},
{"id":"star","component":"Icon","name":"star"},
{"id":"heart","component":"Icon","name":"heart"},
{"id":"settings","component":"Icon","name":"settings"}
]}}
Properties
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
name | string | ✅ | — | Icon name (mapped to i-lucide-{name}) |
size | string | — | — | Size override |
Rendering Details
- A2UI icon names are prefixed with
i-lucide-automatically - Uses Nuxt UI's
UIconcomponent - Full Lucide icon set available via
@iconify-json/lucide
Try It
Copy the JSONL above and paste it in the Playground Paste tab.