'/%3e%3cpath%20d='M0%2059.6282L80.7353%200.299805L161.471%2059.6282L80.7355%20118.345L0%2059.6282Z'%20fill='%2310B981'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_0_1'%20x1='80.7354'%20y1='39.9999'%20x2='80.7354'%20y2='113.5'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23065F46'/%3e%3cstop%20offset='1'%20stop-color='%2310B981'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e){kind=small}
#Usage
Browse icons registered in the docs app (docs/icons.ts).
Icons below are loaded from packages/ui/docs/icons.ts and passed to app.use(UI, { icons }) in the docs app. See the Icons guide to build your own set.
activity
align-justify
align-left
align-right
arrow-left
arrow-right
bar-chart-2
bold
book
check
check-circle
chevron-down
chevron-left
chevron-right
chevron-up
code
copy
cube
edit
external-link
forward
fullsvg
github
heart
image
italic
link
list
mail
map-pin
menu
menu-alt-1
menu-alt-3
moon
more-horizontal
nuxt
palette
pause
play
plus
refresh-cw
rewind
rotate-ccw
rss
search
shield
smile
sparkles
star
star-half
sun
trash
trending-up
truck
twitter
type
upload
users
vue
wrench
x
x-circle
x-octagon
#Formats
Registry keys, full SVG strings, raw paths, and filled object configs.
Registry key
Reference a name from your icons map.
icon="github"Full SVG string
Paste a complete <svg> element; attributes are applied automatically.
icon="fullsvg"Raw path markup
Pass path/polyline markup directly when the icon is not in the registry.
<polyline …>Filled icons (object config)
Use { icon, filled, viewBox } in the registry for multi-color or filled shapes.
vue
nuxt
play
#API
Icon
props
Name | Description | Type | Default | Values | Required |
|---|---|---|---|---|---|
size | Control size. One of xs, sm, md, lg, xl. | String | md | xssmmdlgxl | |
icon | Icon name from the injected icon set, or raw SVG path markup. | String | true | ||
filled | Renders a filled icon instead of an outline stroke. | Boolean | false | ||
viewBox | SVG viewBox when rendering path markup. | String | 0 0 24 24 |