bell from Framework7 Icons by Vladimir Kharlampidi · Outline · MIT Free for personal and commercial use.

Name
bell
Set
Framework7 Icons
Style
Outline
Viewbox
56×56
License
MIT

1 other variant in Framework7 Icons

The same icon in other sets

Related icons in Framework7 Icons

Use the bell icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M9.426 43.75h23.601c-.164 3.164-2.203 5.18-5.015 5.18c-2.836 0-4.852-2.016-5.04-5.18h-3.656c.188 4.5 3.727 8.46 8.696 8.46c4.945 0 8.484-3.96 8.672-8.46h9.89c2.227 0 3.54-1.148 3.54-2.836c0-2.344-2.368-4.453-4.407-6.539c-1.547-1.617-1.969-4.945-2.133-7.64c-.187-9.235-2.554-15.212-8.812-17.462c-.774-3.046-3.305-5.484-6.75-5.484c-3.47 0-5.977 2.438-6.774 5.484c-6.234 2.25-8.625 8.227-8.789 17.461c-.187 2.696-.586 6.024-2.156 7.641c-2.016 2.086-4.406 4.195-4.406 6.54c0 1.687 1.336 2.835 3.539 2.835m1.031-3.54v-.28c.422-.703 1.805-2.063 3.047-3.446c1.664-1.875 2.46-4.875 2.672-9.468c.187-10.22 3.234-13.5 7.265-14.578c.586-.141.891-.446.914-1.032c.094-2.46 1.477-4.172 3.657-4.172c2.156 0 3.562 1.711 3.633 4.172c.023.586.351.89.937 1.031c4.008 1.079 7.055 4.36 7.266 14.579c.187 4.593.984 7.593 2.672 9.468c1.218 1.383 2.624 2.743 3.046 3.446v.28Z"/></svg>

React

import type { SVGProps } from "react";

