weather sunny alert icon

weather-sunny-alert from Material Design Icons by Pictogrammers · Filled · Alert / Error · Apache-2.0 Free for personal and commercial use.

Name: weather-sunny-alert
Set: Material Design Icons
Style: Filled
Category: Alert / Error
Viewbox: 24×24
License: Apache 2.0
Aliases: heat-advisory, heat-alert, sun-advisory

Use the weather sunny alert icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 7a5 5 0 0 0-5 5a5 5 0 0 0 5 5a5 5 0 0 0 5-5a5 5 0 0 0-5-5m0 8a3 3 0 0 1-3-3a3 3 0 0 1 3-3a3 3 0 0 1 3 3a3 3 0 0 1-3 3m0-13l2.39 3.42C13.65 5.15 12.84 5 12 5s-1.65.15-2.39.42zM3.34 7l4.16-.35A7.2 7.2 0 0 0 5.94 8.5c-.44.74-.69 1.5-.83 2.29zm.02 10l1.76-3.77a7.13 7.13 0 0 0 2.38 4.14zM12 22l-2.41-3.44c.74.27 1.55.44 2.41.44c.82 0 1.63-.17 2.37-.44M19 13V7h2v6zm0 4v-2h2v2"/></svg>

React

import type { SVGProps } from "react";

export function MdiWeatherSunnyAlert(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 7a5 5 0 0 0-5 5a5 5 0 0 0 5 5a5 5 0 0 0 5-5a5 5 0 0 0-5-5m0 8a3 3 0 0 1-3-3a3 3 0 0 1 3-3a3 3 0 0 1 3 3a3 3 0 0 1-3 3m0-13l2.39 3.42C13.65 5.15 12.84 5 12 5s-1.65.15-2.39.42zM3.34 7l4.16-.35A7.2 7.2 0 0 0 5.94 8.5c-.44.74-.69 1.5-.83 2.29zm.02 10l1.76-3.77a7.13 7.13 0 0 0 2.38 4.14zM12 22l-2.41-3.44c.74.27 1.55.44 2.41.44c.82 0 1.63-.17 2.37-.44M19 13V7h2v6zm0 4v-2h2v2"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 7a5 5 0 0 0-5 5a5 5 0 0 0 5 5a5 5 0 0 0 5-5a5 5 0 0 0-5-5m0 8a3 3 0 0 1-3-3a3 3 0 0 1 3-3a3 3 0 0 1 3 3a3 3 0 0 1-3 3m0-13l2.39 3.42C13.65 5.15 12.84 5 12 5s-1.65.15-2.39.42zM3.34 7l4.16-.35A7.2 7.2 0 0 0 5.94 8.5c-.44.74-.69 1.5-.83 2.29zm.02 10l1.76-3.77a7.13 7.13 0 0 0 2.38 4.14zM12 22l-2.41-3.44c.74.27 1.55.44 2.41.44c.82 0 1.63-.17 2.37-.44M19 13V7h2v6zm0 4v-2h2v2"/></svg>
</template>

CSS

.icon-weather-sunny-alert {
  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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12%207a5%205%200%200%200-5%205a5%205%200%200%200%205%205a5%205%200%200%200%205-5a5%205%200%200%200-5-5m0%208a3%203%200%200%201-3-3a3%203%200%200%201%203-3a3%203%200%200%201%203%203a3%203%200%200%201-3%203m0-13l2.39%203.42C13.65%205.15%2012.84%205%2012%205s-1.65.15-2.39.42zM3.34%207l4.16-.35A7.2%207.2%200%200%200%205.94%208.5c-.44.74-.69%201.5-.83%202.29zm.02%2010l1.76-3.77a7.13%207.13%200%200%200%202.38%204.14zM12%2022l-2.41-3.44c.74.27%201.55.44%202.41.44c.82%200%201.63-.17%202.37-.44M19%2013V7h2v6zm0%204v-2h2v2%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12%207a5%205%200%200%200-5%205a5%205%200%200%200%205%205a5%205%200%200%200%205-5a5%205%200%200%200-5-5m0%208a3%203%200%200%201-3-3a3%203%200%200%201%203-3a3%203%200%200%201%203%203a3%203%200%200%201-3%203m0-13l2.39%203.42C13.65%205.15%2012.84%205%2012%205s-1.65.15-2.39.42zM3.34%207l4.16-.35A7.2%207.2%200%200%200%205.94%208.5c-.44.74-.69%201.5-.83%202.29zm.02%2010l1.76-3.77a7.13%207.13%200%200%200%202.38%204.14zM12%2022l-2.41-3.44c.74.27%201.55.44%202.41.44c.82%200%201.63-.17%202.37-.44M19%2013V7h2v6zm0%204v-2h2v2%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/mdi/weather-sunny-alert.svg?color=%231a73e8&size=48

weather sunny alert icon

More alert / error icons from Material Design Icons

Use the weather sunny alert icon

SVG

React

Vue

CSS