Icon

SVG icons from Bootstrap Icons, Modus Icons, Font Awesome, Material Symbols or your own icon set, loaded one at a time and sized and colored like text.

Example

Set name to the name of a Bootstrap Icons icon. Each icon’s SVG is fetched once, cached and inlined, so no icon set ships in your bundle. Icons are decorative and hidden from screen readers; give an icon that carries meaning on its own a label, which makes it a role="img" with that name.

HTML

<div class="hstack gap-4 fs-xl">
  <bs-icon name="house" />
  <bs-icon name="heart-fill" />
  <bs-icon name="gear" />
  <bs-icon name="bell" label="Notifications" />
  <bs-icon name="exclamation-triangle" label="Warning" />
</div>

Size and color

Icons are 1em square and use the current text color, so font size and color utilities such as .fs-3xl and .fg-success style them.

HTML

<div class="hstack gap-4 align-items-center">
  <bs-icon name="star-fill" class="fs-sm" />
  <bs-icon name="star-fill" />
  <bs-icon name="star-fill" class="fs-xl" />
  <bs-icon name="star-fill" class="fs-3xl" />
  <bs-icon name="star-fill" class="fs-5xl fg-warning" />
  <bs-icon name="check-circle-fill" class="fs-3xl fg-success" />
  <bs-icon name="x-circle-fill" class="fs-3xl fg-danger" />
</div>

Icon libraries

Set library to modus, font-awesome or material for the other built-in sets, and variant for a style within one: Modus Icons has solid and outlined, Font Awesome Free has solid, regular and brands, and Material Symbols has outlined, rounded and sharp, with filled icons named …-fill. Use each set’s own icon names, such as cloud_upload in Material Symbols.

Bootstrap Icons
Modus Icons
Font Awesome
Material Symbols

HTML

<dl class="mb-0">
  <dt>Bootstrap Icons</dt>
  <dd class="hstack gap-4 fs-2xl">
    <bs-icon name="heart" />
    <bs-icon name="heart-fill" />
    <bs-icon name="cloud-arrow-up" />
    <bs-icon name="github" />
  </dd>
  <dt>Modus Icons</dt>
  <dd class="hstack gap-4 fs-2xl">
    <bs-icon library="modus" name="heart" />
    <bs-icon library="modus" variant="outlined" name="heart" />
    <bs-icon library="modus" name="cloud-upload" />
    <bs-icon library="modus" name="settings" />
  </dd>
  <dt>Font Awesome</dt>
  <dd class="hstack gap-4 fs-2xl">
    <bs-icon library="font-awesome" name="heart" />
    <bs-icon library="font-awesome" variant="regular" name="heart" />
    <bs-icon library="font-awesome" name="cloud-arrow-up" />
    <bs-icon library="font-awesome" variant="brands" name="github" />
  </dd>
  <dt>Material Symbols</dt>
  <dd class="hstack gap-4 fs-2xl mb-0">
    <bs-icon library="material" name="favorite" />
    <bs-icon library="material" name="favorite-fill" />
    <bs-icon library="material" variant="rounded" name="cloud_upload" />
    <bs-icon library="material" variant="sharp" name="settings" />
  </dd>
</dl>

In buttons

Buttons space an icon from their text. A button with only an icon needs an aria-label.

HTML

<div class="hstack gap-2 flex-wrap">
  <button type="button" bsButton theme="primary">
    <bs-icon name="download" />
    Download
  </button>
  <button type="button" bsButton="outline" theme="secondary">
    Next
    <bs-icon name="arrow-right" />
  </button>
  <button type="button" bsButton="subtle" theme="danger" aria-label="Delete">
    <bs-icon name="trash" />
  </button>
</div>

Custom libraries and files

Register any icon set with a resolver that turns a name and variant into an SVG URL, either with BsIconRegistry.register() or with provideBsIcons() in your app config (see Services and helpers), and set src to show a single SVG file.

<div class="hstack gap-4 fs-2xl">
  <bs-icon library="lucide" name="heart" />
  <bs-icon library="lucide" name="rocket" />
  <bs-icon library="lucide" name="sparkles" label="New" />
  <bs-icon src="avatar.svg" label="Jane Doe" class="fs-4xl" />
</div>

API

BsIcon

Selector: bs-icon · Exported as: bsIcon

Inputs

Name	Type	Default	Description
`name`	`string \| null`	`null`	Name of the icon in its library.
`library`	`string \| null`	`null`	Icon library. Defaults to the registry's default library, 'bootstrap'.
`variant`	`string \| null`	`null`	Style of the icon within its library, such as 'regular' in Font Awesome.
`src`	`string \| null`	`null`	URL of an SVG file to show instead of a named icon.
`label`	`string \| null`	`null`	Accessible name. Without it the icon is hidden from screen readers.

Outputs

Name	Type	Description
`loaded`	`void`	Emits when the icon has loaded.
`loadError`	`unknown`	Emits the error when the icon fails to load or its library is unknown.