Перенос блоков svg на новую строку

Есть svg, которая по сути является небольшой табличкой и я столкнулся с проблемой, что примерно после ширины экрана 1000px, блоки перестают переноситься на новую строку и просто становятся фиксированными, скорее всего проблема в стилях, но я уже пробывал flex и grid, но результат у них одинаковый и не могу понять почему так.

<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" fill="none" data-reactroot=""><foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml"><style>
* {
  margin: 0;
  box-sizing: content-box;
}
</style>
<div id="icon-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" height="70px" width="70px" fill="red"></svg>
<svg xmlns="http://www.w3.org/2000/svg" height="70px" width="70px" fill="red"></svg><svg xmlns="http://www.w3.org/2000/svg" height="70px" width="70px" fill="red"></svg><svg xmlns="http://www.w3.org/2000/svg" height="70px" width="70px" fill="red"></svg><svg xmlns="http://www.w3.org/2000/svg" height="70px" width="70px" fill="red"></svg><svg xmlns="http://www.w3.org/2000/svg" height="70px" width="70px" fill="red"></svg><svg xmlns="http://www.w3.org/2000/svg" height="70px" width="70px" fill="red"></svg><svg xmlns="http://www.w3.org/2000/svg" height="70px" width="70px" fill="red"></svg><svg xmlns="http://www.w3.org/2000/svg" height="70px" width="70px" fill="red"></svg>
<svg xmlns="http://www.w3.org/2000/svg" height="70px" width="70px" fill="red"></svg><svg xmlns="http://www.w3.org/2000/svg" height="70px" width="70px" fill="red"></svg><svg xmlns="http://www.w3.org/2000/svg" height="70px" width="70px" fill="red"></svg><svg xmlns="http://www.w3.org/2000/svg" height="70px" width="70px" fill="red"></svg><svg xmlns="http://www.w3.org/2000/svg" height="70px" width="70px" fill="red"></svg><svg xmlns="http://www.w3.org/2000/svg" height="70px" width="70px" fill="red"></svg><svg xmlns="http://www.w3.org/2000/svg" height="70px" width="70px" fill="red"></svg><svg xmlns="http://www.w3.org/2000/svg" height="70px" width="70px" fill="red"></svg><svg xmlns="http://www.w3.org/2000/svg" height="70px" width="70px" fill="red"></svg><svg xmlns="http://www.w3.org/2000/svg" height="70px" width="70px" fill="red"></svg><svg xmlns="http://www.w3.org/2000/svg" height="70px" width="70px" fill="red"></svg><svg xmlns="http://www.w3.org/2000/svg" height="70px" width="70px" fill="red"></svg><svg xmlns="http://www.w3.org/2000/svg" height="70px" width="70px" fill="red"></svg><svg xmlns="http://www.w3.org/2000/svg" height="70px" width="70px" fill="red"></svg><svg xmlns="http://www.w3.org/2000/svg" height="70px" width="70px" fill="red"></svg><svg xmlns="http://www.w3.org/2000/svg" height="70px" width="70px" fill="red"></svg><svg xmlns="http://www.w3.org/2000/svg" height="70px" width="70px" fill="red"></svg><svg xmlns="http://www.w3.org/2000/svg" height="70px" width="70px" fill="red"></svg><svg xmlns="http://www.w3.org/2000/svg" height="70px" width="70px" fill="red"></svg><svg xmlns="http://www.w3.org/2000/svg" height="70px" width="70px" fill="red"></svg><svg xmlns="http://www.w3.org/2000/svg" height="70px" width="70px" fill="red"></svg><svg xmlns="http://www.w3.org/2000/svg" height="70px" width="70px" fill="red"></svg><svg xmlns="http://www.w3.org/2000/svg" height="70px" width="70px" fill="red"></svg><svg xmlns="http://www.w3.org/2000/svg" height="70px" width="70px" fill="red"></svg><svg xmlns="http://www.w3.org/2000/svg" height="70px" width="70px" fill="red"></svg>

</div><style>
#icon-wrapper {
    width:100%;
  display: flex;
  flex-wrap: wrap;
}

#icon-wrapper svg {
  background: rgba(250, 250, 250, .2);
  border: 1px solid rgba(0,0,0,.01);
  border-radius: 12px;
  box-shadow: 2px 2px 2px rgba(0,0,0,.2), -1px -1px 1px rgba(0,0,0,.05);
  margin: 12px;
  padding: 8px;
}
</style></div></foreignObject></svg>

p.s извиняюсь, что код не отформатирован