Add a filter to the image only:

.hello {
  background-color: #eeeeee;
  color: #4171af;
  font-size: 20px
}

.hello:hover {
  background-color: #4171af;
  color: white;
}

.hello:hover img {
  filter: brightness(150%);
}

<div class="hello"><img src="https://i.ibb.co/HBbfCGF/play.png">bouton</div>

I recommand you to create a second image file and on hover change the image src attribute using JavaScript to the brighter file. It also allows you to be more creative than just increasing the brightness value.

It's a simple task, but I'll rather explain it detail. It seems, that you have dealt with the basic CSS hover effects with no problem, so I'll just show you the JavaScript.

Your HTML looks probably like this (i added a class to the img and linked the JavaScript):

<div class="hello">
    <img class="play" src="https://i.ibb.co/HBbfCGF/play.png">
    <span>Button</span>
</div>
<script src="script.js"></script>

Now, you want to change the attribute src="" of the <img> tag, when hovering over the whole <div>. And when the mouse is no longer hovering over the <div>, you want to set it to the default.

You'll need to use the addEventListener() and setAttribute() functions.

let hello = document.querySelector('.hello');
hello.addEventListener('mouseover', function(){
   let img = document.querySelector('.play');
   img.setAttribute('img', 'path/to/the/second/file.png');
});
hello.addEventListener('mouseout', function(){
   let img = document.querySelector('.play');
   img.setAttribute('img', 'https://i.ibb.co/HBbfCGF/play.png');
});