Elements

Icon

Resolves a named icon to its component and renders it at a given size.

html
<UiIcon :icon="..." />

Names resolve dynamically

Icons are resolved by name at render time (e.g. icon="caretRight" loads the CaretRight component) — a typo in the name fails silently instead of throwing an error.

Icon

required

icon is the lowerCamelCase name of one of the 282 bundled icons. The full searchable list lives on the Icons page.

ArrowDown
ArrowLeft
ArrowRight
ArrowUp
BookOpen
Buildings
Calendar
CaretDown
CaretLeft
CaretRight
CaretUp
Checkmark
ClipboardCheck
Close
Component
Copy
CopySuccess
DotsThree
Folder
Gear
Globe
Home
Layers
Login
Logout
MagnifyingGlass
Pencil
Plus
Sparkles
Star
Ticket
Timer
TrendUp
User
Users

Icons are resolved dynamically by name at render time (icon="caretRight" → the CaretRight icon component) — a typo in the name fails silently rather than throwing.

Size

size is a named token, or an exact pixel value when the icon has to line up with something that isn't on the scale.

xs
sm
md
lg
xl
14px
28px
44px

size accepts either a named token (xs/sm/md/lg) or a raw number of pixels.


API Reference

Generated from the component's source — props, slots and emits as the component actually declares them.

Props

Prop
Type
Default
Description
iconrequired
string
Name of the icon to render, resolved to a component under `../icon/<PascalCaseName>.vue`.
"xs" | "sm" | "md" | "lg" | "xl" | number
'md'
Icon size — a named token or an exact pixel value.