Ícones

A escala do Icone

Os tamanhos em uso

Ícone decorativo precisa sumir do leitor de tela

Os 60 em uso

A grade mostra o desenho e o nome. Inspecione um ícone (clique, ou Enter pelo teclado) para ver o que ele mostra, quando usar, onde já aparece e o termo de busca — é o que um agente lê para escolher o desenho certo (E119).

• CheckCircle2

  Sinal de visto dentro de um círculo.

  Uso: Sucesso confirmado (mensagem de sucesso, campo válido) ou benefício incluído com mais destaque que o visto simples.

  Onde: em 13 peças · Busca: check circle, success, verified

  <Icone icone={CheckCircle2} />
• ChevronRight

  Ponta de seta apontando para a direita.

  Uso: Próximo em carrossel e paginação, separador de trilha de navegação; no Slider, um dos lados do polegar.

  Onde: em 8 peças · Busca: chevron right, caret right, next

  <Icone icone={ChevronRight} />
• Play

  Triângulo apontando para a direita.

  Uso: Retomar movimento pausado ou iniciar vídeo.

  Onde: em 8 peças · Busca: play, play button

  <Icone icone={Play} />
• AlertCircle

  Círculo com um ponto de exclamação dentro.

  Uso: Erro de campo e aviso que pede atenção — sempre junto do texto do erro, nunca sozinho.

  Onde: em 7 peças · Busca: alert circle, exclamation circle, error

  <Icone icone={AlertCircle} />
• ArrowRight

  Seta reta apontando para a direita.

  Uso: Avançar: ao lado do texto de um link ou botão que leva adiante ("Ver curso").

  Onde: em 7 peças · Busca: arrow right, forward arrow, next

  <Icone icone={ArrowRight} />
• X

  Letra X, dois traços cruzados.

  Uso: Fechar (modal, menu, aviso), limpar filtro e limpar o campo (Input limpável, E60). O botão diz "Fechar" ou "Limpar busca", nunca "X".

  Onde: em 7 peças · Busca: close, x, cross

  <Icone icone={X} />
• Check

  Sinal de visto, sem moldura.

  Uso: Item incluído numa lista, opção marcada ou etapa concluída.

  Onde: em 6 peças · Busca: check, checkmark, tick

  <Icone icone={Check} />
• GraduationCap

  Capelo de formatura.

  Uso: Curso, graduação, pós-graduação e formação acadêmica em geral.

  Onde: em 5 peças · Busca: graduation cap, education, mortarboard

  <Icone icone={GraduationCap} />
• Pause

  Duas barras verticais paralelas.

  Uso: Pausar conteúdo que se move ou se atualiza sozinho (carrossel, faixa rolante, chat simulado).

  Onde: em 5 peças · Busca: pause, pause button

  <Icone icone={Pause} />
• Search

  Lupa.

  Uso: Busca: botão de buscar e campo de busca. O botão diz "Buscar".

  Onde: em 5 peças · Busca: search, magnifying glass

  <Icone icone={Search} />
• Users

  Silhueta de duas pessoas lado a lado.

  Uso: Turma, grupo, vagas e modalidade presencial.

  Onde: em 5 peças · Busca: users, group, people

  <Icone icone={Users} />
• ChevronDown

  Ponta de seta apontando para baixo.

  Uso: Algo que abre para baixo: menu, seleção, acordeão recolhido.

  Onde: em 4 peças · Busca: chevron down, caret down, dropdown arrow

  <Icone icone={ChevronDown} />
• ChevronLeft

  Ponta de seta apontando para a esquerda.

  Uso: Anterior em carrossel e paginação; no Slider, um dos lados do polegar.

  Onde: em 4 peças · Busca: chevron left, caret left, previous

  <Icone icone={ChevronLeft} />
• Award

  Medalha com fita pendurada.

  Uso: Conquista, certificação e diferencial reconhecido da instituição.

  Onde: em 3 peças · Busca: award, medal, badge ribbon

  <Icone icone={Award} />
• Calendar

  Folha de calendário com argolas no topo.

  Uso: Data de início de turma, de evento ou prazo de matrícula.

  Onde: em 3 peças · Busca: calendar, date, schedule

  <Icone icone={Calendar} />
• Info

  Letra i dentro de um círculo.

  Uso: Informação neutra (Alert `info`) e dica de ajuda ao lado de um rótulo.

  Onde: em 3 peças · Busca: info circle, information

  <Icone icone={Info} />
• Linkedin

  Letras "in", a marca do LinkedIn.

  Uso: Link para o perfil no LinkedIn — da instituição ou de docente — com nome acessível.

  Onde: em 3 peças · Busca: linkedin logo, social media

  <Icone icone={Linkedin} />
• MapPin

  Alfinete de mapa.

  Uso: Endereço, unidade ou local de evento.

  Onde: em 3 peças · Busca: map pin, location, marker

  <Icone icone={MapPin} />
• Minus

  Traço horizontal.

  Uso: Recolher (acordeão aberto), diminuir quantidade e caixa de seleção parcialmente marcada.

  Onde: em 3 peças · Busca: minus, dash, remove

  <Icone icone={Minus} />
