time late evening icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><defs><symbol id="SVGVD1XseCd3" viewBox="0 0 203 203"><path fill="none" stroke="#72b9d5" stroke-linecap="round" stroke-linejoin="round" stroke-width="15" d="M185 125.5a95 95 0 0 1-95.6-94.3a92.8 92.8 0 0 1 3.2-23.7a94.8 94.8 0 0 0-85.1 93.7a95 95 0 0 0 95.6 94.3c44.5 0 81.8-30 92.4-70.7a95.8 95.8 0 0 1-10.5.7Z"/></symbol><symbol id="SVGeI5oHcAF1" viewBox="0 0 197.5 128.5"><path fill="none" stroke="#e2e8f0" stroke-miterlimit="10" stroke-width="12" d="m161.3 62l-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><clipPath id="SVG8jmPYdia1"><path fill="none" d="M326.6 239a45.4 45.4 0 0 0-38.6 21.4a30 30 0 0 0-45.3 30.7a32.3 32.3 0 0 0-26.4 31.6L219 334H0V0h326.6Z"/></clipPath></defs><g clip-path="url(#SVG8jmPYdia1)"><use width="203" height="203" href="#SVGVD1XseCd3" transform="translate(154.5 134.5)"><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></g><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="197.5" height="128.5" href="#SVGeI5oHcAF1" transform="translate(210.31 232.95)"><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 MeteoconsTimeLateEvening(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><defs><symbol id="SVGVD1XseCd3" viewBox="0 0 203 203"><path fill="none" stroke="#72b9d5" strokeLinecap="round" strokeLinejoin="round" strokeWidth="15" d="M185 125.5a95 95 0 0 1-95.6-94.3a92.8 92.8 0 0 1 3.2-23.7a94.8 94.8 0 0 0-85.1 93.7a95 95 0 0 0 95.6 94.3c44.5 0 81.8-30 92.4-70.7a95.8 95.8 0 0 1-10.5.7Z"/></symbol><symbol id="SVGeI5oHcAF1" viewBox="0 0 197.5 128.5"><path fill="none" stroke="#e2e8f0" strokeMiterlimit="10" strokeWidth="12" d="m161.3 62l-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><clipPath id="SVG8jmPYdia1"><path fill="none" d="M326.6 239a45.4 45.4 0 0 0-38.6 21.4a30 30 0 0 0-45.3 30.7a32.3 32.3 0 0 0-26.4 31.6L219 334H0V0h326.6Z"/></clipPath></defs><g clipPath="url(#SVG8jmPYdia1)"><use width="203" height="203" href="#SVGVD1XseCd3" transform="translate(154.5 134.5)"><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></g><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="197.5" height="128.5" href="#SVGeI5oHcAF1" transform="translate(210.31 232.95)"><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><symbol id="SVGVD1XseCd3" viewBox="0 0 203 203"><path fill="none" stroke="#72b9d5" stroke-linecap="round" stroke-linejoin="round" stroke-width="15" d="M185 125.5a95 95 0 0 1-95.6-94.3a92.8 92.8 0 0 1 3.2-23.7a94.8 94.8 0 0 0-85.1 93.7a95 95 0 0 0 95.6 94.3c44.5 0 81.8-30 92.4-70.7a95.8 95.8 0 0 1-10.5.7Z"/></symbol><symbol id="SVGeI5oHcAF1" viewBox="0 0 197.5 128.5"><path fill="none" stroke="#e2e8f0" stroke-miterlimit="10" stroke-width="12" d="m161.3 62l-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><clipPath id="SVG8jmPYdia1"><path fill="none" d="M326.6 239a45.4 45.4 0 0 0-38.6 21.4a30 30 0 0 0-45.3 30.7a32.3 32.3 0 0 0-26.4 31.6L219 334H0V0h326.6Z"/></clipPath></defs><g clip-path="url(#SVG8jmPYdia1)"><use width="203" height="203" href="#SVGVD1XseCd3" transform="translate(154.5 134.5)"><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></g><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="197.5" height="128.5" href="#SVGeI5oHcAF1" transform="translate(210.31 232.95)"><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 {
  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%3Csymbol%20id%3D%22SVGVD1XseCd3%22%20viewBox%3D%220%200%20203%20203%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%2372b9d5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%2215%22%20d%3D%22M185%20125.5a95%2095%200%200%201-95.6-94.3a92.8%2092.8%200%200%201%203.2-23.7a94.8%2094.8%200%200%200-85.1%2093.7a95%2095%200%200%200%2095.6%2094.3c44.5%200%2081.8-30%2092.4-70.7a95.8%2095.8%200%200%201-10.5.7Z%22%2F%3E%3C%2Fsymbol%3E%3Csymbol%20id%3D%22SVGeI5oHcAF1%22%20viewBox%3D%220%200%20197.5%20128.5%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23e2e8f0%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%2212%22%20d%3D%22m161.3%2062l-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%3CclipPath%20id%3D%22SVG8jmPYdia1%22%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M326.6%20239a45.4%2045.4%200%200%200-38.6%2021.4a30%2030%200%200%200-45.3%2030.7a32.3%2032.3%200%200%200-26.4%2031.6L219%20334H0V0h326.6Z%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg%20clip-path%3D%22url(%23SVG8jmPYdia1)%22%3E%3Cuse%20width%3D%22203%22%20height%3D%22203%22%20href%3D%22%23SVGVD1XseCd3%22%20transform%3D%22translate(154.5%20134.5)%20rotate(-15%2096.24%2096.24)%22%3E%3C%2Fuse%3E%3C%2Fg%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%22197.5%22%20height%3D%22128.5%22%20href%3D%22%23SVGeI5oHcAF1%22%20transform%3D%22translate(210.31%20232.95)%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%3Csymbol%20id%3D%22SVGVD1XseCd3%22%20viewBox%3D%220%200%20203%20203%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%2372b9d5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%2215%22%20d%3D%22M185%20125.5a95%2095%200%200%201-95.6-94.3a92.8%2092.8%200%200%201%203.2-23.7a94.8%2094.8%200%200%200-85.1%2093.7a95%2095%200%200%200%2095.6%2094.3c44.5%200%2081.8-30%2092.4-70.7a95.8%2095.8%200%200%201-10.5.7Z%22%2F%3E%3C%2Fsymbol%3E%3Csymbol%20id%3D%22SVGeI5oHcAF1%22%20viewBox%3D%220%200%20197.5%20128.5%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23e2e8f0%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%2212%22%20d%3D%22m161.3%2062l-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%3CclipPath%20id%3D%22SVG8jmPYdia1%22%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M326.6%20239a45.4%2045.4%200%200%200-38.6%2021.4a30%2030%200%200%200-45.3%2030.7a32.3%2032.3%200%200%200-26.4%2031.6L219%20334H0V0h326.6Z%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg%20clip-path%3D%22url(%23SVG8jmPYdia1)%22%3E%3Cuse%20width%3D%22203%22%20height%3D%22203%22%20href%3D%22%23SVGVD1XseCd3%22%20transform%3D%22translate(154.5%20134.5)%20rotate(-15%2096.24%2096.24)%22%3E%3C%2Fuse%3E%3C%2Fg%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%22197.5%22%20height%3D%22128.5%22%20href%3D%22%23SVGeI5oHcAF1%22%20transform%3D%22translate(210.31%20232.95)%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.