Как предотвратить изменение размера div при увеличении?

Question

Размер моего значка гамбургера изменяется всякий раз, когда пользователь увеличивает или уменьшает масштаб.

Есть ли способ решить эту проблему?

Может быть, изменив единицы измерения, в которых установлена ​​ширина гамбургера?

Примечание. Значок гамбургера - это не изображение, а набор элементов.

* {
  margin: 0;
  padding: 0;
  touch-action: none;
}

body {
  background-color: #FEFEFE;
}

#header-background {
  background-color: #08599d;
  height: 35%;
  width: 100%;
}

#menu-icon {
  resize: none
}

<div id="header-background"/>
<svg id="menu-icon" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" fill="white"/></svg>