bell ringing icon
bell-ringing-thin from Phosphor by Phosphor Icons · Thin · MIT Free for personal and commercial use.
- Name
- bell-ringing-thin
- Set
- Phosphor
- Style
- Thin
- Viewbox
- 256×256
- License
- MIT
5 other variants in Phosphor
The same icon in other sets
Related icons in Phosphor
Use the bell ringing icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M222.13 67.55a3.94 3.94 0 0 1-1.84.45a4 4 0 0 1-3.55-2.16a99.4 99.4 0 0 0-34.87-38.46a4 4 0 1 1 4.26-6.76a107.34 107.34 0 0 1 37.71 41.54a4 4 0 0 1-1.71 5.39M39.26 65.84a99.4 99.4 0 0 1 34.87-38.46a4 4 0 0 0-4.26-6.76a107.34 107.34 0 0 0-37.71 41.54a4 4 0 0 0 1.71 5.39a3.94 3.94 0 0 0 1.84.45a4 4 0 0 0 3.55-2.16M218.36 178A12 12 0 0 1 208 196h-44.23a36 36 0 0 1-71.54 0H48a12 12 0 0 1-10.36-18C47.17 161.56 52 139.37 52 112a76 76 0 0 1 152 0c0 27.36 4.83 49.55 14.36 66m-62.65 18h-55.42a28 28 0 0 0 55.42 0m55.73-14C201.19 164.34 196 140.79 196 112a68 68 0 0 0-136 0c0 28.8-5.19 52.34-15.44 70a4 4 0 0 0 0 4a3.89 3.89 0 0 0 3.44 2h160a3.89 3.89 0 0 0 3.43-2a4 4 0 0 0 .01-4"/></svg>
React
import type { SVGProps } from "react";
export function PhBellRingingThin(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M222.13 67.55a3.94 3.94 0 0 1-1.84.45a4 4 0 0 1-3.55-2.16a99.4 99.4 0 0 0-34.87-38.46a4 4 0 1 1 4.26-6.76a107.34 107.34 0 0 1 37.71 41.54a4 4 0 0 1-1.71 5.39M39.26 65.84a99.4 99.4 0 0 1 34.87-38.46a4 4 0 0 0-4.26-6.76a107.34 107.34 0 0 0-37.71 41.54a4 4 0 0 0 1.71 5.39a3.94 3.94 0 0 0 1.84.45a4 4 0 0 0 3.55-2.16M218.36 178A12 12 0 0 1 208 196h-44.23a36 36 0 0 1-71.54 0H48a12 12 0 0 1-10.36-18C47.17 161.56 52 139.37 52 112a76 76 0 0 1 152 0c0 27.36 4.83 49.55 14.36 66m-62.65 18h-55.42a28 28 0 0 0 55.42 0m55.73-14C201.19 164.34 196 140.79 196 112a68 68 0 0 0-136 0c0 28.8-5.19 52.34-15.44 70a4 4 0 0 0 0 4a3.89 3.89 0 0 0 3.44 2h160a3.89 3.89 0 0 0 3.43-2a4 4 0 0 0 .01-4"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M222.13 67.55a3.94 3.94 0 0 1-1.84.45a4 4 0 0 1-3.55-2.16a99.4 99.4 0 0 0-34.87-38.46a4 4 0 1 1 4.26-6.76a107.34 107.34 0 0 1 37.71 41.54a4 4 0 0 1-1.71 5.39M39.26 65.84a99.4 99.4 0 0 1 34.87-38.46a4 4 0 0 0-4.26-6.76a107.34 107.34 0 0 0-37.71 41.54a4 4 0 0 0 1.71 5.39a3.94 3.94 0 0 0 1.84.45a4 4 0 0 0 3.55-2.16M218.36 178A12 12 0 0 1 208 196h-44.23a36 36 0 0 1-71.54 0H48a12 12 0 0 1-10.36-18C47.17 161.56 52 139.37 52 112a76 76 0 0 1 152 0c0 27.36 4.83 49.55 14.36 66m-62.65 18h-55.42a28 28 0 0 0 55.42 0m55.73-14C201.19 164.34 196 140.79 196 112a68 68 0 0 0-136 0c0 28.8-5.19 52.34-15.44 70a4 4 0 0 0 0 4a3.89 3.89 0 0 0 3.44 2h160a3.89 3.89 0 0 0 3.43-2a4 4 0 0 0 .01-4"/></svg> </template>
CSS
.icon-bell-ringing-thin {
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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M222.13%2067.55a3.94%203.94%200%200%201-1.84.45a4%204%200%200%201-3.55-2.16a99.4%2099.4%200%200%200-34.87-38.46a4%204%200%201%201%204.26-6.76a107.34%20107.34%200%200%201%2037.71%2041.54a4%204%200%200%201-1.71%205.39M39.26%2065.84a99.4%2099.4%200%200%201%2034.87-38.46a4%204%200%200%200-4.26-6.76a107.34%20107.34%200%200%200-37.71%2041.54a4%204%200%200%200%201.71%205.39a3.94%203.94%200%200%200%201.84.45a4%204%200%200%200%203.55-2.16M218.36%20178A12%2012%200%200%201%20208%20196h-44.23a36%2036%200%200%201-71.54%200H48a12%2012%200%200%201-10.36-18C47.17%20161.56%2052%20139.37%2052%20112a76%2076%200%200%201%20152%200c0%2027.36%204.83%2049.55%2014.36%2066m-62.65%2018h-55.42a28%2028%200%200%200%2055.42%200m55.73-14C201.19%20164.34%20196%20140.79%20196%20112a68%2068%200%200%200-136%200c0%2028.8-5.19%2052.34-15.44%2070a4%204%200%200%200%200%204a3.89%203.89%200%200%200%203.44%202h160a3.89%203.89%200%200%200%203.43-2a4%204%200%200%200%20.01-4%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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M222.13%2067.55a3.94%203.94%200%200%201-1.84.45a4%204%200%200%201-3.55-2.16a99.4%2099.4%200%200%200-34.87-38.46a4%204%200%201%201%204.26-6.76a107.34%20107.34%200%200%201%2037.71%2041.54a4%204%200%200%201-1.71%205.39M39.26%2065.84a99.4%2099.4%200%200%201%2034.87-38.46a4%204%200%200%200-4.26-6.76a107.34%20107.34%200%200%200-37.71%2041.54a4%204%200%200%200%201.71%205.39a3.94%203.94%200%200%200%201.84.45a4%204%200%200%200%203.55-2.16M218.36%20178A12%2012%200%200%201%20208%20196h-44.23a36%2036%200%200%201-71.54%200H48a12%2012%200%200%201-10.36-18C47.17%20161.56%2052%20139.37%2052%20112a76%2076%200%200%201%20152%200c0%2027.36%204.83%2049.55%2014.36%2066m-62.65%2018h-55.42a28%2028%200%200%200%2055.42%200m55.73-14C201.19%20164.34%20196%20140.79%20196%20112a68%2068%200%200%200-136%200c0%2028.8-5.19%2052.34-15.44%2070a4%204%200%200%200%200%204a3.89%203.89%200%200%200%203.44%202h160a3.89%203.89%200%200%200%203.43-2a4%204%200%200%200%20.01-4%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/bell-ringing-thin.svg?color=%231a73e8&size=48