Standard SVG usage
Reference the local sprite with a stable FG UI icon ID.
<svg class="fgui-icon" aria-hidden="true" focusable="false">
<use href="assets/icons/fgui-icons.svg?v=1.2.0#fgui-icon-search"></use>
</svg>FG UI 1.1.0 exposes 800 local SVG icon IDs. 773 use selected Phosphor Icons Thin artwork and 27 use exact project-supplied brand/service SVG artwork for their corresponding identifiers.
This page is built entirely with FG UI using the same components, layout primitives, icons and interactions available in the kit. No Bootstrap, Tailwind or external UI framework is required.
Reference the local sprite with a stable FG UI icon ID.
<svg class="fgui-icon" aria-hidden="true" focusable="false">
<use href="assets/icons/fgui-icons.svg?v=1.2.0#fgui-icon-search"></use>
</svg>Create an SVG element from the same local sprite.
const icon = FGUI.icon('search');Use aria-hidden="true" and focusable="false".
The button needs an accessible name such as aria-label="Search". The icon itself can remain decorative.
The complete web reference renders every icon from the real stable sprite.