• Sparkles

  Três estrelas cintilantes de quatro pontas.

  Uso: Novidade ou destaque especial. Use pouco — vira ruído quando está em tudo.

  Onde: em 3 peças · Busca: sparkles, stars, new

  <Icone icone={Sparkles} />
• XCircle

  Letra X dentro de um círculo.

  Uso: 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".

  Onde: em 3 peças · Busca: x circle, error, cancel

  <Icone icone={XCircle} />
• Clock

  Relógio de ponteiros.

  Uso: Duração, carga horária ou horário de aula.

  Onde: em 2 peças · Busca: clock, time, duration

  <Icone icone={Clock} />
• Clock3

  Relógio de ponteiros marcando três horas.

  Uso: O mesmo do relógio comum — duração e horário. Existem os dois por acaso; prefira um só em peça nova.

  Onde: em 2 peças · Busca: clock, time, hours

  <Icone icone={Clock3} />
• Facebook

  Letra f minúscula, a marca do Facebook.

  Uso: Link para a página da instituição no Facebook — só em lista de redes sociais, com nome acessível.

  Onde: em 2 peças · Busca: facebook logo, social media

  <Icone icone={Facebook} />
• Instagram

  Câmera fotográfica quadrada de cantos arredondados, a marca do Instagram.

  Uso: Link para o perfil da instituição no Instagram — só em lista de redes sociais, com nome acessível.

  Onde: em 2 peças · Busca: instagram logo, social media

  <Icone icone={Instagram} />
• MessageCircle

  Balão de conversa redondo.

  Uso: Conversa, atendimento e chat — inclusive o botão de WhatsApp.

  Onde: em 2 peças · Busca: message circle, chat bubble, conversation

  <Icone icone={MessageCircle} />
• MoreHorizontal

  Três pontos em linha.

  Uso: 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.

  Onde: em 2 peças · Busca: more horizontal, ellipsis, dots

  <Icone icone={MoreHorizontal} />
• Plus

  Sinal de mais.

  Uso: Expandir (acordeão fechado), adicionar item ou aumentar quantidade.

  Onde: em 2 peças · Busca: plus, add

  <Icone icone={Plus} />
• Send

  Avião de papel.

  Uso: Enviar mensagem ou formulário curto (chat, newsletter).

  Onde: em 2 peças · Busca: send, paper plane, submit

  <Icone icone={Send} />
• Target

  Alvo de círculos concêntricos.

  Uso: Objetivo, foco e resultado de carreira.

  Onde: em 2 peças · Busca: target, goal, bullseye

  <Icone icone={Target} />
• Zap

  Raio.

  Uso: Rapidez: curso intensivo, trilha expressa, energia.

  Onde: em 2 peças · Busca: zap, lightning bolt, fast

  <Icone icone={Zap} />
• ArrowDown

  Seta para baixo.

  Uso: Cabeçalho de tabela ordenado do maior para o menor (Tabela, E110) — o `aria-sort` diz o mesmo a quem ouve.

  Onde: em 1 peça · Busca: arrow down, sort descending

  <Icone icone={ArrowDown} />
• ArrowLeft

  Seta reta apontando para a esquerda.

  Uso: Voltar à página anterior ou passar ao item anterior de uma sequência.

  Onde: em 1 peça · Busca: arrow left, back arrow

  <Icone icone={ArrowLeft} />
• ArrowUp

  Seta para cima.

  Uso: Cabeçalho de tabela ordenado do menor para o maior (Tabela, E110).

  Onde: em 1 peça · Busca: arrow up, sort ascending

  <Icone icone={ArrowUp} />
• Brain

  Cérebro visto de lado.

  Uso: Área de conhecimento de Psicologia, e temas de mente e aprendizagem.

  Onde: em 1 peça · Busca: brain, mind, neuroscience

  <Icone icone={Brain} />
• ChevronsUpDown

  Duas setas pequenas, uma para cima e outra para baixo.

  Uso: Cabeçalho de tabela que ordena, ainda sem ordem escolhida (Tabela, E110).

  Onde: em 1 peça · Busca: chevrons up down, sort, unsorted

  <Icone icone={ChevronsUpDown} />
• ExternalLink

  Quadrado com uma seta saindo pelo canto de cima.

  Uso: Link que abre em outra aba (Link com novaAba, E67) — sempre com "(abre em nova aba)" para quem ouve.

  Onde: em 1 peça · Busca: external link, new tab, open

  <Icone icone={ExternalLink} />
• Eye

  Olho aberto.

  Uso: Mostrar a senha digitada (Input com type="password", E60). O botão se chama "Mostrar senha", com aria-pressed.

  Onde: em 1 peça · Busca: eye, show, visible, password

  <Icone icone={Eye} />
• EyeOff

  Olho riscado.

  Uso: A senha está à mostra e o botão a esconde de novo — o par do Eye no mesmo botão.

  Onde: em 1 peça · Busca: eye off, hide, hidden, password

  <Icone icone={EyeOff} />
• Gavel

  Martelo de juiz.

  Uso: Área de conhecimento de Direito ou tema jurídico.

  Onde: em 1 peça · Busca: gavel, law, justice hammer

  <Icone icone={Gavel} />
