alarm icon
alarm-sharp from IonIcons by Ben Sperry · Sharp · MIT Free for personal and commercial use.
- Name
- alarm-sharp
- Set
- IonIcons
- Style
- Sharp
- Viewbox
- 512×512
- License
- MIT
2 other variants in IonIcons
The same icon in other sets
Use the alarm icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="m403.79 64.11l-3.27-.1H400c-14.73 0-28.55 5.91-40.52 15S344 96 344 96l88 86s11.25-5.71 17.61-13.85s14.28-18.08 14.32-37.11c.07-35.49-26.33-64.89-60.14-66.93m-295.58 0l3.27-.1h.52c14.73 0 28.55 5.91 40.52 15S168 96 168 96l-88 86s-11.25-5.71-17.61-13.85S48.11 150.07 48.07 131C48 95.55 74.4 66.15 108.21 64.11"/><path fill="currentColor" d="M391.3 384.6a.06.06 0 0 1 0-.08C425 344 441 288.24 427 229.23c-13.64-57.52-72.67-115.69-130.34-128.66C182 74.79 80.07 161.71 80.07 272a175.15 175.15 0 0 0 40.78 112.52a.06.06 0 0 1 0 .08L73 432a.06.06 0 0 0 0 .08l23 22.51a.06.06 0 0 0 .08 0l47.43-47.37a.06.06 0 0 1 .08 0a175.64 175.64 0 0 0 225.05 0h.07L416 454.59a.06.06 0 0 0 .08 0L440 432ZM272.07 288H160v-31.9l.05-.05h80V144h32Z"/></svg>
React
import type { SVGProps } from "react";
export function IonAlarmSharp(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="m403.79 64.11l-3.27-.1H400c-14.73 0-28.55 5.91-40.52 15S344 96 344 96l88 86s11.25-5.71 17.61-13.85s14.28-18.08 14.32-37.11c.07-35.49-26.33-64.89-60.14-66.93m-295.58 0l3.27-.1h.52c14.73 0 28.55 5.91 40.52 15S168 96 168 96l-88 86s-11.25-5.71-17.61-13.85S48.11 150.07 48.07 131C48 95.55 74.4 66.15 108.21 64.11"/><path fill="currentColor" d="M391.3 384.6a.06.06 0 0 1 0-.08C425 344 441 288.24 427 229.23c-13.64-57.52-72.67-115.69-130.34-128.66C182 74.79 80.07 161.71 80.07 272a175.15 175.15 0 0 0 40.78 112.52a.06.06 0 0 1 0 .08L73 432a.06.06 0 0 0 0 .08l23 22.51a.06.06 0 0 0 .08 0l47.43-47.37a.06.06 0 0 1 .08 0a175.64 175.64 0 0 0 225.05 0h.07L416 454.59a.06.06 0 0 0 .08 0L440 432ZM272.07 288H160v-31.9l.05-.05h80V144h32Z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="m403.79 64.11l-3.27-.1H400c-14.73 0-28.55 5.91-40.52 15S344 96 344 96l88 86s11.25-5.71 17.61-13.85s14.28-18.08 14.32-37.11c.07-35.49-26.33-64.89-60.14-66.93m-295.58 0l3.27-.1h.52c14.73 0 28.55 5.91 40.52 15S168 96 168 96l-88 86s-11.25-5.71-17.61-13.85S48.11 150.07 48.07 131C48 95.55 74.4 66.15 108.21 64.11"/><path fill="currentColor" d="M391.3 384.6a.06.06 0 0 1 0-.08C425 344 441 288.24 427 229.23c-13.64-57.52-72.67-115.69-130.34-128.66C182 74.79 80.07 161.71 80.07 272a175.15 175.15 0 0 0 40.78 112.52a.06.06 0 0 1 0 .08L73 432a.06.06 0 0 0 0 .08l23 22.51a.06.06 0 0 0 .08 0l47.43-47.37a.06.06 0 0 1 .08 0a175.64 175.64 0 0 0 225.05 0h.07L416 454.59a.06.06 0 0 0 .08 0L440 432ZM272.07 288H160v-31.9l.05-.05h80V144h32Z"/></svg> </template>
CSS
.icon-alarm-sharp {
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%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m403.79%2064.11l-3.27-.1H400c-14.73%200-28.55%205.91-40.52%2015S344%2096%20344%2096l88%2086s11.25-5.71%2017.61-13.85s14.28-18.08%2014.32-37.11c.07-35.49-26.33-64.89-60.14-66.93m-295.58%200l3.27-.1h.52c14.73%200%2028.55%205.91%2040.52%2015S168%2096%20168%2096l-88%2086s-11.25-5.71-17.61-13.85S48.11%20150.07%2048.07%20131C48%2095.55%2074.4%2066.15%20108.21%2064.11%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M391.3%20384.6a.06.06%200%200%201%200-.08C425%20344%20441%20288.24%20427%20229.23c-13.64-57.52-72.67-115.69-130.34-128.66C182%2074.79%2080.07%20161.71%2080.07%20272a175.15%20175.15%200%200%200%2040.78%20112.52a.06.06%200%200%201%200%20.08L73%20432a.06.06%200%200%200%200%20.08l23%2022.51a.06.06%200%200%200%20.08%200l47.43-47.37a.06.06%200%200%201%20.08%200a175.64%20175.64%200%200%200%20225.05%200h.07L416%20454.59a.06.06%200%200%200%20.08%200L440%20432ZM272.07%20288H160v-31.9l.05-.05h80V144h32Z%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%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m403.79%2064.11l-3.27-.1H400c-14.73%200-28.55%205.91-40.52%2015S344%2096%20344%2096l88%2086s11.25-5.71%2017.61-13.85s14.28-18.08%2014.32-37.11c.07-35.49-26.33-64.89-60.14-66.93m-295.58%200l3.27-.1h.52c14.73%200%2028.55%205.91%2040.52%2015S168%2096%20168%2096l-88%2086s-11.25-5.71-17.61-13.85S48.11%20150.07%2048.07%20131C48%2095.55%2074.4%2066.15%20108.21%2064.11%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M391.3%20384.6a.06.06%200%200%201%200-.08C425%20344%20441%20288.24%20427%20229.23c-13.64-57.52-72.67-115.69-130.34-128.66C182%2074.79%2080.07%20161.71%2080.07%20272a175.15%20175.15%200%200%200%2040.78%20112.52a.06.06%200%200%201%200%20.08L73%20432a.06.06%200%200%200%200%20.08l23%2022.51a.06.06%200%200%200%20.08%200l47.43-47.37a.06.06%200%200%201%20.08%200a175.64%20175.64%200%200%200%20225.05%200h.07L416%20454.59a.06.06%200%200%200%20.08%200L440%20432ZM272.07%20288H160v-31.9l.05-.05h80V144h32Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ion/alarm-sharp.svg?color=%231a73e8&size=48
