неправильная позиция для кнопки-картинки

Решил заморочаться с голосовым вводом, нашёл картинку в интернете, подключил(предварительно скачав), подогнал по размерам с помощью скрипта jQuery:

let btn_h = $('#submit').css('height');
$('#spRec').css({'height': btn_h, 'width': btn_h});
let btn_m = $('#submit').css('margin');
$('#spRec').css('margin', btn_m);

в css выставил идентичные настройки с кнопки:

#submit{
  background-color: #7e2bc2;
  color: white;
  padding: 5px;
  border: 0px;
  border-radius: 10px;
}

#submit:hover{
  background-color: #b25df6;}

#submit:active{
  background-color: #4a0090;
}

#spRec{
  background-color: #7e2bc2;
  color: white;
  padding: 5px;
  border: 0px;
  border-radius: 50%;
  margin: auto;
}
#spRec:hover{
  background-color: #b25df6;
}

#spRec:active{
  background-color: #4a0090;
}

сама форма в хтмл:

  <form method="GET" onsubmit="..."> 
    <input name="input" id="input" type="text" placeholder="Введите ваше сообщение" autocomplete="off" autofocus="1">
    <input id="submit" type="submit" value="Отправить">
    <img id='spRec' src="microphone.png">
  </form>

в результате всех усилий эта кнопка-картинка неровно по центру стоит, ещё и сбила кнопку с полем!
Буду благодарен за помощь!
картинка ниже
||
v