Getting Started
Icons
Icons are resolved dynamically by name — icon="caretRight" resolves to the bundled CaretRight icon component. There's no icon registry to configure.
Usage
html
<UiIcon icon="caretRight" />
<UiButton icon="plus">New</UiButton> Most components that accept an icon prop (Button, Input, Alert, menu items, …) resolve it through the same UiIcon component under the hood.
Sizes
xs
sm
md
lg
xl
Or pass an exact pixel value instead of a named size, e.g. :size="28".
Adding your own
Drop a new PascalCase.vue file into the icon directory — an SVG with a size prop, viewBox="0 0 24 24", and stroke="currentColor" (or fill="currentColor" for solid icons) — and it's immediately usable by its camelCase name, no registration step.
MyIcon.vue
vue
<template>
<svg :width="size" :height="size" viewBox="0 0 24 24" fill="none">
<path d="M12 4V20M4 12H20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
</svg>
</template>
<script lang="ts" setup>
interface IconProps {
size?: number;
}
withDefaults(defineProps<IconProps>(), {
size: 24,
});
</script>All 282 bundled icons
Activity
Airplane
AlignBottom
AlignHorizontally
AlignLeft
AlignRight
AlignTop
AlignVertically
Archive
AreaChart
ArrowDown
ArrowLeft
ArrowOut
ArrowRight
ArrowSquareDown
ArrowSquareLeft
ArrowSquareRight
ArrowSquareUp
ArrowUp
At
Avatar
Award
Badge
Bank
BarChart
Bell
Bookmark
BookmarkCheck
BookmarkMinus
BookmarkPlus
Bookmarks
BookmarkSlash
BookOpen
Brush
Buildings
Calculator
Calendar
CalendarDate
CalendarMonth
Camera
Card
CardEdit
Cards
CaretDoubleLeft
CaretDoubleRight
CaretDown
CaretLeft
CaretRight
CaretUp
CategoriesShapes
Chat
Checkbox
Checklist
Checkmark
CheckmarkFill
Checkmarks
CirclesHorizontal
Clipboard
ClipboardCheck
ClipboardText
ClipboardX
Clock
ClockHands
ClockHandsFill
Close
Cloud
Code
Coffee
ColorPalette
ColorSwatch
Command
CommandKey
Compass
Component
Compute
ComputerMouse
Cookie
Copy
CopySuccess
Crop
CursorCircle
CursorFilled
CursorHelp
CursorMoving
CursorSquare
Danger
Database
DataTable
DataTree
Desktop
DesktopMobile
Diamond
Document
Documents
DocumentText
DocumentUpload
DonutChart
DotsSix
DotsThree
Download
Emoji
Envelope
Eye
Eyedropper
EyeOff
EyeSlash
Film
Filter
Fingerprint
Flashlight
Flask
Folder
FolderHeart
FolderMinus
FolderPlus
FolderX
Form
Gauge
Gear
Github
Globe
Graduation
Grid
GridMasonry
GridPlus
HardDrive
Hashtag
Heart
Hearts
Home
HorizontalMove
Hotspot
Image
ImportArrow
Inbox
InfoCircle
InputField
Key
Knob
Laptop
Layers
Leaf
LineChart
Link
List
Loader
Lock
LockOpen
Login
Logo
Logout
MagnifyingGlass
MagnifyText
MainComponent
Map
MapPin
MapPinCheck
MapPinMinus
MapPinPlus
MapPinX
Mcp
Medal
Message
Messages
Microphone
MicrophoneSlash
Minus
MirroringScreen
Mobile
Music
MusicNote
Note
Package
Paperclip
PaperPlane
PasswordInput
Pause
PauseFill
Paypal
Pencil
People
PersonalCard
Phone
PhoneCalling
PhoneCheck
PhoneIncoming
PhoneMinus
PhoneOutgoing
PhonePlus
PhoneSlash
PhoneX
PieChart
Pin
Play
PlayFill
PlayingCards
Plug
Plus
PointerFilled
Power
PresentationChart
Printer
Progress
Quote
Radar
RadarChart
RadialChart
Radio
RadioButton
Random
RedoArrow
Rocket
Route
ScatterChart
SelectInput
SelectionFrame
Shield
Shop
Sidebar
SidebarGrid
SidebarGridMasonry
Size
Slider
Sort
SortAscending
SortDescending
SortNone
SpacingY
Sparkles
Speaker
Square
Stack
Star
Stars
Sticker
Stop
StopFill
Switch
SwitchOff
Tag
Target
Television
Terminal
Text
TextAlignCenter
TextAlignLeft
TextAlignRight
Textarea
TextBold
TextCase
TextItalic
TextUnderline
ThemeSwitch
Ticket
TicketExpired
Timer
TimeReverse
TimerPause
TimerStart
TransactionArrows
Translation
Trash
TrendUp
UndoArrow
Upload
User
UserCheck
UserMinus
UserPlus
Users
UserX
VerticalMove
Video
VideoCamera
VolumeCross
VolumeHigh
VolumeLow
Wallet
WalletOpen
WarningCircle
Write
Zip