# Ícones — Fundação do Design System Phorte

> A Lucide (`lucide-react`) como biblioteca oficial, a escala do `Icone` em cinco degraus, o processo de ícone novo e os ícones em uso, com o que cada um mostra.

- Página: https://phorte-design-system.vercel.app/styleguide/fundacao/icones
- Ficha no Storybook: https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/foundation-icons--docs
- Índice do design system: https://phorte-design-system.vercel.app/llms.txt

Biblioteca oficial: **Lucide** (lucide.dev), instalada como `lucide-react` (presa na 0.546: a versão 1 removeu os ícones de marca que o Footer, a Navbar e o TeamGrid usam). Sempre pelo átomo `Icone`, que é decorativo (`aria-hidden`) a menos que receba `rotulo`.

## A escala do `Icone`

| Degrau | Tamanho |
| --- | --- |
| `xs` | 12px |
| `sm` | 16px |
| `md` | 20px |
| `lg` | 24px |
| `xl` | 32px |

## Ícone novo

1. Procure em lucide.dev. Importe pelo nome que o site mostra e passe ao `Icone`.
2. Se não houver: SVG 24×24, traço 2, cantos redondos, `currentColor`, com licença compatível (ISC, MIT, OFL ou CC-BY) registrada em `public/icones/LICENCAS.md` antes de entrar.
3. Entre pelo `Icone`, num dos cinco degraus.

Controle só com ícone precisa de nome em pt-BR (`aria-label` ou texto `sr-only`).

## Os 60 em uso