export function F7Bell(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M9.426 43.75h23.601c-.164 3.164-2.203 5.18-5.015 5.18c-2.836 0-4.852-2.016-5.04-5.18h-3.656c.188 4.5 3.727 8.46 8.696 8.46c4.945 0 8.484-3.96 8.672-8.46h9.89c2.227 0 3.54-1.148 3.54-2.836c0-2.344-2.368-4.453-4.407-6.539c-1.547-1.617-1.969-4.945-2.133-7.64c-.187-9.235-2.554-15.212-8.812-17.462c-.774-3.046-3.305-5.484-6.75-5.484c-3.47 0-5.977 2.438-6.774 5.484c-6.234 2.25-8.625 8.227-8.789 17.461c-.187 2.696-.586 6.024-2.156 7.641c-2.016 2.086-4.406 4.195-4.406 6.54c0 1.687 1.336 2.835 3.539 2.835m1.031-3.54v-.28c.422-.703 1.805-2.063 3.047-3.446c1.664-1.875 2.46-4.875 2.672-9.468c.187-10.22 3.234-13.5 7.265-14.578c.586-.141.891-.446.914-1.032c.094-2.46 1.477-4.172 3.657-4.172c2.156 0 3.562 1.711 3.633 4.172c.023.586.351.89.937 1.031c4.008 1.079 7.055 4.36 7.266 14.579c.187 4.593.984 7.593 2.672 9.468c1.218 1.383 2.624 2.743 3.046 3.446v.28Z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M9.426 43.75h23.601c-.164 3.164-2.203 5.18-5.015 5.18c-2.836 0-4.852-2.016-5.04-5.18h-3.656c.188 4.5 3.727 8.46 8.696 8.46c4.945 0 8.484-3.96 8.672-8.46h9.89c2.227 0 3.54-1.148 3.54-2.836c0-2.344-2.368-4.453-4.407-6.539c-1.547-1.617-1.969-4.945-2.133-7.64c-.187-9.235-2.554-15.212-8.812-17.462c-.774-3.046-3.305-5.484-6.75-5.484c-3.47 0-5.977 2.438-6.774 5.484c-6.234 2.25-8.625 8.227-8.789 17.461c-.187 2.696-.586 6.024-2.156 7.641c-2.016 2.086-4.406 4.195-4.406 6.54c0 1.687 1.336 2.835 3.539 2.835m1.031-3.54v-.28c.422-.703 1.805-2.063 3.047-3.446c1.664-1.875 2.46-4.875 2.672-9.468c.187-10.22 3.234-13.5 7.265-14.578c.586-.141.891-.446.914-1.032c.094-2.46 1.477-4.172 3.657-4.172c2.156 0 3.562 1.711 3.633 4.172c.023.586.351.89.937 1.031c4.008 1.079 7.055 4.36 7.266 14.579c.187 4.593.984 7.593 2.672 9.468c1.218 1.383 2.624 2.743 3.046 3.446v.28Z"/></svg>
</template>

CSS

.icon-bell {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2056%2056%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M9.426%2043.75h23.601c-.164%203.164-2.203%205.18-5.015%205.18c-2.836%200-4.852-2.016-5.04-5.18h-3.656c.188%204.5%203.727%208.46%208.696%208.46c4.945%200%208.484-3.96%208.672-8.46h9.89c2.227%200%203.54-1.148%203.54-2.836c0-2.344-2.368-4.453-4.407-6.539c-1.547-1.617-1.969-4.945-2.133-7.64c-.187-9.235-2.554-15.212-8.812-17.462c-.774-3.046-3.305-5.484-6.75-5.484c-3.47%200-5.977%202.438-6.774%205.484c-6.234%202.25-8.625%208.227-8.789%2017.461c-.187%202.696-.586%206.024-2.156%207.641c-2.016%202.086-4.406%204.195-4.406%206.54c0%201.687%201.336%202.835%203.539%202.835m1.031-3.54v-.28c.422-.703%201.805-2.063%203.047-3.446c1.664-1.875%202.46-4.875%202.672-9.468c.187-10.22%203.234-13.5%207.265-14.578c.586-.141.891-.446.914-1.032c.094-2.46%201.477-4.172%203.657-4.172c2.156%200%203.562%201.711%203.633%204.172c.023.586.351.89.937%201.031c4.008%201.079%207.055%204.36%207.266%2014.579c.187%204.593.984%207.593%202.672%209.468c1.218%201.383%202.624%202.743%203.046%203.446v.28Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2056%2056%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M9.426%2043.75h23.601c-.164%203.164-2.203%205.18-5.015%205.18c-2.836%200-4.852-2.016-5.04-5.18h-3.656c.188%204.5%203.727%208.46%208.696%208.46c4.945%200%208.484-3.96%208.672-8.46h9.89c2.227%200%203.54-1.148%203.54-2.836c0-2.344-2.368-4.453-4.407-6.539c-1.547-1.617-1.969-4.945-2.133-7.64c-.187-9.235-2.554-15.212-8.812-17.462c-.774-3.046-3.305-5.484-6.75-5.484c-3.47%200-5.977%202.438-6.774%205.484c-6.234%202.25-8.625%208.227-8.789%2017.461c-.187%202.696-.586%206.024-2.156%207.641c-2.016%202.086-4.406%204.195-4.406%206.54c0%201.687%201.336%202.835%203.539%202.835m1.031-3.54v-.28c.422-.703%201.805-2.063%203.047-3.446c1.664-1.875%202.46-4.875%202.672-9.468c.187-10.22%203.234-13.5%207.265-14.578c.586-.141.891-.446.914-1.032c.094-2.46%201.477-4.172%203.657-4.172c2.156%200%203.562%201.711%203.633%204.172c.023.586.351.89.937%201.031c4.008%201.079%207.055%204.36%207.266%2014.579c.187%204.593.984%207.593%202.672%209.468c1.218%201.383%202.624%202.743%203.046%203.446v.28Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/f7/bell.svg?color=%231a73e8&size=48