Skip to main content
Batoi UIF Docs

Icons

Use the Batoi UIF SVG icon registry for clear actions, status, and compact controls.

Version 3.0.0 Version 3 active maintenance Reviewed Aug 11, 2026 Next review Nov 11, 2026
Start Reading Open GitHub Report documentation issue

Owner: Batoi Engineering Reviewed by: Batoi UIF Maintainers Source revision: b2f3478

Start FastLoad UIF in server-rendered pages and initialize declarative behavior. Chart SupportReview native SVG chart types, Flint mappings, and deferred advanced charts. Micro AppsBuild contained app surfaces that live inside larger Batoi routes. AI and MCPDesign approval UI while privileged tool execution stays server-side.
Browse Batoi UIF Documentation Icons
On this page

Icons

Batoi UIF uses SVG-first icons for actions, status, and compact interface cues.

Version 2.2.0 adds first-party facebook, github, instagram, linkedin, x-twitter, and youtube marks. The gallery shows copyable declarative markup, JavaScript, CSS, and raw SVG usage for each icon.

Icons should improve recognition, not replace clear labels where the action may be ambiguous.

Usage

Declarative markup is the preferred starting point:

<button class="uif-btn" type="button">
  <span data-uif-icon="save" aria-hidden="true"></span>
  Save draft
</button>

Load the module and mount icon hosts after the markup exists:

import { mountIcons } from '/assets/batoi-uif-main/dist/uif.esm.js';

mountIcons(document);

For markup inserted later, mount only the new subtree:

const widget = document.querySelector('[data-press-widget="notice"]');
widget.insertAdjacentHTML('beforeend', '<span data-uif-icon="info" aria-hidden="true"></span>');
mountIcons(widget);

Style the stable host contract instead of the internal SVG paths:

.press-action [data-uif-icon] .uif-icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  color: currentColor;
}

Use aria-hidden="true" when adjacent visible text already names the action. For an icon-only control, give the control an aria-label and a visible tooltip. Do not add a duplicate title that causes the same label to be announced twice.

Guidance

  • Use icon plus text for main commands.
  • Use icon-only controls only when the symbol is familiar and a tooltip is available.
  • Keep icon size consistent within a toolbar.
  • Avoid decorative icons that do not help the task.
  • Use semantic icon color utilities for status; do not rely on color alone to communicate meaning.

Reference

The regularly updated Icon Gallery from the Batoi UIF library is available at https://www.batoi.com/assets/batoi-uif-main/examples/icon-gallery/.