This page features interactive demos and side-by-side code samples that need at least 340 pixels of horizontal space. Please widen your browser window, or rotate your device, to continue.
Component <neo-icon> is an inline SVG icon: the host pulls the configured icon set's SVG body in so stroke="currentColor" resolves against the parent's CSS color. Size from --neo-icon-size or width / height on the host. A neo-theme-change event re-fetches the glyph so a themed user sees the theme's own SVG, not the one the server inlined.
Default
Gallery
Sizes
Inherits text colour
In buttons
Inline in prose
DeactivateRenameDuplicateDelete
The preview routes through the in-browser server simulator. Its current Settings (network latency, a non-200 response, or an unreachable server) are in effect, so the live preview can look like it is misbehaving. Adjust them in the Settings panel.
New state Toggle autoplay
HTMLCSS
The selected state's markup and its scoped CSS. The CSS is wrapped in <style>@scope { ... }</style> and applies to the preview only. Edits change the preview above, applied live while Sync is on, or when you click Patch or Replace. Patch morphs the preview; Replace swaps it outright.
Signals
Datastar signals declared in the selected state's markup. Change a value to drive the preview, applied live while Sync is on, or when you click Patch.
A sample of the bundled Lucide set. The full set lives under /static/icons/ as one SVG per name; drop new files in and the host picks them up without a rebuild.
Lucide glyphs use stroke="currentColor", so the icon inherits the parent's CSS color. Wrap the host in any coloured ancestor to retint it without writing variant-specific CSS.
Drop a <neo-icon> as the first child of <neo-button>. The button's flex layout supplies the gap, and the icon inherits the button's font colour so it retints with the variant.
The host is display: inline-flex with a 1em default size, so it sits on the text baseline and tracks the surrounding font size without nudging the line box.
Tap the icon to open preferences, or pick to save this article later. Press to dismiss the dialog.