Bootstrap v5.3 buttons use the .btn base class plus a variant such as .btn-primary; add an icon with Bootstrap Icons SVG or its icon font, and give every control an accessible name. The examples below target Bootstrap v5.3 and keep its classes separate from older Bootstrap 3 patterns.
Choose a Bootstrap v5.3 button style
The .btn class supplies basic button styling, including padding and content alignment. Add a variant to communicate the control’s role, and keep a clear text label so users do not have to infer meaning from color alone. Bootstrap’s v5.3 button documentation lists these variants:
As an Amazon Associate I earn from qualifying purchases.
.btn-primary,.btn-secondary.btn-success,.btn-danger.btn-warning,.btn-info.btn-light,.btn-dark.btn-link
For a lighter visual treatment without a filled background, use the matching outline class, such as .btn-outline-primary. Add .btn-lg or .btn-sm when a larger or smaller button is appropriate. Check contrast, especially when a style uses a light foreground color, and do not use color as the only signal of purpose or state.
Use the element that matches the action
Bootstrap button classes can style <button>, <a>, and <input> elements. Use a button for an action, such as submitting a form; use an anchor for navigation. If an anchor triggers an in-page action instead of navigating, Bootstrap recommends role="button" so assistive technology receives its purpose.
#1 Best Overall
<button type="button" class="btn btn-primary">Save changes</button>
<a class="btn btn-outline-secondary" href="/settings">Settings</a>
<a class="btn btn-primary" href="#dialog" role="button">Open dialog</a>For an anchor that should look disabled, the .disabled class alone does not reliably remove its link behavior. Apply the additional handling described in the Bootstrap v5.3 documentation, or use a genuinely disabled button where that fits the interaction.
Add a Bootstrap Icon to a button
The official Bootstrap Icons documentation describes four ways to use icons: inline SVG markup, an SVG sprite, an external SVG image, or the icon font and its CSS classes. Choose based on how your project delivers assets and whether you need to style an individual SVG directly. The documentation recommends sizing SVG icons around 1em so they scale with text.
Inline SVG: convenient for a single button
Inline SVG keeps the icon markup beside the button, where its size and color can follow the surrounding text. For an icon that simply decorates a visible label, hide it from assistive technology:
<button type="button" class="btn btn-success">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
<path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0"/>
</svg>
Save changes
</button>This example uses a check mark as a decorative cue; the words “Save changes” provide the action name. Replace the SVG path with the icon you need while retaining an appropriate accessible name for the control.
SVG sprite: reuse symbols in the page
A sprite lets a page reference an SVG symbol by its identifier. Put the symbol definition in an SVG sprite available to the document, then reference that symbol inside the button. As with other decorative icons next to visible text, mark the SVG as hidden from assistive technology.
<button type="button" class="btn btn-primary">
<svg width="1em" height="1em" aria-hidden="true">
<use href="#icon-download"></use>
</svg>
Download
</button>The identifier #icon-download must match a symbol defined in the sprite. Sprite setup and external-file reference behavior depend on how the project serves its assets.
Rank #4
External SVG image: reference a separate file
An external image keeps the icon asset separate from the button’s HTML. For a decorative icon, use an empty alternative text value so it does not compete with the visible label:
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallOutdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware match<button type="button" class="btn btn-secondary">
<img src="/icons/gear.svg" width="1em" height="1em" alt="">
Preferences
</button>Icon font: use a CSS class
If your project loads the Bootstrap Icons font, add the relevant icon class to an element inside the button. Follow the current installation instructions and class names on the official icon site rather than copying an unversioned CDN URL; its documentation gives a jsDelivr example for Bootstrap Icons 1.13.1, but CDN versions can change.
<button type="button" class="btn btn-dark">
<i class="bi bi-search" aria-hidden="true"></i>
Search
</button>These methods do not have a documented performance winner: select one that fits your asset pipeline and styling needs rather than assuming one is faster.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Make icon-only buttons accessible
When there is no visible text, the icon’s shape alone is not a dependable control name. Put a concise accessible label on the button that says what the control does; keep the icon itself hidden from assistive technology when it is only a visual symbol.
<button type="button" class="btn btn-outline-secondary" aria-label="Search">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
<circle cx="6.5" cy="6.5" r="4.5" fill="none" stroke="currentColor"/>
<path d="m10 10 4 4" fill="none" stroke="currentColor"/>
</svg>
</button>Choose a label that describes the action in context: for example, “Close dialog” is more informative than “X” when the control closes a dialog. If an icon conveys meaning outside a control—for example, in a legend—provide a suitable text alternative rather than hiding it.
Recommended Free Tools
Keep Bootstrap versions distinct
The code examples here target Bootstrap v5.3. Bootstrap 3.3 documentation describes Glyphicons and older conventions; do not treat those as the default for a v5.3 project. If maintaining an older site, follow the documentation for the version it actually loads, including the relevant icon and accessibility guidance, rather than mixing class names or assets across versions.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
