Как создать смену иконок в input, в зависимости от содержания?

Всем привет. Не могу понять, как сделать так, чтобы менялась иконка внутри поля инпут в зависимости от введенного в нем текста. На примере, в первое поле внесена ссылка с соц.сети твиттер - подтянута иконка твиттер. Во втором поле внесена ссылка инстаграм - нужно, чтобы подтягивалась иконка инстагарм. Дальше по другим сетям с такими же полями input.

Пример:

во втором input необходимо смена иконки на другую (instagram).

Код:

.icon {
      position: absolute;
      border: none;
      margin: 25px 25px 25px 15px;
    }
    .icon:before {
      content: url(../img/icon/twitter1.png);
      width: 100%;
    }

<form>
    <a class="submit icon"></a><input class="user-link" type="text" placeholder="https://">
    <a class="submit icon"></a><input class="user-link" type="text" placeholder="https://">
</form>