Дополнительное пространство, добавленное к изображению после импорта React

Question

Как вы можете видеть на скриншоте, вверху и справа от значков было добавлено некоторое непредусмотренное пространство, в то время как исходные изображения имеют квадратную форму и центрированы. В чем может быть проблема и как ее исправить?

Here are the code samples:

<div className="toolbarIcon settings">
  <img src={settings} alt="Settings" />
</div>
<div className="toolbarIcon file">
  <img src={file} alt="File" />
</div>
<div className="toolbarIcon share">
  <img src={share} alt="Share" />
</div>

.toolbarIcon {
  display: inline-flex;
  width: 36px;
  height: 36px;
  background-color: #fff;
  border-radius: 18px;
  margin: 7px 0;
  padding: 0;
  cursor: pointer;
}

.toolbarIcon:not(:first-child) {
  margin-left: 9px;
}

.toolbarIcon img {
  display: block;
  width: 19px;
  height: 19px;
  padding: 8.5px;
}