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.

Banner icon behavior

<div class="spry-banner">
  <span class="bi bi-megaphone-fill" aria-hidden="true"></span>
  <span>{{body}}</span>
</div>

• Add icons directly to custom banner templates with Bootstrap Icon classes.
• Keep icons decorative with aria-hidden="true" when the message text already communicates the meaning.
• Use the banner body token for the editable message content.

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, use Bootstrap Icons or include inline SVG in a custom banner template.