How to remove crutches from bootstrap search form?

Question

css

I need to push a search icon into a bootstrap form. The code below works, but are there options for adequate code for this form?

<form class="d-flex">
                         <svg xmlns="http://www.w3.org/2000/svg" style="margin-top:25px;margin-left:15px;" class="position-absolute" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
        <input class="form-control my-3 rounded-pill ps-5" type="search" placeholder="Поиск" aria-label="Search">
      
      </form>

Answer 1

the icon can be put
a) through the img tag
b) as a background on the parent or pseudo-element,
but you can leave it as it is now. IMHO, this is a perfectly acceptable option.

Answer 2

https://getbootstrap.com/docs/5.1/forms/input-group/