<!-- Generated by tools/docs.php from docs/src/icons.html - edit the source, not this file. -->

# Icons

Bootstrap Icons 1.13.2 under their own class names - `<i class="bi bi-pencil">` - each a CSS mask over its own SVG file: the color of the text around it, no font, no script, no build.

## Examples

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

```html
<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](https://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.
