NV Elements Catalog Starters Repo System Themes Getting Started Getting Started Installation CLI MCP Skills Lint Integrations Getting Started Angular Bundles Custom Elements Golang Hugo Import Maps Lit Lit Library MCP Apps NextJS Nuxt Preact React SolidJS Svelte TypeScript Vue About Changelog Metrics Support Accessibility Contributions Requests Migration Foundations Overview Typography Iconography Themes Design Tokens Size & Space Objects Interactions Support Status Color Animation Fonts Layers Custom Layout Horizontal Vertical Grid Popovers i18n Visualization View Transitions Elements Accordion Alert Avatar Badge Breadcrumb Button Button Group Card Chat Message Checkbox Color Combobox Copy Button Datagrid Integrations Column Action Column Alignment Column Fixed Column width Container Card Display Settings Footer Heatmap Keynav Multi Select Pagination Panel Detail Panel Grid Performance Placeholder Row Action Row Groups Row Sort Scroll Height Single Select Stripe Date Datetime Dialog Divider Dot Drawer Dropdown Dropdown Group Dropzone File Format Datetime Format Number Format Relative Time Forms Validation Actions Control Icon Icon Button Input Input Group Logo Menu Month Notification Page Page Header Page Loader Pagination Progressive Filter Chip Progress Bar Progress Ring Password Preferences Input Pulse Radio Range Resize Handle Search Select Skeleton Sort Button Sparkline Star Rating Steps Switch Tabs Tag Textarea Time Toast Toggletip Toolbar Tooltip Tree Week Patterns Authentication Browse Chat Dashboard Editor Empty States Heatmap Keyboard Shortcut Logging Media Navigation Onboarding Panel Responsive Search Subheader Trend Code Codeblock Monaco Input Diff Input Editor Diff Editor Problems Markdown Markdown CSS Utility Labs Responsive Layout Viewport Container Patterns Forms API Design Properties & Attributes Slots Registration CustomEvents Stateless Composition Styles Packaging Glossary Logs Internal Guidelines Agent Harness Agent Tooling Agent Ownership Documentation Examples TypeScript Testing Unit Testing Accessibility Testing Lighthouse Testing SSR Testing Visual Testing Troubleshooting Component Creation Internal Examples All Examples

Icon

stable:  0.2.3 Coverage: 68.00% Bundle: 18.22kb Lighthouse: 100 Axe Core Released: 0.1.3
Overview API Examples

<nve-icon>

Properties

Property Attribute Description Values name name

The name of the icon SVG sprite to render.

placeholder
caret
person
menu
cancel
gear
chevron
logout
copy
more-actions
add
arrow
delete
download
search
split-vertical
sparkles
branch
refresh
double-chevron
academic-cap
add-asset
add-comment
add-grid
add-user
ancestors
archive
arrow-angle
arrow-both
arrow-cycle
arrow-path-rounded-square
arrow-stop
at-symbol
backspace
bar-pill-stack
bars-3
bars-3-bottom-left
bars-3-bottom-right
bars-3-center-left
bars-4
beaker
bell
bell-slash
bell-stroke
bold
book
bookmark
bookmark-stroke
bounding-box
briefcase
broadcast
browser
bug
calendar
camera
carets-closed-square
carousel
category-list
chart-bar
chat-bubble
chat-bubbles
check
check-badge
checklist
checkmark-circle
chip
circle
circle-angled-line
circle-dash
circle-dot
circle-dot-arrows
circle-half
circle-rule
circle-tick
clipboard
clock
clock-circle-arrow
cloud
cloud-download
cloud-upload
code
collapse-all
collapse-details
color-palette
columns
compare
computer
connect-node
connected-blocks
cross-hairs
cursor-rays
cursor-ripples
data-management
delete-node
doc-checkmark
dock-bottom
dock-none
dock-side
document
document-clipboard
dot
dot-stroke
drag
dropper
duplicate
edit
ellipses
envelope
exclamation-circle
exclamation-mark
exclamation-triangle
expand-all
expand-details
expression
eye
eye-hidden
face-frown
face-smile
fast-forward
fast-forward-10
film
filter
filter-stroke
flag
flag-stroke
fold
folder
fork
globe
globe-alt-stroke
group
group-boxes
hand
hash
heading
home
horizontal-rule
hourglass
hourglass-end
hourglass-mid
hourglass-start
identification
image
inbox
infinity
information-circle-stroke
inspect
italic
key
keyboard
laptop-phone
layers
lifebuoy
lightbulb
lightning-bolt
link
list-ordered
list-unordered
lock
login
looping
looping-off
map
map-drives
map-pin
markdown
maximize
megaphone
merge
meter
minimize
minus
minus-circle
moon
multiselect
music-note
newspaper
not-allowed
numbers
office-building
outline
paper-airplane
paper-clip
pause
pencil-square
person-2
person-3
person-circle
phone
picture-in-picture
pie-chart
pin
pizza-slice
play
plug
plus-circle
plus-minus
pointer
pointer-stroke
priority-high
priority-low
priority-medium
projector
pull-close
pull-draft
pull-open
pulse
puzzle-piece
question-mark-circle
question-mark-circle-stroke
rectangle-group
rectangle-stack-horizontal
rectangle-stack-vertical
redo
reply
rewind
rewind-10
rocketship
running
scale
scissors
sensor
server
server-stack
shapes
share
signal
signal-slash
signpost
sort-ascending
sort-descending
soundwave
split-horizontal
split-none
star
star-half
star-stroke
start
status-offline
status-online
stop
stop-sign
stopwatch
strikethrough
sun
swatch
switch
switch-apps
table
tag
task
telescope
template
terminal
thumb
thumb-stroke
traffic-cone
transparent-box
trend-down
trend-up
trophy
truck
typography
undo
unlock
upload
video-camera
view-as-grid
volume
volume-muted
wifi
wrench
x-circle
zoom-in
zoom-out
direction direction

Sets the direction of the icon. Only supported by expand-panel/collapse-panel (horizontal axis) and arrow/caret/chevron icons (4-directions)

up
down
left
right
size size

Controls the visual scale of an element to match its importance and available space.

sm Compact size for dense layouts or secondary elements with less visual prominence.
md Standard size that works well in most contexts and provides balanced visibility.
lg Larger size for emphasizing important elements or improving touch targets in spacious layouts.
xs
xl
status status

Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.

warning Indicates cautionary actions that require careful consideration before proceeding.
danger Signals destructive or irreversible actions that need extra attention and confirmation.
success Represents positive outcomes, confirmations, or constructive actions.
accent Highlights important actions or draws attention to primary interactive elements.

Slots

Slot Description default

Custom SVG content to override the named icon

CSS Properties

Css-property Description --height --width --color