Icons

Render Bootstrap Icons by name and compose them with buttons, labels, and alerts.

Bootstrap Icons

BCL's bs-icon helper renders packaged Bootstrap Icons by name so pages can compose icons with Bootstrap components and utilities.

Inline icons

Icons render as inline SVG content by name. Compose them with color, margin, and text utilities the same way Bootstrap recommends for external SVG icon sets.

aspnet 

<bs-div display="Flex" gap="Default3" align-items="Center" flex-wrap="Wrap">
    <bs-icon icon="Clipboard" />
    <bs-icon icon="Cash" text-color="Success" />
    <bs-button btn-style="Primary"><bs-icon icon="CreditCard" end-margin="Default1" />Pay</bs-button>
</bs-div>

Sizing and color

aspnet 

<bs-div display="Flex" gap="Default3" align-items="Center" flex-wrap="Wrap">
    <bs-icon icon="InfoCircle" font-size="One" text-color="Primary" />
    <bs-icon icon="CheckCircle" font-size="Two" text-color="Success" />
    <bs-icon icon="ExclamationTriangle" font-size="Three" text-color="Warning" />
    <bs-icon icon="XCircle" font-size="Four" text-color="Danger" />
</bs-div>

Icon buttons

Give icon-only controls an accessible name on the button. Decorative icons can remain unnamed when nearby text already describes the action.

aspnet 

<bs-div display="Flex" gap="Default2" align-items="Center" flex-wrap="Wrap">
    <bs-button btn-style="Secondary" outline="true" aria-label="Copy">
        <bs-icon icon="Clipboard" />
    </bs-button>
    <bs-button btn-style="Success">
        <bs-icon icon="Check2" end-margin="Default1" />Save
    </bs-button>
</bs-div>

Alternatives

You can still use external SVGs, icon fonts, or plain inline SVG when the project needs an icon outside the packaged Bootstrap Icons set.

More options

Keep icon-only controls accessible by labeling the containing button or link. Decorative icons should be hidden from assistive technology when adjacent text already provides the label.