← bit-system / marca

Ícones

Ícones de linha, stroke 2px, grid 24×24, cap square. Dois pixel-icons para toques de marca. Clique em qualquer ícone para copiar o código.

Especificação

todos os ícones seguem o mesmo padrão — sem exceção
Stroke · 2px
sempre stroke-width="2"
Cap · Square
stroke-linecap="square"
Grid · 24×24
viewBox="0 0 24 24"
Cor · currentColor
nunca hardcode de cor

Escala de tamanhos

6 tamanhos · --size-icon-{xs|sm|md|lg|xl|2xl}
xs
12px
sm
16px
md
20px
lg · padrão
24px
xl
32px
2xl
48px

Biblioteca completa

clique em qualquer ícone para copiar o código · sprite: assets/icons.svg
Navegação & direção
UI & ações gerais
Performance & negócio
Pessoas & comunicação
Arquivos & sistema
Pixel icons · toques de marca

Como usar

sprite inline · sempre currentColor
<!-- 1. Adicione o sprite na <body> (apenas uma vez) --> <object type="image/svg+xml" data="assets/icons.svg" style="display:none"></object> <!-- 2. Use com <use href> — cor via currentColor (CSS) --> <svg width="24" height="24"> <use href="assets/icons.svg#bs-bolt"/> </svg> <!-- 3. Tamanho via width/height. Cor via color ou fill --> <svg width="32" height="32" style="color: var(--brand-primary)"> <use href="assets/icons.svg#bs-trophy"/> </svg> <!-- 4. Pixel icons: viewBox 16x16, shape-rendering crispEdges --> <svg viewBox="0 0 16 16" width="32" height="32" shape-rendering="crispEdges"> <use href="assets/icons.svg#bs-coin"/> </svg>
✓ Copiado!