How to put custom icons beside input text fields?

I'm looking to create the desired styling in the photo shown. Having trouble getting the custom SVGs I created to be inline with the text field. How would I go about creating this effect?

Here's a snippet of the code I'm using at the minute, where am I going wrong?

I'm mostly using the JQM library if that is of any help.

<div class="box2" style="display: inline-block; position:relative; width: 40vw;">
   <img src="img/icon/regicons/usernumber.svg">
   <input type="text" name="userNo" id="userNo" placeholder="Number" required><br>
</div>

Solution

Ensure that the <input/> has the same height as your <image/> and position it at top of it's parent element.

height: 32px; box-sizing: border-box;
absolute; top: 0;

Snippet:

input {
  height: 32px; 
  box-sizing: border-box; 
  position: absolute; 
  top: 0;
}
.box2 {
  display: inline-block;
  position:relative;
  width: 40vw;
}

    <div class="box2" style="">
        
        <img width="32" height="32" src="https://lh4.googleusercontent.com/-HhNoCFJ803s/AAAAAAAAAAI/AAAAAAAAAAA/ABtNlbAXJpr-jDsvmXVw0tx4PHId84zrlw/mo/photo.jpg?sz=32">
        <input type="text" name="userNo" id="userNo" placeholder="Number" required>
      
     </div>