Icon

Icon renders a Bootstrap Icons glyph from the icon font. Load the icon font stylesheet once, then reference any icon by name.

Example

<div className="d-flex align-items-center gap-3">
  <Icon name="rocket-takeoff" />
  <Icon
    name="github"
    size={1.5}
  />
  <Icon
    className="fg-danger"
    name="heart-fill"
    size={2}
  />
</div>

Usage

name is the icon name without the bi- prefix; size sets the font size in rem. Icons are decorative by default, so add an aria-label or visually hidden text when an icon conveys meaning on its own.

<Icon name="trash" aria-label="Delete" role="img" />