Bootstrap Icons

O Bootstrap Icons é um conjunto de código aberto com mais de 2.000 ícones, da equipe do Bootstrap. Não é preciso usar o framework: os ícones são arquivos SVG comuns, que funcionam em qualquer projeto.

Abrir este conjunto no Icon Library

Outros conjuntos: Lucide · Feather · Emoji

Uma amostra do conjunto

• house
• search
• gear
• person
• people
• envelope
• bell
• calendar
• camera
• image
• file-earmark
• folder
• download
• upload
• share
• link
• trash
• pencil
• plus-lg
• check-lg
• x-lg
• list
• arrow-right
• arrow-left
• chevron-down
• star
• heart
• cart
• credit-card
• globe
• geo-alt
• telephone
• chat
• lock
• eye
• clock
• sun
• moon
• code-slash
• terminal
• database
• cloud
• rocket
• bookmark
• funnel
• star-fill
• heart-fill

Versões de contorno e preenchidas

Essa é a principal diferença em relação ao Lucide e ao Feather. Muitos ícones vêm em pares, como star e star-fill, o que serve bem para estados como "não favoritado" e "favoritado". As formas são áreas preenchidas numa grade de 16×16, em vez de linhas, então ficam nítidas em tamanhos pequenos.

Uma consequência: como não há traço para ajustar, stroke-width não deixa esses ícones mais leves. A cor funciona por fill, usando currentColor.

Licença

O Bootstrap Icons usa a licença MIT: dá para usar e modificar os ícones em projetos pessoais e comerciais. Mantenha o aviso de licença ao redistribuir o pacote.

SVG ou fonte de ícones?

O conjunto oferece os dois. A fonte é rápida de configurar:

npm install bootstrap-icons

    <link rel="stylesheet" href="bootstrap-icons/font/bootstrap-icons.min.css">
    <i class="bi bi-search" aria-hidden="true"></i>

Em troca, a fonte carrega todos os ícones, mesmo que você use dez. Se precisa de poucos, colar o SVG não carrega nada a mais. Também evita o instante em que a fonte ainda não carregou e o ícone não aparece.

Quando escolher

• Você já usa Bootstrap: o visual combina com os componentes.
• Você precisa de muitos assuntos: a variedade é grande, inclusive de marcas.
• Você precisa de estados preenchidos: os pares já estão desenhados.

Para um visual leve, de linhas, o Lucide tende a combinar melhor. Evite misturar os dois na mesma tela, porque formas preenchidas de 16×16 e linhas de 24×24 têm pesos visuais diferentes.

Ícones de marcas

O conjunto inclui logotipos de empresas e produtos. A licença MIT cobre os arquivos, mas não dá direitos sobre as marcas mostradas, então siga as orientações de cada uma.