SVG's are not visible on the header

[bitdom8]

When using SVG in li element it removes them from the header when size shrinks

<!-- {$userStore ? $userStore.username : ""} -->
			<li>
				<a class:hi-gradient={$page.url.pathname === "/" + "account"} href={$userStore ? '/account' : '/login'} class="nav-link">
			{#if $userStore}
			
			<svg style="width:24px;height:42px" viewBox="0 0 24 24">
				<path fill="currentColor" d="M21.1,12.5L22.5,13.91L15.97,20.5L12.5,17L13.9,15.59L15.97,17.67L21.1,12.5M11,4A4,4 0 0,1 15,8A4,4 0 0,1 11,12A4,4 0 0,1 7,8A4,4 0 0,1 11,4M11,6A2,2 0 0,0 9,8A2,2 0 0,0 11,10A2,2 0 0,0 13,8A2,2 0 0,0 11,6M11,13C11.68,13 12.5,13.09 13.41,13.26L11.74,14.93L11,14.9C8.03,14.9 4.9,16.36 4.9,17V18.1H11.1L13,20H3V17C3,14.34 8.33,13 11,13Z" />
			</svg> {$t('Account')}

		{:else}
		<svg style="width:24px;height:42px" viewBox="0 0 24 24">
			<path fill="currentColor" d="M10 12C12.21 12 14 10.21 14 8S12.21 4 10 4 6 5.79 6 8 7.79 12 10 12M10 6C11.11 6 12 6.9 12 8S11.11 10 10 10 8 9.11 8 8 8.9 6 10 6M13.25 13.45C12.07 13.15 10.89 13 10 13C7.33 13 2 14.33 2 17V20H13.09C13.07 19.86 13.05 19.73 13.04 19.59C13 19.4 13 19.2 13 19C13 18.69 13.03 18.39 13.08 18.1C13.21 17.21 13.54 16.38 14 15.66C14.21 15.38 14.42 15.12 14.65 14.88L14.67 14.85C14.9 14.61 15.16 14.39 15.43 14.19C14.75 13.88 14 13.63 13.25 13.45M11.05 18.1H3.9V17C3.9 16.36 7.03 14.9 10 14.9C10.68 14.9 11.36 15 12 15.11C11.5 16 11.18 17 11.05 18.1M22 18V20H18V22L15 19L18 16V18H22Z" />
		</svg>{$t('Login')}
			{/if}
		</a>
		</li>