Съезжает текст с иконки

Подскажите что делать, как выровнять текст?

li {
background-color:orange;
color:white;
width:120px;
}
img {
width:24px;
height:24px;
}

<li type="none"><img src="https://cdn.icon-icons.com/icons2/936/PNG/128/volume-up-interface-symbol_icon-icons.com_73337.png" alt="Автозвук">Turn on

Есть вариант flexом сделать:

li {
display:flex;
justify-content:center;
align-items:center;
background-color:orange;
color:black;
width:120px;
padding:5px;
}

img {
width:24px;
height:24px;
}

PS. белый текст на оранжевом выглядит не очень)