I CAN’T ALIGN MY SVG TO THE TEXT ON MY LIST

Question

I would like to align my SVG icon next to mine <li><a href="#">INFORMÁTICA</a></li>. I have tried using padding, margin but the two are moving together because the SVG is included in <li>**<svg-aqui></svg>**(Ilustração) <a href="#">INFORMÁTICA</a></li>.

Demonstration of the Problem As noted "INFORMATICS" is misaligning when the control icon was placed. I would like to place the icon and make them both aligned on the same level as all other texts (Consoles, Support, Who We Are)

I’m using flex display and would like the site to remain responsive but when I put my image my "space-Evenly" "stops working"

/* Parâmetros da Navegação */
nav{
    width: 100%;
    height: 4.5rem;
    background-color: #232323;
}

li, a{
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 1.5rem;
    color: white;
    text-decoration: none;
}

#nav-content{
    display: flex;
    justify-content: space-evenly;
    list-style: none;
}

#nav-content li{
    display: inline-block;
    padding-top: 1.3rem;
}

<nav>
    <ul id="nav-content">
        
        <li><svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M29.6875 21.0938H35.9375" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M14.0625 21.0938H20.3125" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M17.1875 17.9688V24.2188" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M33.5973 10.8867L16.4071 10.9375C14.0193 10.9377 11.7078 11.779 9.87845 13.3137C8.0491 14.8484 6.8188 16.9784 6.40351 19.3299L6.40518 19.3302L3.209 35.7682C3.00712 36.9136 3.17564 38.0935 3.69007 39.1366C4.2045 40.1797 5.03806 41.0317 6.06968 41.5687C7.1013 42.1057 8.27727 42.2999 9.42679 42.1231C10.5763 41.9462 11.6395 41.4075 12.462 40.5852L12.4617 40.5849L20.9061 31.25L33.5973 31.1992C36.2909 31.1992 38.8742 30.1292 40.7789 28.2245C42.6836 26.3199 43.7536 23.7366 43.7536 21.043C43.7536 18.3494 42.6836 15.7661 40.7789 13.8614C38.8742 11.9567 36.2909 10.8867 33.5973 10.8867V10.8867Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M43.5993 19.2793L46.7928 35.7682C46.9947 36.9136 46.8262 38.0935 46.3118 39.1366C45.7973 40.1797 44.9638 41.0316 43.9322 41.5687C42.9005 42.1057 41.7246 42.2999 40.575 42.123C39.4255 41.9462 38.3623 41.4075 37.5398 40.5851L37.5402 40.5848L29.1016 31.2172" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <a href="#">INFORMÁTICA</a></li>

        <li><a href="#">CONSOLES</a></li>

        <li><a href="#">SUPORTE</a></li>

        <li><a href="#">QUEM SOMOS</a></li>
    </ul>
</nav>

Answer 1

You can line up display: flex in the <li>:

#nav-content li{
    display: flex;
    align-items: center;
    padding-top: 1.3rem;
}