Traço fino. Cantos suaves. Uma só voz.

O sistema de ícones Entrelaços é linear (outline), com traço de 2px, cantos arredondados e grid de 24px. Herda currentColor — a cor vem do contexto, nunca embutida. Clique em qualquer ícone para copiar o SVG.

As 5 regras do ícone

Grid 24×24 com 2px de respiro interno — o desenho vive num quadrado de 20px.
Traço 2px (stroke-width: 2), nunca preenchido. Em tamanhos ≥ 40px, use 1.5px.
Cantos e pontas arredondados — stroke-linecap: round + stroke-linejoin: round. É a assinatura, ecoa o raio dos cards.
stroke: currentColor — a cor herda do texto. Nunca hardcode hex no SVG.
Acento laranja só em 1 ícone por tela, e só quando indica urgência/vivo. Segue a regra de 3.

Tamanhos canônicos

16 · inline

20 · botão

24 · padrão

32 · feature

44 · empty-state

Biblioteca · clique para copiar o SVG

✓ Faça

Herdar a cor do contexto

stroke: currentColor. O ícone fica roxo em link roxo, branco em CTA, muted em legenda — sem variantes.

✗ Não faça

Misturar estilos

Nada de ícones preenchidos, duotone, emoji ou de outra biblioteca. Um traço só, uma voz só.

Snippet · aplicando um ícone

HTML · ícone em botão

<a href="#" class="e-btn e-btn-primary">
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
       stroke="currentColor" stroke-width="2"
       stroke-linecap="round" stroke-linejoin="round">
    <path d="M5 12h14"/><path d="M12 5l7 7-7 7"/>
  </svg>
  Continuar
</a>

Base recomendada: a Entrelaços usa o estilo Feather / Lucide como ponto de partida — traço 2px, grid 24, cantos redondos. Qualquer ícone novo deve seguir essas métricas para conviver com os daqui. Para ícones de marca (borboleta), use os assets oficiais em /assets.