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

Бесплатные иконки колокольчика (SVG)

48 бесплатных иконок колокольчика из открытых наборов — нажмите на любую, чтобы изменить размер, цвет и толщину линии, и скопируйте её как SVG, JSX, data URI или CSS.

Обновлено

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

Использование иконок колокольчика

Колокольчик обычно открывает уведомления, часто с точкой или счётчиком непрочитанных элементов.

Все иконки здесь следуют currentColor, поэтому они наследуют цвет текста того элемента, в котором находятся: одна SVG работает и на светлом, и на тёмном фоне, в ссылках и кнопках. Задайте явные width и height (или зададьте размер в CSS через 1em), чтобы верстка не смещалась во время загрузки страницы.

Доступность иконок

Если иконка декоративная или стоит рядом с видимым текстом, добавьте aria-hidden="true". Если она — единственное содержимое кнопки или ссылки, укажите этому элементу aria-label, например «Колокольчик».

Лицензии

Эти иконки колокольчика взяты из наборов Lucide, Tabler, Heroicons, Phosphor, Bootstrap Icons, Iconoir, Material Design Icons — открытых наборов под лицензиями MIT, ISC или Apache 2.0, которые разрешают личное и коммерческое использование. Нужно что-то другое? Ищите среди всех 70 000+ иконок в SVG Icon Finder.

Часто задаваемые вопросы

Можно ли использовать эти иконки колокольчика в коммерческих проектах бесплатно?
Да. Они взяты из открытых наборов иконок под лицензиями MIT, ISC или Apache 2.0, которые разрешают коммерческое использование. Сохраняйте уведомление о лицензии, если перераспространяете сами файлы иконок.
Как изменить цвет иконки колокольчика?
В SVG используется currentColor, поэтому задайте CSS-свойство color для родительского элемента — или откройте иконку в поиске и выберите фиксированный цвет перед копированием.
Можно ли использовать эти иконки в Webflow или React?
Да. Откройте иконку и используйте «Copy to Webflow» (вставит Code Embed) или «Copy JSX» для React-компонента.