The image stretches the button or goes beyond its frame

When I insert an img file into the button, it stretches and the text shifts to the lower right corner. What should I do so that the image does not change the size of the button and stays inside it?

.navbar {
  display: flex;
  padding: 2em;
}

.smallbutton {
  display: flex;
  background-color: #959595;
}

.smallbutton button {
  min-width: 158px;
  display: block;
  padding-right: 40px;
  padding-left: 40px;
  padding-bottom: 14px;
  padding-top: 14px;
  text-decoration: none;
  color: #2B2A2A;
  border-radius: 25px;
  border-color: #959595;
}

<div class="navbar">
  <div class="smallbutton">
    <button class="cob">
                <img src="static/img/calend 1.png" alt="">
                События</button>
    <button>Купить R$</button>
    <button>Лотерея</button>
    <button>Бонусы</button>
    <button>Рефералка</button>
  </div>
</div>

I have already tried to change the location using padding, margin and "transform: translate". I also tried to make the button data using the a tag. Alas, nothing helped. When using width and height, nothing changed, or the buttons overlapped each other. When resizing, the second button completely fits on the first one. This is how it should look like:

Solution

Is this what you're after?

.navbar {
  display: flex;
  padding: 2em;
}

.smallbutton {
  display: flex;
  background-color: #060106;
  padding-bottom: 10px;
}

.smallbutton button {
  min-width: 158px;
  display: block;
  text-decoration: none;
  color: #2b2a2a;
  background: #959595;
  border-radius: 70px;
  padding-bottom: 2px;
  cursor: pointer;
  margin-right: 7px;
}

.smallbutton img {
  float: left;
  position: relative;
  left: 4px;
  max-width: 37px;
}

.smallbutton a {
  text-decoration: none;
}

.smallbutton span {
  font-weight: bolder;
  line-height: 35px;
  font-size: 19px;
}

<div class="navbar">
  <div class="smallbutton">
    <a href="#">
    <button class="cob"><img src="https://i.sstatic.net/TnepabJj.png" alt="Calendar"><span>События</span></button></a>
    <a href="#"><button><img src="https://i.sstatic.net/LRzPOFqd.png" alt="hexa"><span>Купить R$</span></button></a>
    <a href="#"><button><img src="https://i.sstatic.net/LRTBTnld.png" alt="present"><span>Лотерея</span></button></a>
    <a href="#"><button><img src="whatever.png" alt="whatever"><span>Бонусы</span></button></a>
    <a href="#"><button><img src="whatever.png" alt="whatever"><span>Рефералка</span></button></a>
  </div>
</div>

Images used: , ,