Problema para colocar texto debajo de SVG en CSS

 <footer>
    <div id="footer">
      <div id="inicio">
        <a href="#"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M11 3V11H3V13H11V21H13V13H21V11H13V3H11Z"/></svg><br>Inicio</a>
      </div>
      <div id="proximamente">
        <a href="#"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M8 5V19L19 12L8 5Z"/></svg><br>Próximamente</a>
      </div>
      <div id="buscar">
        <a href="#"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M9 2C5.14585 2 2 5.14585 2 9C2 12.8541 5.14585 16 9 16C10.748 16 12.345 15.348 13.5742 14.2812L14
          14.707V16L20 22L22 20L16 14H14.707L14.2812 13.5742C15.348 12.345 16 10.748 16 9C16 5.14585 12.8541 2 9 2ZM9
          4C11.7733 4 14 6.22673 14 9C14 11.7733 11.7733 14 9 14C6.22673 14 4 11.7733 4 9C4 6.22673 6.22673 4 9 4Z"/>
          </svg><br>Buscar</a>
      </div>
      <div id="descargas">
        <a href="#"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2C6.489 2 2 6.489 2 12C2 17.511 6.489 22 12 22C17.511 22 22 17.511 22 12C22 6.489 17.511 2 12
          2ZM12 4C16.4301 4 20 7.56988 20 12C20 16.4301 16.4301 20 12 20C7.56988 20 4 16.4301 4 12C4 7.56988 7.56988
          4 12 4ZM11 7V13H8L12 17L16 13H13V7H11Z"/></svg><br>Descargas</a>
      </div>
    </div>
  </footer>

footer{
    margin-top: 5%;
}

#footer{
    text-align: center;
    font-family: AvenirNextLTPro-Regular;
}

#footer div{
    display: inline;
    margin: 4%;
}

#footer a{
    
}

#footer svg{
    
}

#inicio svg{
    fill: rgb(150, 150, 150);
    width: 100%;
}

#proximamente svg{
    fill: rgb(150, 150, 150);
    width: 41%;
}

#buscar svg{
    fill: rgb(150, 150, 150);
    width: 85%;
}

#descargas svg{
    fill: rgb(150, 150, 150);
    width: 55%;
}