Como fazer alerts customizados com ícones no bootstrap 5

Veja uma das maneiras de customizar #alerts com ícones no #bootstrap 5

Para isso importamos o pacote de ícones e criamos uma div padrão para #alert do boostrap.

Código com links de improtação do CDN.

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">

  <div class="container">
    <div class="row">

      <div class="col-12 mt-3">
        <div class="d-flex align-items-center alert alert-danger shadow rounded p-2 h-100">

          <div class="px-3"><i class="bi bi-bar-chart-steps fs-3 text-success"></i></div>
          <div class="flex-grow-1 px-3">
            <span class="fs-2 d-block border-bottom mb-2 pb-0"><i class="bi bi-exclamation-triangle-fill text-warning fs-3"></i> Eripuit mnesarchum repudiandae sea</span>
            Lorem ipsum dolor sit amet, pri te homero verear scaevola, justo vulputate maiestatis pri an. Est aperiam lobortis reprehendunt te, quo te erant utamur, singulis pertinax dignissim nam at. No eam alii eius soleat, pri at quot autem
            officiis. Sea movet convenire imperdiet et, graeci facilis ad pri. Lorem deleniti insolens ea vix, te usu ancillae adolescens, no eripuit mnesarchum repudiandae sea.
          </div>
          <div class="px-3">
            <i class="bi bi-pencil-square"></i>
            <i class="bi bi-trash"></i>
            <i class="bi bi-check-all"></i>
          </div>
        </div>
      </div>

      <div class="col-12 mt-3">
        <div class="d-flex align-items-center alert alert-success shadow rounded p-2 h-100">
          <div class="p-2 bg-white m-0 rounded text-center shadow-sm">
            <i class="bi bi-pencil-square"></i>
            <i class="bi bi-check-circle"></i>
            <i class="bi bi-x-circle-fill"></i>
            <i class="bi bi-eye-slash"></i>
          </div>
          <div class="flex-grow-1 px-3">
            <span class="fs-2 d-block border-bottom mb-2 pb-0"> Eripuit mnesarchum repudiandae sea</span>
            Lorem ipsum dolor sit amet, pri te homero verear scaevola, justo vulputate maiestatis pri an. Est aperiam lobortis reprehendunt te, quo te erant utamur, singulis pertinax dignissim nam at. No eam alii eius soleat, pri at quot autem
            officiis. Sea movet convenire imperdiet et, graeci facilis ad pri. Lorem deleniti insolens ea vix, te usu ancillae adolescens, no eripuit mnesarchum repudiandae sea.
          </div>

        </div>
      </div>

      <div class="col-12 mt-3">
        <div class="d-flex align-items-center bg-dark text-white shadow rounded p-2 h-100">
          <div class="p-2 text-center shadow-sm">
            <i class="bi bi-pencil-square"></i>
            <i class="bi bi-check-circle"></i>
            <i class="bi bi-x-circle-fill"></i>
            <i class="bi bi-eye-slash"></i>
          </div>
          <div class="flex-grow-1 px-3">
            <span class="fs-2 d-block border-bottom mb-2 pb-0">Eripuit mnesarchum repudiandae sea</span>
            Lorem ipsum dolor sit amet, pri te homero verear scaevola, justo vulputate maiestatis pri an. Est aperiam lobortis reprehendunt te, quo te erant utamur, singulis pertinax dignissim nam at. No eam alii eius soleat, pri at quot autem
            officiis. Sea movet convenire imperdiet et, graeci facilis ad pri. Lorem deleniti insolens ea vix, te usu ancillae adolescens, no eripuit mnesarchum repudiandae sea.
          </div>
        </div>
      </div>

      <div class="col-12 my-3">
        <div class="d-flex align-items-center alert alert-info shadow rounded p-2 h-100">
          <div class="p-2 text-center bg-white rounded text-primary">
            <i class="bi bi-pencil-square"></i>
            <i class="bi bi-check-circle"></i>
            <i class="bi bi-x-circle-fill"></i>
            <i class="bi bi-eye-slash"></i>
          </div>
          <div class="flex-grow-1 px-3">
            <span class="fs-2 d-block border-bottom mb-2 pb-0">Eripuit mnesarchum repudiandae sea</span>
            Lorem ipsum dolor sit amet, pri te homero verear scaevola, justo vulputate maiestatis pri an. Est aperiam lobortis reprehendunt te, quo te erant utamur, singulis pertinax dignissim nam at. No eam alii eius soleat, pri at quot autem
            officiis. Sea movet convenire imperdiet et, graeci facilis ad pri. Lorem deleniti insolens ea vix, te usu ancillae adolescens, no eripuit mnesarchum repudiandae sea.
          </div>
        </div>
      </div>
    </div>
  </div>