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:
|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|
|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|