devpack
EnglishEspañolPortuguêsBahasa IndonesiaFrançaisРусскийDeutschTiếng Việt

Ícones de Sino Gratuitos (SVG)

48 ícones de sino gratuitos de conjuntos de código aberto. Clique em um para mudar tamanho, cor e traço, e copie como SVG, JSX, data URI ou CSS.

Atualizado em

bell
Lucidebell
Tablerbell
Heroiconsbell
Phosphorbell
Bootstrap Iconsbell
Iconoirbell
Material Design Iconsbell-dot
Lucidebell-filled
Tablerbell-16-solid
Heroiconsbell-bold
Phosphorbell-fill
Bootstrap Iconsbell-off
Iconoirbell-outline
Material Design Iconsbell-off
Lucidebell-x
Tablerbell-20-solid
Heroiconsbell-duotone
Phosphorbell-slash
Bootstrap Iconsbell-cog
Material Design Iconsbell-plus
Lucidebell-x-filled
Tablerbell-solid
Heroiconsbell-fill
Phosphorbell-slash-fill
Bootstrap Iconsbell-cog-outline
Material Design Iconsbell-ring
Lucidebell-z
Tablerbell-alert
Heroiconsbell-light
Phosphorbell-off
Material Design Iconsbell-check
Lucidebell-z-filled
Tablerbell-alert-16-solid
Heroiconsbell-thin
Phosphorbell-off-outline
Material Design Iconsbell-minus
Lucidebell-up
Tablerbell-alert-20-solid
Heroiconsbell-z
Phosphorbell-plus
Material Design Iconsbell-cog
Tablerbell-alert-solid
Heroiconsbell-z-bold
Phosphorbell-plus-outline
Material Design Iconsbell-off
Tablerbell-slash
Heroiconsbell-z-duotone
Phosphor

Como usar ícones de sino

Um sino abre notificações, geralmente com um ponto ou um contador para itens não lidos.

Todos os ícones aqui seguem currentColor, então assumem a cor do texto do elemento em que estão. Um mesmo SVG funciona em fundos claros e escuros, em links e em botões. Defina um width e um height explícitos (ou dimensione-os no CSS com 1em) para que o layout não mude enquanto a página carrega.

Ícones acessíveis

Se o ícone for decorativo ou estiver ao lado de um texto visível, adicione aria-hidden="true". Se ele for o único conteúdo de um botão ou link, dê a esse elemento um aria-label, como “Sino”.

Licenças

Estes ícones de sino vêm de Lucide, Tabler, Heroicons, Phosphor, Bootstrap Icons, Iconoir e Material Design Icons. São conjuntos de código aberto sob licenças MIT, ISC ou Apache 2.0, que permitem uso pessoal e comercial. Precisa de outra coisa? Pesquise em todos os mais de 70.000 ícones no SVG Icon Finder.

Perguntas frequentes

Esses ícones de sino são gratuitos para uso comercial?
Sim. Eles vêm de conjuntos de ícones de código aberto sob licenças MIT, ISC ou Apache 2.0, que permitem uso comercial. Mantenha o aviso de licença se você redistribuir os próprios arquivos de ícone.
Como mudo a cor de um ícone de sino?
Os SVGs usam currentColor, então defina a cor CSS do elemento pai. Como alternativa, abra o ícone no buscador e escolha uma cor fixa antes de copiar.
Posso usar esses ícones no Webflow ou no React?
Sim. Abra um ícone e use Copiar para Webflow (cola um Code Embed) ou Copiar JSX para um componente React.