Icons
The Icons library: the Fluent UI System Icons catalog and your own SVG icons, search by name or tag, the inspector, creating and editing an icon from SVG markup, what the sanitizer keeps and removes, and where an icon is used.
Icons is the second category under the Assets root: every glyph of the Fluent UI System Icons catalog the product bundles, plus the icons you compose from SVG markup. The panel is headed "Icons", with the line "The complete Fluent UI System Icons catalog plus safe operator-owned SVG icons." and the count pill. Reading it needs View logic; creating, editing and deleting your own icons need Configure logic.
The catalog
Above the cards: Search ("Name or tag"), Origin and Per page. The search matches, without regard to case, the name of any icon and the search tags of a catalog glyph (a glyph is found by a tag that is not part of its name); every keystroke rebuilds the list from its first page and drops a selection the list no longer shows. Cards show the glyph, the name and the origin (System for a catalog glyph, Mine for yours); an empty result says "No icons match these filters." with Clear filters. The catalog is sorted by name; when one of your icons shares a segment with a catalog glyph, both cards are listed and yours wins at the address.
The inspector
| Row | What it shows |
|---|---|
| The glyph | Drawn at 112 px |
| Address | Assets.Icons.<segment> |
| Origin | Fluent UI System Icons, or My library |
| Format | Bundled glyph, or Sanitized SVG |
| Search tags | For a catalog glyph, the words the search matches beyond the name |
A catalog glyph shows "System icons are read-only." Your icon offers Edit and Delete to a configuring role.
New user icon
The verb over the Icons row opens "New user icon" in place of the grid ("Create one addressable icon from inert SVG markup.").
| Field | What it is | Values / default | Effect |
|---|---|---|---|
| Name | The display name; its segment is the address. | Required, empty by default. | The address dashboards and variables hold. Edit renames it later, and every reference to the old address travels with it. |
| SVG markup | The icon's markup, pasted as text. | Required; the placeholder shows <svg viewBox="0 0 24 24">…</svg>. |
Sanitized as you type; the preview on the right shows the sanitized result at 112 px, or "A safe preview appears when the SVG is valid." |
An error line under the fields says what is missing ("A name and SVG markup are required.", "A name is required.") or what the sanitizer refused; Create icon stays greyed until both fields are valid. Cancel or Back leaves without creating. On success the card is revealed (the search and origin filters are cleared when they would hide it) and the feed says "Icon created."
What the sanitizer keeps and refuses
Icon markup is a validated data format, never executable content. The sanitizer keeps inert SVG: svg, g, defs, symbol, use, the shapes (path, rect, circle, ellipse, line, polyline, polygon), text and tspan, title and desc, gradients and stop, pattern, mask, clipPath and marker, with their geometry, paint and text attributes, a style attribute limited to those same properties, and internal references (href="#id", url(#id)). It removes, and reports as a repair, everything else: script and style elements, foreignObject, event attributes, external and data: URLs, unknown attributes, invalid ids and references to ids that do not exist. It refuses outright markup that is empty, not well-formed XML, without an <svg> root, over 512 KB, over 4,096 elements, or carrying a duplicate id. The preview never shows unsanitized markup, and a stored icon is sanitized again every time it is read.
Edit
Edit opens "Edit <name>" ("Renaming saves on Enter or when focus leaves the field and carries the references along; valid SVG changes save automatically."): a Name field that is a rename field, and the markup under it. While you type a name, a line previews the impact ("Renaming updates the 2 locations that read this address.", "No references use the current address.", or "The effective address does not change; no references need updating." when the new name sanitizes to the same segment). Enter, or leaving the field, commits: the icon keeps its id and its markup, every rooted reference to the old address is rewritten, and the feed says "Icon renamed and N references updated." A name already taken is refused in place under the field. A valid markup change is saved half a second after you stop typing ("Icon saved."); an invalid draft is not saved and says why. Back returns to the catalog, keeping the last valid markup.
Delete
Delete asks "Delete 'X'? References to its address will become unresolved. This cannot be undone." A variable returning that address then resolves to nothing, which Validation lists. The feed says "Icon deleted."
Where an icon is used
An Icon-output variable returns Assets.Icons.<name> and the bound Icon dashboard component draws it: a catalog glyph as the font glyph, your icon as its markup.
What the library does not do
It does not import an SVG file (paste the markup), does not tag your icons, does not color them (the component that draws an icon decides its color), does not edit or hide a catalog glyph, and does not export.