List with icons

Bootstrap 5 List with icons component

Responsive List with icons built with Bootstrap 5. Examples of basic and advanced lists with icons. Easy to implement and customize.

Basic example

Add icons to li to get an icon in the list.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
Edit in sandbox 
        
            
                <ul class="list-group w-50">
                    <li class="list-group-item active"><i class="fas fa-laptop fa-fw me-4"></i>Cras justo odio</li>
                    <li class="list-group-item"><i class="fas fa-bomb fa-fw me-4"></i>Dapibus ac facilisis in</li>
                    <li class="list-group-item"><i class="fas fa-code fa-fw me-4"></i>Morbi leo risus</li>
                    <li class="list-group-item"><i class="far fa-gem fa-fw me-4"></i>Porta ac consectetur ac</li>
                    <li class="list-group-item"><i class="fas fa-cogs fa-fw me-4"></i>Vestibulum at eros</li>
                </ul>

Icons with colored background

You can assign a .bg-* class to the icon and increase the padding but with more icons, you will notice that they are of different sizes.

If you want each background to be of the same size, you must put each icon in a separate span with a specific size and color. Now all you have to do is center the icon by using the .d-inline-flex .align-items-center .justify-content-center classes.

    Photos
    Work
    Vacation
Edit in sandbox 
        
            
                <ul class="list-group w-50 mx-auto">
                    <div class="list-group-item">
                      <span class="d-inline-flex align-items-center justify-content-center text-white rounded m-1 me-2" style="background-color: #0082ca; width: 40px; height: 40px;">
                        <i class="fas fa-camera fa-lg"></i>
                      </span>
                      Photos
                    </div>
                    <div class="list-group-item">
                      <div class="d-inline-flex align-items-center justify-content-center text-white rounded m-1 me-2" style="background-color: #ff4500; width: 40px; height: 40px;">
                        <i class="fas fa-hashtag fa-lg"></i>
                      </div>
                      Work
                    </div>
                    <div class="list-group-item">
                      <div class="d-inline-flex align-items-center justify-content-center text-white rounded m-1 me-2" style="background-color: #00b386; width: 40px; height: 40px;">
                        <i class="fas fa-hiking fa-lg"></i>
                      </div>
                      Vacation
                    </div>
                  </ul>

Icons with a circular background

Add a .rounded-circle class in the span to make the circular background.

    Photos
    Work
    Vacation
Edit in sandbox 
        
            
                <ul class="list-group w-50 mx-auto">
                    <div class="list-group-item">
                      <span class="d-inline-flex align-items-center justify-content-center text-white rounded-circle m-1 me-2" style="background-color: #0082ca; width: 40px; height: 40px;">
                        <i class="fas fa-camera fa-lg"></i>
                      </span>
                      Photos
                    </div>
                    <div class="list-group-item">
                      <div class="d-inline-flex align-items-center justify-content-center text-white rounded-circle m-1 me-2" style="background-color: #ff4500; width: 40px; height: 40px;">
                        <i class="fas fa-hashtag fa-lg"></i>
                      </div>
                      Work
                    </div>
                    <div class="list-group-item">
                      <div class="d-inline-flex align-items-center justify-content-center text-white rounded-circle m-1 me-2" style="background-color: #00b386; width: 40px; height: 40px;">
                        <i class="fas fa-hiking fa-lg"></i>
                      </div>
                      Vacation
                    </div>
                  </ul>

Button icons

Put icons to the buttons to get a button icons.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
Edit in sandbox 
        
            
                <ul class="list-group w-50">
                    <li class="list-group-item align-items-center d-flex">
                        <a data-mdb-ripple-init class="btn text-white btn-floating m-1 me-3" 
                        style="background-color: hsl(330, 70%, 50%);" href="#!" role="button">
                            <i class="fab fa-instagram fa-2x"></i>
                        </a>
                        Cras justo odio
                    </li>
                    <li class="list-group-item align-items-center d-flex">
                        <a data-mdb-ripple-init class="btn text-white btn-floating m-1 me-3" 
                        style="background-color: hsl(220, 44%, 41%);" href="#!" role="button">
                            <i class="fab fa-facebook-f fa-2x"></i>
                        </a>
                        Dapibus ac facilisis in
                    </li>
                    <li class="list-group-item align-items-center d-flex">
                        <a data-mdb-ripple-init class="btn text-white btn-floating m-1 me-3" 
                        style="background-color: hsl(205, 81%, 63%);" href="#!" role="button">
                            <i class="fab fa-twitter fa-2x"></i>
                        </a>
                        Morbi leo risus
                    </li>
                    <li class="list-group-item align-items-center d-flex">
                        <a data-mdb-ripple-init class="btn text-white btn-floating m-1 me-3" 
                        style="background-color: hsl(14, 98%, 50%);" href="#!" role="button">
                            <i class="fab fa-reddit-alien fa-2x"></i>
                        </a>
                        Porta ac consectetur ac
                    </li>
                    <li class="list-group-item align-items-center d-flex">
                        <a data-mdb-ripple-init class="btn text-white btn-floating m-1 me-3" 
                        style="background-color: hsl(125, 80%, 40%);" href="#!" role="button">
                            <i class="fab fa-whatsapp fa-2x"></i>
                        </a>
                        Vestibulum at eros
                    </li>
                </ul>