Articles › Permission Ui Ux, Web Push Notifications

Bell icon for push notifications and subscribe button

  • # web-notifications

Are you looking for a bell icon to represent push notifications or to create a subscribe button on your website?

There are many free and open source resources where you can get an high-quality bell icon, in different formats, without the need to draw it manually.

The icon can be useful for example to create a button to subscribe to push notifications:

  • you can use the icon alone (🔔)
  • you can create a button with text and icon (🔔 Subscribe)

There are many alternative formats that you can use to display a bell icon on your website, for example:

  • Unicode and emoji: these characters are supported by all major OS / browsers and you can use them directly as normal text, without the need to get the icons from an external library
  • PNG images: PNG is the image format traditionally used for icons
  • SVG images: vector graphics are lightweight and can scale easily to any size without loosing quality
  • CSS: some artists can create simple drawings and icons using only CSS
  • Fonts: some icon packs, like FontAwesome, are usually imported as fonts (e.g. woff2 or other font packaging formats)
  • Components: some libraries also offer the icons as Web Components, React components or Vue.js components for simplicity
  • Combined solutions (e.g. CSS + Font) or other solutions (e.g. Base64 PNG).

The following table is a list of high-quality icon packs that include a "bell" icon or a "notifications" icon.

If you are looking for a bell icon for a button or for any other UI component, you will certainly find an icon that you like in the following resources:

Name License Icons Format
Unicode N/A Bell (🔔), Bell with slash (🔕) Unicode character, HTML entity
FontAwesome MIT, CC BY bell, bells, bell-on, bell-plus, bell-slash SVG, Font, CSS + Font, Component
Heroicons MIT bell SVG, Component
Google Material Icons Apache license Notifications, Notifications Active, Circle Notifications, Notifications Off, Notification Add, Add Alert, Edit Notifications, Notification Important, Notifications Paused, more Font, SVG, PNG
Bootstrap Icons MIT bell, bell-slash SVG, Font
Ionicons MIT notifications, notifications-circle, notifications-off, notifications-off-circle SVG, Component
Feather icons MIT bell, bell-off SVG
css.gg MIT Bell CSS, SVG, Component
Flaticon Attribution, Commercial Hundreds of "bell" icons SVG, PNG
Icons8 Attribution, Commercial Hundreds of "bell" icons SVG, PNG, Base64
Pixabay Pixabay License, No Attribution Some illustrations of bells PNG, SVG