Bootstrap navbar icons not aligned properly

I'm trying to add three icons at the right corner, search, notification bell and user. I do not want to collapse since this is for an Electron desktop application and the navbar needs to be fixed.

<nav class="navbar navbar-dark bg-dark">
          <a class="navbar-brand" href="#">Navbar</a>
          <ul class="navbar-nav">
            <li class="nav-item"><a class="nav-link p-2" href="#">
              <img src="node_modules/bootstrap-icons/icons/search.svg" alt="">
            </a></li>
            <li class="nav-item"><a class="nav-link p-2" href="#">
              <img src="node_modules/bootstrap-icons/icons/bell.svg" alt="">
            </a></li>
            <li class="nav-item"><a class="nav-link p-2" href="#">
              <img src="node_modules/bootstrap-icons/icons/person.svg" alt="">
            </a></li>
          </ul>
        </nav>

In doing so, the icons appear one after another vertically which widens the navbar. How do I correct this? I am relatively new to Bootstrap.