• HeartPulse

  Coração com uma linha de batimento cruzando.

  Uso: Área de Saúde e temas de fisiologia e bem-estar.

  Onde: em 1 peça · Busca: heart pulse, health, heartbeat

  <Icone icone={HeartPulse} />
• History

  Relógio com uma seta girando para trás em volta.

  Uso: Histórico, trajetória da instituição ou tempo de mercado.

  Onde: em 1 peça · Busca: history, time back, rewind clock

  <Icone icone={History} />
• Home

  Casa com telhado.

  Uso: Link para a página inicial, primeiro item da trilha de navegação.

  Onde: em 1 peça · Busca: home, house

  <Icone icone={Home} />
• Inbox

  Bandeja de entrada vazia.

  Uso: Estado vazio (EstadoVazio, E111): o ícone padrão de lista ou caixa sem nada. Decorativo; o título diz o que falta.

  Onde: em 1 peça · Busca: inbox, tray, empty

  <Icone icone={Inbox} />
• Laptop

  Notebook aberto.

  Uso: Modalidade online de um curso.

  Onde: em 1 peça · Busca: laptop, notebook computer, online

  <Icone icone={Laptop} />
• Loader2

  Arco circular aberto, que gira.

  Uso: Carregando: dentro do botão com `isLoading`. Só gira com movimento liberado.

  Onde: em 1 peça · Busca: loader, spinner, loading

  <Icone icone={Loader2} />
• Mail

  Envelope fechado.

  Uso: E-mail de contato e campo de newsletter.

  Onde: em 1 peça · Busca: mail, envelope, email

  <Icone icone={Mail} />
• Menu

  Três linhas horizontais empilhadas.

  Uso: Abrir o menu de navegação no celular. O botão diz "Abrir menu".

  Onde: em 1 peça · Busca: menu, hamburger, bars

  <Icone icone={Menu} />
• Monitor

  Tela de computador sobre um pé.

  Uso: Estudo a distância e aula transmitida — em "Por que escolher a Phorte".

  Onde: em 1 peça · Busca: monitor, desktop screen, display

  <Icone icone={Monitor} />
• Phone

  Fone de telefone.

  Uso: Telefone de contato e central de atendimento.

  Onde: em 1 peça · Busca: phone, telephone, call

  <Icone icone={Phone} />
• PlayCircle

  Triângulo de reprodução dentro de um círculo.

  Uso: Botão grande sobre a capa de um vídeo, para começar a assistir.

  Onde: em 1 peça · Busca: play circle, video play

  <Icone icone={PlayCircle} />
• Quote

  Aspas grandes.

  Uso: Abertura de depoimento. É enfeite: o texto do depoimento já diz tudo.

  Onde: em 1 peça · Busca: quote, quotation marks, testimonial

  <Icone icone={Quote} />
• Shield

  Escudo liso.

  Uso: Segurança, proteção de dados e garantia.

  Onde: em 1 peça · Busca: shield, security, protection

  <Icone icone={Shield} />
• ShieldCheck

  Escudo com um sinal de visto.

  Uso: Selo de confiança: curso reconhecido pelo MEC, pagamento seguro.

  Onde: em 1 peça · Busca: shield check, verified, trusted

  <Icone icone={ShieldCheck} />
• Star

  Estrela de cinco pontas.

  Uso: Avaliação e nota (depoimentos) ou item favorito. Nota em estrelas precisa do número em texto.

  Onde: em 1 peça · Busca: star, rating, favorite

  <Icone icone={Star} />
• Terminal

  Janela de terminal com o sinal de comando.

  Uso: Área de conhecimento de Tecnologia da Informação.

  Onde: em 1 peça · Busca: terminal, command line, code

  <Icone icone={Terminal} />
• TrendingUp

  Linha de gráfico subindo com uma seta.

  Uso: Área de conhecimento de Gestão, e crescimento de carreira ou números em alta.

  Onde: em 1 peça · Busca: trending up, growth chart, increase

  <Icone icone={TrendingUp} />
• Twitter

  Pássaro, a marca antiga do Twitter.

  Uso: Link para o perfil no X (antigo Twitter). A marca mudou — vale trocar pelo X quando houver ícone próprio.

  Onde: em 1 peça · Busca: twitter logo, x logo, social media

  <Icone icone={Twitter} />
• User

  Silhueta de uma pessoa, da cabeça aos ombros.

  Uso: Conta, perfil, docente ou palestrante sem foto.

  Onde: em 1 peça · Busca: user, person, profile

  <Icone icone={User} />
• Video

  Câmera de vídeo.

  Uso: Aula ao vivo, transmissão ou conteúdo em vídeo.

  Onde: em 1 peça · Busca: video camera, live, streaming

  <Icone icone={Video} />

A biblioteca Lucide inteira

Para escolher um ícone novo: todos os da versão instalada, com busca. Os que já estão em uso levam o visto no canto. Escolheu? O cartão mostra o import e o uso pelo Icone — e o ícone novo precisa de descrição em descricoes-dos-icones.ts (o build cobra).

Ícones próprios da Phorte