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 |