Icons

Available by default in the SpryUI app

<!-- Bootstrap Icons example -->
<span class="bi bi-bell-fill" aria-hidden="true"></span>
<span class="bi bi-check-circle-fill" aria-hidden="true"></span>
<span class="bi bi-exclamation-triangle-fill" aria-hidden="true"></span>

The SpryUI app loads Bootstrap Icons globally, so bi bi-* class names work in dashboard previews and default message templates without extra setup.

Toast icon behavior

<div class="spry-toast__icon" aria-hidden="true">
  <img class="spry-toast__icon-image" src="{{imageUrl}}" alt="{{imageAlt}}" />
  <span class="spry-toast__icon-fallback bi bi-bell-fill"></span>
</div>

• Default toast fallback icon: bi bi-bell-fill.
• If {{imageUrl}} is present, the image is shown and the fallback icon is hidden.
• {{imageAlt}} controls the image alt text for the custom icon path.

Other icon libraries

SpryUI does not automatically bundle Font Awesome, Lucide, Heroicons, or other class-based icon libraries into the runtime. If you reference those class names in a custom template, the host page must already load that library's CSS or webfont assets.

For per-message icon changes without depending on extra CSS, prefer the toast image slot via {{imageUrl}}.