| Ícone | Usos | O que mostra | Quando usar |
| --- | --- | --- | --- |
| `CheckCircle2` | 13 | Sinal de visto dentro de um círculo. | Sucesso confirmado (mensagem de sucesso, campo válido) ou benefício incluído com mais destaque que o visto simples. |
| `ChevronRight` | 8 | Ponta de seta apontando para a direita. | Próximo em carrossel e paginação, separador de trilha de navegação; no Slider, um dos lados do polegar. |
| `Play` | 8 | Triângulo apontando para a direita. | Retomar movimento pausado ou iniciar vídeo. |
| `AlertCircle` | 7 | Círculo com um ponto de exclamação dentro. | Erro de campo e aviso que pede atenção — sempre junto do texto do erro, nunca sozinho. |
| `ArrowRight` | 7 | Seta reta apontando para a direita. | Avançar: ao lado do texto de um link ou botão que leva adiante ("Ver curso"). |
| `X` | 7 | Letra X, dois traços cruzados. | Fechar (modal, menu, aviso), limpar filtro e limpar o campo (Input limpável, E60). O botão diz "Fechar" ou "Limpar busca", nunca "X". |
| `Check` | 6 | Sinal de visto, sem moldura. | Item incluído numa lista, opção marcada ou etapa concluída. |
| `GraduationCap` | 5 | Capelo de formatura. | Curso, graduação, pós-graduação e formação acadêmica em geral. |
| `Pause` | 5 | Duas barras verticais paralelas. | Pausar conteúdo que se move ou se atualiza sozinho (carrossel, faixa rolante, chat simulado). |
| `Search` | 5 | Lupa. | Busca: botão de buscar e campo de busca. O botão diz "Buscar". |
| `Users` | 5 | Silhueta de duas pessoas lado a lado. | Turma, grupo, vagas e modalidade presencial. |
| `ChevronDown` | 4 | Ponta de seta apontando para baixo. | Algo que abre para baixo: menu, seleção, acordeão recolhido. |
| `ChevronLeft` | 4 | Ponta de seta apontando para a esquerda. | Anterior em carrossel e paginação; no Slider, um dos lados do polegar. |
| `Award` | 3 | Medalha com fita pendurada. | Conquista, certificação e diferencial reconhecido da instituição. |
| `Calendar` | 3 | Folha de calendário com argolas no topo. | Data de início de turma, de evento ou prazo de matrícula. |
| `Info` | 3 | Letra i dentro de um círculo. | Informação neutra (Alert `info`) e dica de ajuda ao lado de um rótulo. |
| `Linkedin` | 3 | Letras "in", a marca do LinkedIn. | Link para o perfil no LinkedIn — da instituição ou de docente — com nome acessível. |
| `MapPin` | 3 | Alfinete de mapa. | Endereço, unidade ou local de evento. |
| `Minus` | 3 | Traço horizontal. | Recolher (acordeão aberto), diminuir quantidade e caixa de seleção parcialmente marcada. |
| `Sparkles` | 3 | Três estrelas cintilantes de quatro pontas. | Novidade ou destaque especial. Use pouco — vira ruído quando está em tudo. |
| `XCircle` | 3 | Letra X dentro de um círculo. | Erro grave, item não incluído numa comparação, ou campo ainda incompleto (Input com regra) — sempre com o texto do erro, "Não incluído" ou "Ainda incompleto". |
| `Clock` | 2 | Relógio de ponteiros. | Duração, carga horária ou horário de aula. |
| `Clock3` | 2 | Relógio de ponteiros marcando três horas. | O mesmo do relógio comum — duração e horário. Existem os dois por acaso; prefira um só em peça nova. |
| `Facebook` | 2 | Letra f minúscula, a marca do Facebook. | Link para a página da instituição no Facebook — só em lista de redes sociais, com nome acessível. |
| `Instagram` | 2 | Câmera fotográfica quadrada de cantos arredondados, a marca do Instagram. | Link para o perfil da instituição no Instagram — só em lista de redes sociais, com nome acessível. |
| `MessageCircle` | 2 | Balão de conversa redondo. | Conversa, atendimento e chat — inclusive o botão de WhatsApp. |
| `MoreHorizontal` | 2 | Três pontos em linha. | Páginas omitidas no meio da paginação (1 … 8 9 10). É enfeite: não é botão. Para "mais ações" num menu, o botão precisa de nome. |
| `Plus` | 2 | Sinal de mais. | Expandir (acordeão fechado), adicionar item ou aumentar quantidade. |
| `Send` | 2 | Avião de papel. | Enviar mensagem ou formulário curto (chat, newsletter). |
| `Target` | 2 | Alvo de círculos concêntricos. | Objetivo, foco e resultado de carreira. |
| `Zap` | 2 | Raio. | Rapidez: curso intensivo, trilha expressa, energia. |
| `ArrowDown` | 1 | Seta para baixo. | Cabeçalho de tabela ordenado do maior para o menor (Tabela, E110) — o `aria-sort` diz o mesmo a quem ouve. |
| `ArrowLeft` | 1 | Seta reta apontando para a esquerda. | Voltar à página anterior ou passar ao item anterior de uma sequência. |
| `ArrowUp` | 1 | Seta para cima. | Cabeçalho de tabela ordenado do menor para o maior (Tabela, E110). |
| `Brain` | 1 | Cérebro visto de lado. | Área de conhecimento de Psicologia, e temas de mente e aprendizagem. |
| `ChevronsUpDown` | 1 | Duas setas pequenas, uma para cima e outra para baixo. | Cabeçalho de tabela que ordena, ainda sem ordem escolhida (Tabela, E110). |
| `ExternalLink` | 1 | Quadrado com uma seta saindo pelo canto de cima. | Link que abre em outra aba (Link com novaAba, E67) — sempre com "(abre em nova aba)" para quem ouve. |
| `Eye` | 1 | Olho aberto. | Mostrar a senha digitada (Input com type="password", E60). O botão se chama "Mostrar senha", com aria-pressed. |
| `EyeOff` | 1 | Olho riscado. | A senha está à mostra e o botão a esconde de novo — o par do Eye no mesmo botão. |
| `Gavel` | 1 | Martelo de juiz. | Área de conhecimento de Direito ou tema jurídico. |
| `HeartPulse` | 1 | Coração com uma linha de batimento cruzando. | Área de Saúde e temas de fisiologia e bem-estar. |
| `History` | 1 | Relógio com uma seta girando para trás em volta. | Histórico, trajetória da instituição ou tempo de mercado. |
| `Home` | 1 | Casa com telhado. | Link para a página inicial, primeiro item da trilha de navegação. |
| `Inbox` | 1 | Bandeja de entrada vazia. | Estado vazio (EstadoVazio, E111): o ícone padrão de lista ou caixa sem nada. Decorativo; o título diz o que falta. |
| `Laptop` | 1 | Notebook aberto. | Modalidade online de um curso. |
| `Loader2` | 1 | Arco circular aberto, que gira. | Carregando: dentro do botão com `isLoading`. Só gira com movimento liberado. |
| `Mail` | 1 | Envelope fechado. | E-mail de contato e campo de newsletter. |
| `Menu` | 1 | Três linhas horizontais empilhadas. | Abrir o menu de navegação no celular. O botão diz "Abrir menu". |
| `Monitor` | 1 | Tela de computador sobre um pé. | Estudo a distância e aula transmitida — em "Por que escolher a Phorte". |
| `Phone` | 1 | Fone de telefone. | Telefone de contato e central de atendimento. |
| `PlayCircle` | 1 | Triângulo de reprodução dentro de um círculo. | Botão grande sobre a capa de um vídeo, para começar a assistir. |
| `Quote` | 1 | Aspas grandes. | Abertura de depoimento. É enfeite: o texto do depoimento já diz tudo. |
| `Shield` | 1 | Escudo liso. | Segurança, proteção de dados e garantia. |
| `ShieldCheck` | 1 | Escudo com um sinal de visto. | Selo de confiança: curso reconhecido pelo MEC, pagamento seguro. |
| `Star` | 1 | Estrela de cinco pontas. | Avaliação e nota (depoimentos) ou item favorito. Nota em estrelas precisa do número em texto. |
| `Terminal` | 1 | Janela de terminal com o sinal de comando. | Área de conhecimento de Tecnologia da Informação. |
| `TrendingUp` | 1 | Linha de gráfico subindo com uma seta. | Área de conhecimento de Gestão, e crescimento de carreira ou números em alta. |
| `Twitter` | 1 | Pássaro, a marca antiga do Twitter. | Link para o perfil no X (antigo Twitter). A marca mudou — vale trocar pelo X quando houver ícone próprio. |
| `User` | 1 | Silhueta de uma pessoa, da cabeça aos ombros. | Conta, perfil, docente ou palestrante sem foto. |
| `Video` | 1 | Câmera de vídeo. | Aula ao vivo, transmissão ou conteúdo em vídeo. |