BaseIcon

Mostra um ícone do Bootstrap Icons no tamanho certo da escala. Por padrão é decorativo; com label, passa a ter significado para o leitor de tela.

Uso

• Use o ícone ao lado de um texto para ajudar a reconhecer a ação ou o item. Ele reforça o texto, não o substitui.
• Ícone sozinho só quando o significado é universal (busca, fechar, editar). Nesse caso, dê label, ou use BaseButton com icon-only se ele dispara uma ação.
• Passe o nome do Bootstrap Icons sem o prefixo bi-: name="trash", não name="bi-trash".
• O ícone herda a cor do texto ao redor. Para mudar a cor ou o tamanho, mude a cor do elemento pai ou passe uma classe sua no BaseIcon: qualquer classe vence o estilo padrão.
• Dentro de BaseButton e BaseInput, use a propriedade icon ou icon-start deles: o componente já escolhe o tamanho.

Anatomia

1. Símbolo: o desenho do Bootstrap Icons escolhido em name, com 16, 20 ou 24 px conforme size, na cor do texto em volta.

O label não aparece na tela: é o nome que o leitor de tela ouve.

Tamanhos

Pequeno · 16 px Médio · 20 px Grande · 24 px

Tamanho	Quando
sm (16 px)	Botões, campos, tabelas, itens do menu lateral, rótulo de indicador e texto corrido de 14 a 16 px
md (20 px)	Título de cartão e alertas
lg (24 px)	Estados vazios

Qual ícone usar para cada assunto, e o tamanho de cada lugar da tela, estão na página Ícones.

Decorativo ou com significado

Vitória, ES

No primeiro, o texto ao lado já diz tudo e o ícone fica escondido do leitor de tela. No segundo, o ícone está sozinho, o símbolo é universal e o label diz o que ele significa.

O label só chega a quem usa leitor de tela. Um ícone sozinho que não é universal, como um cadeado para "contrato bloqueado", precisa de texto visível ao lado ou de um BaseButton icon-only, que mostra a dica ao passar o mouse.

Faça e não faça

Faça	Não faça
Use o ícone junto de um texto que já diz o que é, como "Medições" no menu.	Use um ícone sozinho que só faz sentido dentro do sistema, como um cadeado para "contrato bloqueado".
Dê label ao ícone que aparece sozinho e diz algo, como "Concluído".	Dê label a um ícone que repete o texto ao lado: o leitor de tela leria a mesma coisa duas vezes.
Para uma ação, use BaseButton com icon ou icon-only.	Ponha um clique no BaseIcon: ele não recebe foco nem responde ao teclado.

Todos os ícones

A lista vem do pacote bootstrap-icons instalado, então acompanha a versão do pacote. Os nomes são em inglês, como no site do Bootstrap Icons. Cada ícone é uma parada do Tab; para passar direto pela lista, use o link "Pular a lista de ícones", que aparece ao receber o foco logo antes dela.

Buscar ícone

2.078 ícones

Clique num ícone para copiar o nome dele.

Pular a lista de ícones

Estilo

Propriedade	Token
Tamanho	--tj-icon-sm/md/lg (16, 20, 24 px)
Cor	Herda a cor do texto (currentColor); nos componentes, --tj-icon-primary, --tj-icon-secondary ou --tj-icon-interactive

Código

<BaseIcon name="calendar3" size="sm" />
<BaseIcon name="check-circle-fill" label="Concluído" />

Propriedades

Propriedade	Tipo	Padrão	Descrição
name	string	obrigatória	Nome do ícone do Bootstrap Icons, sem bi-
size	'sm' | 'md' | 'lg'	'md'	16, 20 ou 24 px
label	string	—	Nome acessível; sem ele o ícone é decorativo

Sem eventos. O ícone não é interativo: para uma ação, use BaseButton.

Acessibilidade

• Não há padrão do WAI-ARIA APG para ícone. Com label, ele segue o papel img da especificação WAI-ARIA.
• Sem label, o ícone recebe aria-hidden="true" e o leitor de tela pula.
• Com label, recebe role="img" e aria-label, e o leitor de tela anuncia o nome como imagem.
• O ícone nunca é o único jeito de passar uma informação: situação também vai em texto, como no BaseBadge.
• Não recebe foco nem entra na ordem do Tab, porque não é interativo.
• A cor vem do texto ao redor, então segue o tema claro, o escuro e o modo de alto contraste do sistema.
• Testado com axe com label dentro de um parágrafo e decorativo dentro de um BaseButton icon-only. label vazio ou só com espaços mantém o ícone decorativo.