Icons

AUI bundles 43 icons. Use one by file name, without the extension:

<icon name="sliders-horizontal" size="22" class="accent"/>
<button onclick="Close" icon="x" class="ghost"/>
<tab page="audio" key="settings.audio" icon="headset"/>

An unknown name is error AUI119, with a "did you mean" suggestion.

Icons are tinted by the icon-color style property, which inherits, so setting it on a panel tints every icon inside it.

.accent { color: var(--accent); icon-color: var(--accent); }

The bundled set

42 of these are Lucide icons; each name below links to its Lucide page.

arrow-up-down	bookmark	bookmark-filled	check
chevron-down	chevron-left	chevron-right	chevron-up
chevrons-left	chevrons-right	circle-question-mark	discord
download	external-link	eye	folder-open
globe	hard-drive	headset	heart
heart-filled	house	info	layout-grid
library-big	lock	monitor	pencil
plus	refresh-cw	search	shirt
sliders-horizontal	smartphone	sparkles	tag
trash-2	triangle-alert	user	users
wand-sparkles	x	zap

Three are not stock Lucide:

• bookmark-filled and heart-filled are filled variants, hand-modified from the Lucide originals. Useful as the "on" state of a toggle beside the hollow version.
• discord is a Simple Icons glyph: a solid filled path rather than a stroke, so stroke-width does not apply to it.

Adding your own

Put white-stroke SVGs in a folder and list it in AuiSettings.iconFolders. Those folders are searched before the package's own, so an icon of the same name overrides a bundled one.

Match Lucide's conventions and yours will sit correctly beside the bundled set:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
     stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="..."/>
</svg>

The stroke must be white, because the colour comes from icon-color at runtime. Anything pre-coloured cannot be tinted.

Run AUI/Reimport Icons after adding files; the importer forces them to Textured Sprite.

Swapping an icon at runtime

SetIcon(GetElement("#fav"), "heart-filled");

The icon must be baked into the view: either used in its markup, or preloaded on the root.

<view name="Card" icons="heart heart-filled check">

Otherwise the sprite reference was never included and nothing happens.

Next

• Elements for the <icon> attributes.
• Style properties for icon-color.
• Sprites for the 9-slice backgrounds.