Когда я помещаю изображение, текст справа переходит в bootom

это сводит меня с ума. У меня есть панель навигации, где есть три div.

Каждый div имеет текст, выровненный по центру как по вертикали, так и по горизонтали.

Когда я помещаю изображение (это значок svg зум-объектива) перед текстом «поиск», он перемещает мой текст «поиск» внизу.

Это код:

HTML

<nav>
        <div id = "leftside">
            <img src = "img/zoom-lens.png" alt = "search">
            search
        </div>
        <div id = "middle">
            Arkadomundo
        </div>
        <div id = "rightside">
            Sign Up
        </div>
</nav>

CSS

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

* {
    margin: 0;
    padding: 0;
}

nav {
    height: 70px;
    width: 100%;
    background-color: #241F1C;
    font-family: 'Press Start 2P', cursive;
    color: #FFFFFF;
    display: flex;
    align-items: center;
}

#leftside {
    flex-grow: 1;
    text-align: left;
    margin-left: 10px;
}

#leftside img {
    height: 50px;
}

#middle{
    flex-grow: 2;
    text-align: center;
}


#rightside {
    flex-grow: 1;
    text-align: right;
    margin-right: 10px;
}

Я думаю, это простая проблема для вас, но, честно говоря, я не могу найти, почему это происходит.