Ícones · Impulsamos

Catálogo

63

Os ícones do sprite, com o id em português (o que vai no href) e o nome original na Lucide. Um clique copia <svg class="i"><use href="#i-nome"/></svg>.

63 ícones plataforma fora do icones.svg do DS

De onde vem cada ícone

O sprite desta página é o da plataforma (SIMBOLOS no plataforma.js). Três ícones não estão no icones.svg do DS: alerta (criado em 27/10 para o .cuidado) e lua/sol (alternar tema; o icones.svg estava travado no Drive em 23/10 e eles ficaram só nos exemplos/ e na plataforma). Copie-os daqui até o icones.svg ser atualizado.

Traço e regras

Lucide, sempre embutida como SVG. Traço 1,5, pontas e junções redondas, sem preenchimento, currentColor. Tudo isso vem do CSS svg.i: o <symbol> leva só os caminhos.

Traço 1,5, nunca 2

svg.i

A Lucide vem com traço 2 por padrão: apague o stroke-width="2" ao copiar do site. Ao lado, o mesmo ícone em 40px: 1,5 (certo) e 2 (errado).

Código (CSS do base.css)

svg.i { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

Faça

Lucide, embutida no HTML como <symbol>.
Sempre class="i" no <svg>: é ela que dá o traço 1,5.
SVG dentro de CSS (máscara, data:): escreva stroke-width='1.5' no próprio SVG.
React/Vue com o pacote: strokeWidth={1.5} em todo ícone.

Evite

Traço 2 (o padrão da Lucide) ou 1.
Ícone por CDN, emoji como ícone ou outra família (Material, Font Awesome…).
Preencher o ícone ou dar cor fixa no SVG.

Exceção única

O check da caixa de marcar usa traço 3: é desenhado a 12px e sai com 1,5px na tela. Antes de entregar, busque stroke-width no projeto: só pode aparecer 1.5 (ou o 3 do check).

Tamanhos por contexto

5

O tamanho sai do componente, não do ícone: dentro de um disco o base.css já põe 18; num chip, 14. Escreva sempre o mesmo <svg class="i">.

17Padrão (svg.i)

18Discos, .redondo, pílulas de número, ícone dentro do .botao

15–16Fantasmas e menus (15); busca e .translucido (16)

14Chips, .alternar, .combo-botao

13Junto de texto pequeno (.trilha)

Os cinco tamanhos, ao vivo

svg.i

O mesmo <svg class="i"> em cada componente; quem decide o tamanho é o base.css.

Tamanho	Onde (regra do base.css / layouts.css)
17	`svg.i` (padrão), `.nav-rotulo`, botão Recolher da lateral.
18	`.disco`, `.redondo`, `.pilula-numero`, `.botao > span > svg`.
16	`.translucido`, `.busca`, ícone do `.campo-data`, seta da `.sanfona`.
15	`.fantasma`, páginas da lateral (`.nav a`), `.conta-botao`, `.seletor-texto`, `.ds-codigo`.
14	`.chip`, `.alternar`, `.combo-botao`, seta do `.aviso .abrir`.
13	`.trilha`, seta do grupo da lateral.
menores	`.chip .fechar` 11, `.avatar.mini` 12 (detalhes de componente; não use em peça nova).

Cor herdada

O ícone pinta com currentColor: ele é da cor do texto em volta. Para mudar a cor, mude a cor do elemento, nunca o SVG.

Mesma marcação, cores diferentes

stroke: currentColor

Ícone em repouso, de destaque, de perigo, sobre Ardósia e de estado: quem dá a cor é o componente.

Concluído

A nota pinta o ícone com --acento.

Papel	Cor	Exemplo
Em repouso	`--tinta-46` (hover `--tinta`)	`.icone`, ícone da busca, setas de menu.
Destaque	`--acento` (Ardósia; no escuro, Bruma)	`.disco`, `.nota`, `.pilula-numero`, aviso flutuante.
Semântico	`--positivo` · `--negativo` · `--aviso-texto`	Aviso de sucesso (✓ verde), `.perigo`, `.cuidado`.
Sobre Ardósia	branco (herdado do `.bloco.escuro` / `.cartao.destaque`)	Ícones dentro de blocos escuros.
Item ativo no escuro	`--lima`	Ícone do item ativo da lateral (`[data-tema="escuro"] .nav a.ativo svg.i`).

Símbolo da marca

O símbolo "Caminhos" é o único motivo gráfico. Em CSS ele mora no token --motivo-simbolo (SVG em data:) e entra como máscara: a cor é o background do elemento.

Estrela

.estrela

16px, cor --acento, com o brilho da marca girando em loop por dentro (2,6s). Dentro de .t-rotulo ela vira 14px e centra no texto.

Precisa de atenção

O brilho de perto

.estrela::after

A mesma estrela em 40 e 96px (só para ver): a luz cônica do .botao passa por dentro do símbolo, recortada pela máscara.

Onde a estrela aparece

.atencao-topo

Na faixa "precisa de atenção" e no rótulo dos blocos de destaque. No modo escuro, a estrela da .atencao fica Lima.

2 itens precisam de atenção

Contrato vence em 3 dias

Renove antes de sexta para não perder o desconto.

Abrir contrato Relatório sem revisão

Falta a aprovação da coordenação.

Revisar

Motivo em máscara

--motivo-simbolo

Qualquer elemento vira o símbolo com mask: var(--motivo-simbolo). Cor chapada, degradê oficial ou grande e translúcido no fundo (como o .simbolo-fundo da tela de acesso).

Código (CSS)

/* o símbolo em qualquer tamanho e cor */
.simbolo-mascara {
  width: 120px; height: 120px;
  background: var(--acento);            /* ou um degradê oficial */
  -webkit-mask: var(--motivo-simbolo) center / contain no-repeat;
  mask: var(--motivo-simbolo) center / contain no-repeat;
}

Faça

Use o símbolo em três lugares: a .estrela da faixa de atenção e dos rótulos, o símbolo grande da tela de acesso e a lateral recolhida (34px).
Troque a cor pelo background: o brilho continua.

Evite

Símbolo como decoração solta ou marcador de lista.
Desenhar o símbolo com <img> ou PNG.
Usar a estrela como ícone de ação (ela não é um ícone Lucide).

Biblioteca completa

1.858

Toda a Lucide (versão fixa 1.50.0), guardada no DS. Para ver e achar o nome; um clique copia o SVG completo, já com o traço 1,5, pronto para colar (Figma, peça, código). Quem busca daqui no dia a dia é a IA, pelo nome.

Quando usar

Faltou um ícone no catálogo do dia a dia: use daqui, sem editar arquivo.
Passou a usar sempre: copie para o icones.svg com nome i-… em português.

Nunca

Carregar o lucide.svg inteiro em toda tela (são 446 KB).
Dois ícones diferentes para a mesma ação: o catálogo vem primeiro.

carregando…

Usar um ícone da biblioteca

#lucide-nome

Nome exatamente como no lucide.dev. O traço 1,5 vem do CSS, igual aos do catálogo.

Num sistema novo

Três passos: colar o sprite, usar com <use> e, quando faltar um ícone, trazer da Lucide com nome em português.

Copie o conteúdo de Design System/icones.svg e cole uma vez, no fim do <body>, dentro de um <svg> escondido.
Garanta o base.css carregado: é ele que dá traço 1,5, tamanho e cor (svg.i).
Em cada lugar: <svg class="i"><use href="#i-nome"/></svg>. Botão só de ícone leva aria-label.
Ícone novo: copie os caminhos em lucide.dev para um <symbol id="i-nome-em-portugues" viewBox="0 0 24 24">, sem stroke-width, e acrescente também no icones.svg.

O sprite e o uso

<symbol> + <use>

O sprite fica invisível (0 × 0) e cada ícone é uma referência a ele.

Código

<!-- 1. uma vez, no fim do <body> (conteúdo do icones.svg) -->
<svg width="0" height="0" style="position:absolute" aria-hidden="true">
  <symbol id="i-bandeira" viewBox="0 0 24 24"><path d="M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528"/></symbol>
  <symbol id="i-busca" viewBox="0 0 24 24"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></symbol>
  <symbol id="i-sino" viewBox="0 0 24 24"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></symbol>
  <!-- … os outros símbolos … -->
</svg>

<!-- 2. ícone com texto: decorativo -->
<button class="fantasma"><svg class="i"><use href="#i-editar"/></svg>Editar</button>

<!-- 3. botão só de ícone: o nome vai no aria-label -->
<button class="redondo" aria-label="Notificações"><svg class="i"><use href="#i-sino"/></svg></button>

Ícone novo, vindo da Lucide

<symbol id="i-…">

Do site vem assim (com traço 2 e atributos de estilo). No sprite fica só o viewBox e os caminhos.

Código

<!-- copiado de lucide.dev (NÃO cole assim) -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>

<!-- no sprite: id em português, só os caminhos -->
<symbol id="i-nota" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/></symbol>
<symbol id="i-paleta" viewBox="0 0 24 24"><path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"/><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"/><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"/><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"/><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"/></symbol>
<symbol id="i-regras" viewBox="0 0 24 24"><path d="M13 5h8"/><path d="M13 12h8"/><path d="M13 19h8"/><path d="m3 17 2 2 4-4"/><path d="m3 7 2 2 4-4"/></symbol>
<symbol id="i-relogio" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></symbol>

Ícones fora do sprite

O comum.js desenha alguns ícones com o caminho dentro do SVG (seta do combo, setas do calendário, Recolher, lua/sol do tema, setas dos grupos da lateral) para funcionar mesmo sem o sprite. E três ícones vivem como máscara em CSS no tokens.css: --icone-seta, --icone-baixar e --icone-subir (a seta do .botao), todos com stroke-width='1.5'.