time late evening icon

time-late-evening-fill from Meteocons by Bas Milius · Fill · animated · MIT Free for personal and commercial use.

Name: time-late-evening-fill
Set: Meteocons
Style: Fill
Animation: Animated SVG (SMIL)
Viewbox: 512×512
License: MIT

1 other variant in Meteocons

Related icons in Meteocons

time-afternoon time-evening time-late-afternoon time-late-morning time-late-night time-morning time-night

Use the time late evening icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><defs><linearGradient id="SVG6MTgVduP" x1="54" x2="125.8" y1="16.9" y2="141.3" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f3f7fe"/><stop offset=".5" stop-color="#f3f7fe"/><stop offset="1" stop-color="#deeafb"/></linearGradient><linearGradient id="SVGnpneLCAV" x1="38.8" x2="133.4" y1="20.8" y2="184.6" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#86c3db"/><stop offset=".5" stop-color="#86c3db"/><stop offset="1" stop-color="#5eafcf"/></linearGradient><symbol id="SVGj2o8pd2H" viewBox="0 0 192.5 192.5"><path fill="url(#SVGnpneLCAV)" stroke="#72b9d5" stroke-linecap="round" stroke-linejoin="round" stroke-width="4.5" d="M179.7 120.2a95 95 0 0 1-95.5-94.3a93.2 93.2 0 0 1 3.1-23.7A94.8 94.8 0 0 0 2.3 96a95 95 0 0 0 95.5 94.3c44.5 0 81.8-30 92.4-70.6a98.4 98.4 0 0 1-10.5.6Z"/></symbol><symbol id="SVGoxr8zdal" viewBox="0 0 189.5 120.5"><path fill="url(#SVG6MTgVduP)" stroke="#e6effc" stroke-miterlimit="10" stroke-width="4" d="m157.3 58l-1.4.1a45.8 45.8 0 0 0 1.4-10.8a45.3 45.3 0 0 0-83.8-23.8a30.1 30.1 0 0 0-45.6 26a30.5 30.5 0 0 0 .4 4.9a32.3 32.3 0 0 0 6 64h123a30.2 30.2 0 0 0 0-60.3Z"/></symbol></defs><path fill="#374251" d="M220.2 438.4h-40.6a20.8 20.8 0 0 1 3-11.5q3-4.4 10.8-9.8l7.9-5.6a16.3 16.3 0 0 0 4.3-4a7.5 7.5 0 0 0 1.2-4.3a6.3 6.3 0 0 0-1.9-4.9a7.1 7.1 0 0 0-5-1.7q-7.4 0-7.4 8.5v1.1h-12.2v-1.6q0-8.8 5.2-13.8t14.7-5q9 0 14.4 4.4t5.4 12.2a16 16 0 0 1-2.5 9a26.7 26.7 0 0 1-8.2 7.5l-8.9 5.6c-1.7 1-2.6 2-2.7 2.8h22.5Zm33.6 0h-13.5v-32h-12.7v-9h2.2q5.5 0 8.8-2.4c2-1.5 3.3-4 4-7.3l.1-.5h11.1Zm30-15.1h-20.5v-9.9h20.5Zm44.6 9q-6 7.2-16.2 7.2t-16.3-7.2q-6-7.3-6-19.7t6-19.4q5.9-7.2 16.3-7.2q10.2 0 16.2 7.2t6 19.4q0 12.4-6 19.7Zm-16.2-3.2q9.3 0 9.3-16.4t-9.3-16.3q-9.5 0-9.5 16.3t9.5 16.4Z"/><use width="192.5" height="192.5" href="#SVGj2o8pd2H" transform="translate(159.76 139.76)"><animateTransform additive="sum" attributeName="transform" dur="6s" repeatCount="indefinite" type="rotate" values="-15 96.24 96.24; 9 96.24 96.24; -15 96.24 96.24"/></use><use width="189.5" height="120.5" href="#SVGoxr8zdal" transform="translate(214.32 236.93)"><animateTransform additive="sum" attributeName="transform" dur="6s" repeatCount="indefinite" type="translate" values="-6 0; 6 0; -6 0"/></use></svg>

