NV NVIDIA Elements Catalog Starters GitHub System Themes

Icon

stable:  2.15.4 Coverage: 85.71% Bundle: 14.07kb Lighthouse: 100 Axe Core Released: 0.1.3
Overview API Examples

<nve-icon>

Properties

PropertyAttributeDescriptionValues appearance appearance

Selects the outline or solid form of the named icon. Solid icons use an optional -solid asset and fall back to the outline form when that asset is unavailable.

outline
solid
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
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
bold
book
bookmark
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
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
flag
fold
folder
fork
globe
globe-alt
group
group-boxes
hand
hash
heading
home
horizontal-rule
hourglass
hourglass-end
hourglass-mid
hourglass-start
identification
image
inbox
infinity
information-circle
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
priority-high
priority-low
priority-medium
projector
pull-close
pull-draft
pull-open
pulse
puzzle-piece
question-mark-circle
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
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
size size

Controls the bounding box size of the icon given a t-shirt style value.

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

SlotDescription default

Custom SVG content to override the named icon

CSS Properties

Css-propertyDescription --color --height --width
Getting Started Getting Started Installation CLI MCP Skills Lint GitHub Integrations Getting Started Angular Bundles CDN Custom Elements Eleventy Golang HTMX + Go Hugo Import Maps Lit Lit Library MCP Apps NextJS Nuxt Pi Preact React SolidJS Sphinx Svelte TypeScript Vue About What’s New Changelog Metrics Support Accessibility Contributions Requests Migration Sitemap 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 DESIGN.md Elements Accordion Alert Avatar Badge Breadcrumb Button Button Group Card Chat Message Checkbox Codeblock Color Combobox Copy Button Datagrid Getting Started 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 Drag Handle Drawer Dropdown Dropdown Group Dropzone File Format Bytes Datetime Number Relative Time Truncate Forms Getting Started Validation Actions Control Gauge Icon Icon Button Input Input Group Logo Markdown Markdown CSS Media Controller Pause Button Playback Rate Select Loop Button Mute Button Media PiP Button Seek Button Time Range Volume Range Full-screen Button Menu Month Monaco Input Diff Input Monaco Editor Diff Editor Problems 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 Viewport Viewport Gridlines Minimap Zoom Range Week Patterns Agent Authentication Browse Chat Code Dashboard Editor Empty States Heatmap Keyboard Shortcut Logging Media Navigation Onboarding Panel Responsive Search Subheader Trend 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