<div class="container py-5">

      <p>Click the <button class="btn btn-danger btn-sm">DOCS</button> button in the upper left corner in order to learn

        more - basic example below.</p>

      <hr>

      <p><strong>Bootstrap SVG icons</strong> is a library of <strong>1,200</strong> icons for Bootstrap.</p>

      <p><strong><a href="https://mdbootstrap.com/docs/standard/">MDB Free UI Kit</a></strong> already includes

        <strong>1,800+</strong> icons for Bootstrap.</p>

      <p>We recommend you to use the Material icons due to:</p>

      <ul>

        <li>better accessibility</li>

        <li>more customization options</li>

        <li>better recognition</li>

      </ul>

      <hr>

​

      <div class="row text-center">

        <div class="col-md-6">

          <h5 class="mb-3"><strong>MDBootstrap icons</strong></h5>

          <p class="mt-5">Bell</p>

          <p>

            <i class="fas fa-bell fa-3x"></i>

            <i class="far fa-bell fa-3x"></i>

            <i class="fas fa-bell-slash fa-3x"></i>

            <i class="far fa-bell-slash fa-3x"></i>

          </p>

​

        </div>

        <div class="col-md-6 text-center">

          <h5 class="mb-3"><strong>Bootstrap icons</strong></h5>

          <p class="mb-0 mt-5">Bell</p>

          <p>

            <i class="bi bi-bell-fill" style="font-size: 3rem"></i>

            <i class="bi bi-bell" style="font-size: 3rem"></i>

          </p>

        </div>

​

      </div>

      <div class="row text-center">

        <div class="col-md-6">

          <p class="mt-5">Trash</p>

          <p>

            <i class="fas fa-trash-alt fa-3x"></i>

            <i class="far fa-trash-alt fa-3x"></i>

            <i class="fas fa-trash fa-3x"></i>

          </p>

          <p>

            <i class="fas fa-trash-restore-alt fa-3x"></i>

            <i class="fas fa-trash-restore fa-3x"></i>

          </p>

        </div>

        <div class="col-md-6">

          <p class="mb-0 mt-5">Trash</p>

          <p>

            <i class="bi bi-trash-fill" style="font-size: 3rem"></i>

            <i class="bi bi-trash" style="font-size: 3rem"></i>

          </p>

        </div>

      </div>

      <div class="row text-center">

​

        <div class="col-md-6">

          <p class="mt-5">Spinner icons</p>

          <p>

            <i class="fas fa-spinner fa-spin fa-3x"></i>

            <i class="fas fa-cog fa-spin fa-3x"></i>

            <i class="fas fa-circle-notch fa-spin fa-3x"></i>

            <br>

            <br>

            <i class="fas fa-sync fa-spin fa-3x"></i>

            <i class="fas fa-snowflake fa-spin fa-3x"></i>

            <i class="fas fa-crosshairs fa-spin fa-3x"></i>

            <i class="fas fa-life-ring fa-spin fa-3x"></i>

          </p>

        </div>

        <div class="col-md-6">

          <p class="mb-0 mt-5">Spinner icons</p>

          <p>-</p>

        </div>

      </div>

​

      <div class="row text-center mt-2">

        <div class="col-md-6">

          <a href="https://mdbootstrap.com/docs/standard/tools/builders/icons/" class="btn btn-primary btn-block">

            Free icon builder

          </a>

          <a href="https://mdbootstrap.com/docs/standard/content-styles/icons/" class="btn btn-danger btn-block">

            More MDBootstrap icons

          </a>

        </div>

        <div class="col-md-6">

          <a href="https://mdbootstrap.com/docs/standard/tools/builders/icons/"

            class="btn btn-primary btn-block disabled">

            No builder

          </a>

          <a href="https://icons.getbootstrap.com/" class="btn btn-danger btn-block">

            More Bootstrap icons

          </a>

        </div>

      </div>

​

​

​

​

​

​

​

​

​

​

    </div>

​

​