React

import type { SVGProps } from "react";

export function MeteoconsTimeLateEveningFill(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><defs><linearGradient id="SVG6MTgVduP" x1="54" x2="125.8" y1="16.9" y2="141.3" gradientUnits="userSpaceOnUse"><stop offset="0" stopColor="#f3f7fe"/><stop offset=".5" stopColor="#f3f7fe"/><stop offset="1" stopColor="#deeafb"/></linearGradient><linearGradient id="SVGnpneLCAV" x1="38.8" x2="133.4" y1="20.8" y2="184.6" gradientUnits="userSpaceOnUse"><stop offset="0" stopColor="#86c3db"/><stop offset=".5" stopColor="#86c3db"/><stop offset="1" stopColor="#5eafcf"/></linearGradient><symbol id="SVGj2o8pd2H" viewBox="0 0 192.5 192.5"><path fill="url(#SVGnpneLCAV)" stroke="#72b9d5" strokeLinecap="round" strokeLinejoin="round" strokeWidth="4.5" d="M179.7 120.2a95 95 0 0 1-95.5-94.3a93.2 93.2 0 0 1 3.1-23.7A94.8 94.8 0 0 0 2.3 96a95 95 0 0 0 95.5 94.3c44.5 0 81.8-30 92.4-70.6a98.4 98.4 0 0 1-10.5.6Z"/></symbol><symbol id="SVGoxr8zdal" viewBox="0 0 189.5 120.5"><path fill="url(#SVG6MTgVduP)" stroke="#e6effc" strokeMiterlimit="10" strokeWidth="4" d="m157.3 58l-1.4.1a45.8 45.8 0 0 0 1.4-10.8a45.3 45.3 0 0 0-83.8-23.8a30.1 30.1 0 0 0-45.6 26a30.5 30.5 0 0 0 .4 4.9a32.3 32.3 0 0 0 6 64h123a30.2 30.2 0 0 0 0-60.3Z"/></symbol></defs><path fill="#374251" d="M220.2 438.4h-40.6a20.8 20.8 0 0 1 3-11.5q3-4.4 10.8-9.8l7.9-5.6a16.3 16.3 0 0 0 4.3-4a7.5 7.5 0 0 0 1.2-4.3a6.3 6.3 0 0 0-1.9-4.9a7.1 7.1 0 0 0-5-1.7q-7.4 0-7.4 8.5v1.1h-12.2v-1.6q0-8.8 5.2-13.8t14.7-5q9 0 14.4 4.4t5.4 12.2a16 16 0 0 1-2.5 9a26.7 26.7 0 0 1-8.2 7.5l-8.9 5.6c-1.7 1-2.6 2-2.7 2.8h22.5Zm33.6 0h-13.5v-32h-12.7v-9h2.2q5.5 0 8.8-2.4c2-1.5 3.3-4 4-7.3l.1-.5h11.1Zm30-15.1h-20.5v-9.9h20.5Zm44.6 9q-6 7.2-16.2 7.2t-16.3-7.2q-6-7.3-6-19.7t6-19.4q5.9-7.2 16.3-7.2q10.2 0 16.2 7.2t6 19.4q0 12.4-6 19.7Zm-16.2-3.2q9.3 0 9.3-16.4t-9.3-16.3q-9.5 0-9.5 16.3t9.5 16.4Z"/><use width="192.5" height="192.5" href="#SVGj2o8pd2H" transform="translate(159.76 139.76)"><animateTransform additive="sum" attributeName="transform" dur="6s" repeatCount="indefinite" type="rotate" values="-15 96.24 96.24; 9 96.24 96.24; -15 96.24 96.24"/></use><use width="189.5" height="120.5" href="#SVGoxr8zdal" transform="translate(214.32 236.93)"><animateTransform additive="sum" attributeName="transform" dur="6s" repeatCount="indefinite" type="translate" values="-6 0; 6 0; -6 0"/></use></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><defs><linearGradient id="SVG6MTgVduP" x1="54" x2="125.8" y1="16.9" y2="141.3" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f3f7fe"/><stop offset=".5" stop-color="#f3f7fe"/><stop offset="1" stop-color="#deeafb"/></linearGradient><linearGradient id="SVGnpneLCAV" x1="38.8" x2="133.4" y1="20.8" y2="184.6" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#86c3db"/><stop offset=".5" stop-color="#86c3db"/><stop offset="1" stop-color="#5eafcf"/></linearGradient><symbol id="SVGj2o8pd2H" viewBox="0 0 192.5 192.5"><path fill="url(#SVGnpneLCAV)" stroke="#72b9d5" stroke-linecap="round" stroke-linejoin="round" stroke-width="4.5" d="M179.7 120.2a95 95 0 0 1-95.5-94.3a93.2 93.2 0 0 1 3.1-23.7A94.8 94.8 0 0 0 2.3 96a95 95 0 0 0 95.5 94.3c44.5 0 81.8-30 92.4-70.6a98.4 98.4 0 0 1-10.5.6Z"/></symbol><symbol id="SVGoxr8zdal" viewBox="0 0 189.5 120.5"><path fill="url(#SVG6MTgVduP)" stroke="#e6effc" stroke-miterlimit="10" stroke-width="4" d="m157.3 58l-1.4.1a45.8 45.8 0 0 0 1.4-10.8a45.3 45.3 0 0 0-83.8-23.8a30.1 30.1 0 0 0-45.6 26a30.5 30.5 0 0 0 .4 4.9a32.3 32.3 0 0 0 6 64h123a30.2 30.2 0 0 0 0-60.3Z"/></symbol></defs><path fill="#374251" d="M220.2 438.4h-40.6a20.8 20.8 0 0 1 3-11.5q3-4.4 10.8-9.8l7.9-5.6a16.3 16.3 0 0 0 4.3-4a7.5 7.5 0 0 0 1.2-4.3a6.3 6.3 0 0 0-1.9-4.9a7.1 7.1 0 0 0-5-1.7q-7.4 0-7.4 8.5v1.1h-12.2v-1.6q0-8.8 5.2-13.8t14.7-5q9 0 14.4 4.4t5.4 12.2a16 16 0 0 1-2.5 9a26.7 26.7 0 0 1-8.2 7.5l-8.9 5.6c-1.7 1-2.6 2-2.7 2.8h22.5Zm33.6 0h-13.5v-32h-12.7v-9h2.2q5.5 0 8.8-2.4c2-1.5 3.3-4 4-7.3l.1-.5h11.1Zm30-15.1h-20.5v-9.9h20.5Zm44.6 9q-6 7.2-16.2 7.2t-16.3-7.2q-6-7.3-6-19.7t6-19.4q5.9-7.2 16.3-7.2q10.2 0 16.2 7.2t6 19.4q0 12.4-6 19.7Zm-16.2-3.2q9.3 0 9.3-16.4t-9.3-16.3q-9.5 0-9.5 16.3t9.5 16.4Z"/><use width="192.5" height="192.5" href="#SVGj2o8pd2H" transform="translate(159.76 139.76)"><animateTransform additive="sum" attributeName="transform" dur="6s" repeatCount="indefinite" type="rotate" values="-15 96.24 96.24; 9 96.24 96.24; -15 96.24 96.24"/></use><use width="189.5" height="120.5" href="#SVGoxr8zdal" transform="translate(214.32 236.93)"><animateTransform additive="sum" attributeName="transform" dur="6s" repeatCount="indefinite" type="translate" values="-6 0; 6 0; -6 0"/></use></svg>
</template>

CSS

.icon-time-late-evening-fill {
  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%3Cdefs%3E%3ClinearGradient%20id%3D%22SVG6MTgVduP%22%20x1%3D%2254%22%20x2%3D%22125.8%22%20y1%3D%2216.9%22%20y2%3D%22141.3%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23f3f7fe%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23f3f7fe%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23deeafb%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGnpneLCAV%22%20x1%3D%2238.8%22%20x2%3D%22133.4%22%20y1%3D%2220.8%22%20y2%3D%22184.6%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%2386c3db%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%2386c3db%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%235eafcf%22%2F%3E%3C%2FlinearGradient%3E%3Csymbol%20id%3D%22SVGj2o8pd2H%22%20viewBox%3D%220%200%20192.5%20192.5%22%3E%3Cpath%20fill%3D%22url(%23SVGnpneLCAV)%22%20stroke%3D%22%2372b9d5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224.5%22%20d%3D%22M179.7%20120.2a95%2095%200%200%201-95.5-94.3a93.2%2093.2%200%200%201%203.1-23.7A94.8%2094.8%200%200%200%202.3%2096a95%2095%200%200%200%2095.5%2094.3c44.5%200%2081.8-30%2092.4-70.6a98.4%2098.4%200%200%201-10.5.6Z%22%2F%3E%3C%2Fsymbol%3E%3Csymbol%20id%3D%22SVGoxr8zdal%22%20viewBox%3D%220%200%20189.5%20120.5%22%3E%3Cpath%20fill%3D%22url(%23SVG6MTgVduP)%22%20stroke%3D%22%23e6effc%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%224%22%20d%3D%22m157.3%2058l-1.4.1a45.8%2045.8%200%200%200%201.4-10.8a45.3%2045.3%200%200%200-83.8-23.8a30.1%2030.1%200%200%200-45.6%2026a30.5%2030.5%200%200%200%20.4%204.9a32.3%2032.3%200%200%200%206%2064h123a30.2%2030.2%200%200%200%200-60.3Z%22%2F%3E%3C%2Fsymbol%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22%23374251%22%20d%3D%22M220.2%20438.4h-40.6a20.8%2020.8%200%200%201%203-11.5q3-4.4%2010.8-9.8l7.9-5.6a16.3%2016.3%200%200%200%204.3-4a7.5%207.5%200%200%200%201.2-4.3a6.3%206.3%200%200%200-1.9-4.9a7.1%207.1%200%200%200-5-1.7q-7.4%200-7.4%208.5v1.1h-12.2v-1.6q0-8.8%205.2-13.8t14.7-5q9%200%2014.4%204.4t5.4%2012.2a16%2016%200%200%201-2.5%209a26.7%2026.7%200%200%201-8.2%207.5l-8.9%205.6c-1.7%201-2.6%202-2.7%202.8h22.5Zm33.6%200h-13.5v-32h-12.7v-9h2.2q5.5%200%208.8-2.4c2-1.5%203.3-4%204-7.3l.1-.5h11.1Zm30-15.1h-20.5v-9.9h20.5Zm44.6%209q-6%207.2-16.2%207.2t-16.3-7.2q-6-7.3-6-19.7t6-19.4q5.9-7.2%2016.3-7.2q10.2%200%2016.2%207.2t6%2019.4q0%2012.4-6%2019.7Zm-16.2-3.2q9.3%200%209.3-16.4t-9.3-16.3q-9.5%200-9.5%2016.3t9.5%2016.4Z%22%2F%3E%3Cuse%20width%3D%22192.5%22%20height%3D%22192.5%22%20href%3D%22%23SVGj2o8pd2H%22%20transform%3D%22translate(159.76%20139.76)%20rotate(-15%2096.24%2096.24)%22%3E%3C%2Fuse%3E%3Cuse%20width%3D%22189.5%22%20height%3D%22120.5%22%20href%3D%22%23SVGoxr8zdal%22%20transform%3D%22translate(214.32%20236.93)%20translate(-6%200)%22%3E%3C%2Fuse%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%3Cdefs%3E%3ClinearGradient%20id%3D%22SVG6MTgVduP%22%20x1%3D%2254%22%20x2%3D%22125.8%22%20y1%3D%2216.9%22%20y2%3D%22141.3%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23f3f7fe%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23f3f7fe%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23deeafb%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGnpneLCAV%22%20x1%3D%2238.8%22%20x2%3D%22133.4%22%20y1%3D%2220.8%22%20y2%3D%22184.6%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%2386c3db%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%2386c3db%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%235eafcf%22%2F%3E%3C%2FlinearGradient%3E%3Csymbol%20id%3D%22SVGj2o8pd2H%22%20viewBox%3D%220%200%20192.5%20192.5%22%3E%3Cpath%20fill%3D%22url(%23SVGnpneLCAV)%22%20stroke%3D%22%2372b9d5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224.5%22%20d%3D%22M179.7%20120.2a95%2095%200%200%201-95.5-94.3a93.2%2093.2%200%200%201%203.1-23.7A94.8%2094.8%200%200%200%202.3%2096a95%2095%200%200%200%2095.5%2094.3c44.5%200%2081.8-30%2092.4-70.6a98.4%2098.4%200%200%201-10.5.6Z%22%2F%3E%3C%2Fsymbol%3E%3Csymbol%20id%3D%22SVGoxr8zdal%22%20viewBox%3D%220%200%20189.5%20120.5%22%3E%3Cpath%20fill%3D%22url(%23SVG6MTgVduP)%22%20stroke%3D%22%23e6effc%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%224%22%20d%3D%22m157.3%2058l-1.4.1a45.8%2045.8%200%200%200%201.4-10.8a45.3%2045.3%200%200%200-83.8-23.8a30.1%2030.1%200%200%200-45.6%2026a30.5%2030.5%200%200%200%20.4%204.9a32.3%2032.3%200%200%200%206%2064h123a30.2%2030.2%200%200%200%200-60.3Z%22%2F%3E%3C%2Fsymbol%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22%23374251%22%20d%3D%22M220.2%20438.4h-40.6a20.8%2020.8%200%200%201%203-11.5q3-4.4%2010.8-9.8l7.9-5.6a16.3%2016.3%200%200%200%204.3-4a7.5%207.5%200%200%200%201.2-4.3a6.3%206.3%200%200%200-1.9-4.9a7.1%207.1%200%200%200-5-1.7q-7.4%200-7.4%208.5v1.1h-12.2v-1.6q0-8.8%205.2-13.8t14.7-5q9%200%2014.4%204.4t5.4%2012.2a16%2016%200%200%201-2.5%209a26.7%2026.7%200%200%201-8.2%207.5l-8.9%205.6c-1.7%201-2.6%202-2.7%202.8h22.5Zm33.6%200h-13.5v-32h-12.7v-9h2.2q5.5%200%208.8-2.4c2-1.5%203.3-4%204-7.3l.1-.5h11.1Zm30-15.1h-20.5v-9.9h20.5Zm44.6%209q-6%207.2-16.2%207.2t-16.3-7.2q-6-7.3-6-19.7t6-19.4q5.9-7.2%2016.3-7.2q10.2%200%2016.2%207.2t6%2019.4q0%2012.4-6%2019.7Zm-16.2-3.2q9.3%200%209.3-16.4t-9.3-16.3q-9.5%200-9.5%2016.3t9.5%2016.4Z%22%2F%3E%3Cuse%20width%3D%22192.5%22%20height%3D%22192.5%22%20href%3D%22%23SVGj2o8pd2H%22%20transform%3D%22translate(159.76%20139.76)%20rotate(-15%2096.24%2096.24)%22%3E%3C%2Fuse%3E%3Cuse%20width%3D%22189.5%22%20height%3D%22120.5%22%20href%3D%22%23SVGoxr8zdal%22%20transform%3D%22translate(214.32%20236.93)%20translate(-6%200)%22%3E%3C%2Fuse%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

This icon is animated. Browsers do not run SVG animation inside a CSS mask, so the rule above uses a still of the drawn icon. Inline the SVG (or use the React/Vue/Svelte snippet) to keep the animation.

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/meteocons/time-late-evening-fill.svg?color=%231a73e8&size=48