Icons

Examples

An icon takes the size of the text and its color: a utility or the parent sets both.

<i class="bi bi-pencil" aria-hidden="true"></i>
<i class="bi bi-trash3 text-danger" aria-hidden="true"></i>
<i class="bi bi-check-circle-fill text-success fs-20" aria-hidden="true"></i>
<i class="bi bi-stars text-primary fs-24" aria-hidden="true"></i>
<i class="bi bi-chevron-right flip-rtl" aria-hidden="true"></i>
<i class="bi bi-arrow-left flip-rtl" aria-hidden="true"></i>

The names are Bootstrap Icons' own - look one up at icons.getbootstrap.com. A name the set does not have paints a filled square, and the checks flag it.

From another host

A browser fetches a mask in CORS mode, as it does a font. Served from another origin, every icon stays blank unless that host sends Access-Control-Allow-Origin on .svg. jsDelivr and GitHub Pages do; on your own CDN, add svg to the types that get the header. A file already fetched without it stays broken in the browser's cache for its whole lifetime when it is immutable, so a change of header alone does not reach those visitors: give the files a new address too.

Accessibility

• An icon beside words is aria-hidden="true". An icon alone takes its meaning from its parent: the button's aria-label, or hidden words.
• Icons that point - chevrons, arrows, back and next - mirror right to left with flip-rtl; a check, a clock, a search glass, media controls do not.
• Icons keep the forced color of their parent and print in their color.