Usando ícones de menu
O “hambúrguer” de três linhas abre a navegação em celulares; combine-o com um ícone de fechar (×) para o estado aberto.
Todos os ícones aqui seguem currentColor, então assumem a cor do texto do elemento em que estão — um único SVG funciona em fundos claros e escuros, em links e botões. Defina um width e height explícitos (ou dimensione-os no CSS com 1em) para que o layout não se desloque enquanto a página carrega.
Ícones acessíveis
Se o ícone for decorativo ou estiver ao lado de texto visível, adicione aria-hidden="true". Se ele for o único conteúdo de um botão ou link, dê a esse elemento um aria-label, como “Menu”.
Licenças
Estes ícones de menu vêm de Lucide, Tabler, Bootstrap Icons, Iconoir, Material Symbols, Material Design Icons e Carbon — conjuntos open-source sob licenças MIT, ISC ou Apache 2.0, que permitem uso pessoal e comercial. Precisa de outra coisa? Pesquise todos os 70.000+ ícones no SVG Icon Finder.
Buscador de Ícones SVG
Busque 70.000+ ícones SVG open source — Lucide, Tabler, Heroicons, Phosphor, Bootstrap, Material e mais.