alarm icon
alarm-outline from IonIcons by Ben Sperry · Outline · MIT Free for personal and commercial use.
- Name
- alarm-outline
- Set
- IonIcons
- Style
- Outline
- Viewbox
- 512×512
- License
- MIT
2 other variants in IonIcons
The same icon in other sets
alarmAkar IconsalarmBootstrap IconsalarmBoxIcons v2alarmBoxIcons v2 SolidalarmCarbonalarmFramework7 Iconsalarmcss.ggalarmIconParkalarmIconPark OutlinealarmIconPark SolidalarmIconPark TwoTonealarmIconoiralarmMaterial SymbolsalarmMaterial Symbols LightalarmMaterial Design IconsalarmPhosphoralarm-fillRemix Iconalarm-boldSolaralarmTabler IconsalarmTDesign Iconsalarm-outlineTeenyicons
Use the alarm icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32" d="M416.07 272a160 160 0 1 0-160 160a160 160 0 0 0 160-160ZM142.12 91.21A46.67 46.67 0 0 0 112 80l-2.79.08C83.66 81.62 64 104 64.07 131c0 13.21 4.66 19.37 10.88 27.23a4.55 4.55 0 0 0 3.24 1.77h.88a3.23 3.23 0 0 0 2.54-1.31L142.38 99a5.38 5.38 0 0 0 1.55-4a5.26 5.26 0 0 0-1.81-3.79Zm227.76 0A46.67 46.67 0 0 1 400 80l2.79.08C428.34 81.62 448 104 447.93 131c0 13.21-4.66 19.37-10.88 27.23a4.55 4.55 0 0 1-3.24 1.76h-.88a3.23 3.23 0 0 1-2.54-1.31L369.62 99a5.38 5.38 0 0 1-1.55-4a5.26 5.26 0 0 1 1.81-3.79Z"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M256.07 160v112h-80m240 160l-40-40m-280 40l40-40"/></svg>
React
import type { SVGProps } from "react";
export function IonAlarmOutline(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" strokeMiterlimit="10" strokeWidth="32" d="M416.07 272a160 160 0 1 0-160 160a160 160 0 0 0 160-160ZM142.12 91.21A46.67 46.67 0 0 0 112 80l-2.79.08C83.66 81.62 64 104 64.07 131c0 13.21 4.66 19.37 10.88 27.23a4.55 4.55 0 0 0 3.24 1.77h.88a3.23 3.23 0 0 0 2.54-1.31L142.38 99a5.38 5.38 0 0 0 1.55-4a5.26 5.26 0 0 0-1.81-3.79Zm227.76 0A46.67 46.67 0 0 1 400 80l2.79.08C428.34 81.62 448 104 447.93 131c0 13.21-4.66 19.37-10.88 27.23a4.55 4.55 0 0 1-3.24 1.76h-.88a3.23 3.23 0 0 1-2.54-1.31L369.62 99a5.38 5.38 0 0 1-1.55-4a5.26 5.26 0 0 1 1.81-3.79Z"/><path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="32" d="M256.07 160v112h-80m240 160l-40-40m-280 40l40-40"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32" d="M416.07 272a160 160 0 1 0-160 160a160 160 0 0 0 160-160ZM142.12 91.21A46.67 46.67 0 0 0 112 80l-2.79.08C83.66 81.62 64 104 64.07 131c0 13.21 4.66 19.37 10.88 27.23a4.55 4.55 0 0 0 3.24 1.77h.88a3.23 3.23 0 0 0 2.54-1.31L142.38 99a5.38 5.38 0 0 0 1.55-4a5.26 5.26 0 0 0-1.81-3.79Zm227.76 0A46.67 46.67 0 0 1 400 80l2.79.08C428.34 81.62 448 104 447.93 131c0 13.21-4.66 19.37-10.88 27.23a4.55 4.55 0 0 1-3.24 1.76h-.88a3.23 3.23 0 0 1-2.54-1.31L369.62 99a5.38 5.38 0 0 1-1.55-4a5.26 5.26 0 0 1 1.81-3.79Z"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M256.07 160v112h-80m240 160l-40-40m-280 40l40-40"/></svg> </template>
CSS
.icon-alarm-outline {
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%22none%22%20stroke%3D%22currentColor%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%2232%22%20d%3D%22M416.07%20272a160%20160%200%201%200-160%20160a160%20160%200%200%200%20160-160ZM142.12%2091.21A46.67%2046.67%200%200%200%20112%2080l-2.79.08C83.66%2081.62%2064%20104%2064.07%20131c0%2013.21%204.66%2019.37%2010.88%2027.23a4.55%204.55%200%200%200%203.24%201.77h.88a3.23%203.23%200%200%200%202.54-1.31L142.38%2099a5.38%205.38%200%200%200%201.55-4a5.26%205.26%200%200%200-1.81-3.79Zm227.76%200A46.67%2046.67%200%200%201%20400%2080l2.79.08C428.34%2081.62%20448%20104%20447.93%20131c0%2013.21-4.66%2019.37-10.88%2027.23a4.55%204.55%200%200%201-3.24%201.76h-.88a3.23%203.23%200%200%201-2.54-1.31L369.62%2099a5.38%205.38%200%200%201-1.55-4a5.26%205.26%200%200%201%201.81-3.79Z%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%2232%22%20d%3D%22M256.07%20160v112h-80m240%20160l-40-40m-280%2040l40-40%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%22none%22%20stroke%3D%22currentColor%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%2232%22%20d%3D%22M416.07%20272a160%20160%200%201%200-160%20160a160%20160%200%200%200%20160-160ZM142.12%2091.21A46.67%2046.67%200%200%200%20112%2080l-2.79.08C83.66%2081.62%2064%20104%2064.07%20131c0%2013.21%204.66%2019.37%2010.88%2027.23a4.55%204.55%200%200%200%203.24%201.77h.88a3.23%203.23%200%200%200%202.54-1.31L142.38%2099a5.38%205.38%200%200%200%201.55-4a5.26%205.26%200%200%200-1.81-3.79Zm227.76%200A46.67%2046.67%200%200%201%20400%2080l2.79.08C428.34%2081.62%20448%20104%20447.93%20131c0%2013.21-4.66%2019.37-10.88%2027.23a4.55%204.55%200%200%201-3.24%201.76h-.88a3.23%203.23%200%200%201-2.54-1.31L369.62%2099a5.38%205.38%200%200%201-1.55-4a5.26%205.26%200%200%201%201.81-3.79Z%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%2232%22%20d%3D%22M256.07%20160v112h-80m240%20160l-40-40m-280%2040l40-40%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ion/alarm-outline.svg?color=%231a73e8&size=48
