How to create icons inside the input without a background image or a third party library.

iconsInInputForm.html

<style>
  .input-container {
    position:relative;
    display: flex;
}
.input-container img {
    position: absolute;
    margin-left: 16px;
    margin-top: 13px;
}
.formInput {
    padding-top: 14px;
}
input {
    padding: 12px 40px;
    border-radius: 50px;
    border: 1px solid rgb(228, 226, 226);
    width: 35%;
    overflow-y: visible;
    font-size: 14px;
}
input:focus {
    -webkit-box-shadow: 3px 3px 5px 3px #ccc;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
    -moz-box-shadow:    3px 3px 5px 3px #ccc;  /* Firefox 3.5 - 3.6 */
    box-shadow:         3px 3px 5px 3px #ccc;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
    outline: none
}
</style>
<form class="formInput">
    <div class="input-container">
        <img src="./images/search.svg" alt="search google">
        <input class="input-field" type="text" placeholder="Username" name="usrnm">
     </div>
</form>