thermometer water icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><defs><linearGradient id="SVGqZsaHePB1" x1="79.5" x2="165.8" y1="-22.3" y2="127.2" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#3392d6"/><stop offset=".5" stop-color="#3392d6"/><stop offset="1" stop-color="#2477b2"/></linearGradient><linearGradient id="SVGJsgqNepP1" x1="324.8" x2="413" y1="186.8" y2="339.5" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#515a69" stop-opacity=".1"/><stop offset=".5" stop-color="#6b7280" stop-opacity=".1"/><stop offset="1" stop-color="#384354" stop-opacity=".1"/></linearGradient><linearGradient id="SVGl4HcQb9M1" x1="323.7" x2="414" y1="184.9" y2="341.3" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#d4d7dd"/><stop offset=".5" stop-color="#d4d7dd"/><stop offset="1" stop-color="#bec1c6"/></linearGradient><clipPath id="SVGvy0DNepQ8"><path fill="none" d="M372 357c-22 0-40-18.1-40-40.5a40.6 40.6 0 0 1 17.1-33.3v-97A23 23 0 0 1 372 163H119.2v194Zm2.9-137h20m-20-22.8h20m-20 45.7h20"/></clipPath><symbol id="SVGqHh2cdrk1" viewBox="0 0 244 92"><path fill="url(#SVGqZsaHePB1)" stroke="#2885c7" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M242 24.6h-8c-11 0-20.9-11.6-26-21.4a2.3 2.3 0 0 0-4 0c-5.2 9.8-15.1 21.4-26 21.4S157.1 13 152 3.2a2.3 2.3 0 0 0-4 0c-5.2 9.8-15.1 21.4-26 21.4S101.1 13 96 3.2a2.3 2.3 0 0 0-4 0C86.7 13 77 24.6 66 24.6S45 13 40 3.2a2.3 2.3 0 0 0-4 0C30.7 13 21 24.6 10 24.6H2v49.1A16.1 16.1 0 0 0 18 90h208a16.1 16.1 0 0 0 16-16.3Z"><animate attributeName="meteoconsThermometerWaterFill2" calcMode="spline" dur="3s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" values="M 242 24.63 h -8 c -10.92 0 -20.85 -11.66 -26 -21.39 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15.05 21.39 -26 21.39 S 157.15 13 152 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15.05 21.39 -26 21.39 S 101.15 13 96 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15 21.39 -26 21.39 S 45.15 13 40 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15 21.39 -26 21.39 H 2 V 74 A 16.14 16.14 0 0 0 18 90 H 226 a 16.14 16.14 0 0 0 16 -16.3 Z; M 242 24.63 h -8 c -10.92 0 -20.85 -11.66 -26 -21.39 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15.05 21.39 -26 21.39 S 157.15 13 152 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15.05 21.39 -26 21.39 S 101.15 13 96 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15 21.39 -26 21.39 S 45.15 13 40 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15 21.39 -26 21.39 H 2 V 59 A 16.14 16.14 0 0 0 18 75 H 226 a 16.14 16.14 0 0 0 16 -16.3 Z; M 242 24.63 h -8 c -10.92 0 -20.85 -11.66 -26 -21.39 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15.05 21.39 -26 21.39 S 157.15 13 152 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15.05 21.39 -26 21.39 S 101.15 13 96 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15 21.39 -26 21.39 S 45.15 13 40 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15 21.39 -26 21.39 H 2 V 74 A 16.14 16.14 0 0 0 18 90 H 226 a 16.14 16.14 0 0 0 16 -16.3 Z"/><animateTransform additive="sum" attributeName="transform" calcMode="spline" dur="3s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" type="translate" values="0 0; 0 15; 0 0"/></path></symbol></defs><g clip-path="url(#SVGvy0DNepQ8)"><use width="244" height="92" href="#SVGqHh2cdrk1" transform="translate(134 242)"/></g><ellipse cx="372" cy="317.1" fill="#ef4444" rx="25.7" ry="25.7"/><path fill="none" stroke="#ef4444" stroke-linecap="round" stroke-miterlimit="10" stroke-width="17.1" d="M372 231.5V317"><animateTransform attributeName="transform" calcMode="spline" dur="1s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" type="translate" values="0 0; 0 18; 0 0"/></path><path fill="url(#SVGJsgqNepP1)" stroke="url(#SVGl4HcQb9M1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="4.3" d="M412 316.5c0 22.3-18 40.5-40 40.5s-40-18.1-40-40.5a40.6 40.6 0 0 1 17.1-33.3v-97a22.9 22.9 0 1 1 45.8 0v97a40.6 40.6 0 0 1 17.1 33.3ZM374.9 220h20m-20-22.9h20m-20 45.7h20"/></svg>

React

import type { SVGProps } from "react";

export function MeteoconsThermometerWaterFill(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="SVGqZsaHePB1" x1="79.5" x2="165.8" y1="-22.3" y2="127.2" gradientUnits="userSpaceOnUse"><stop offset="0" stopColor="#3392d6"/><stop offset=".5" stopColor="#3392d6"/><stop offset="1" stopColor="#2477b2"/></linearGradient><linearGradient id="SVGJsgqNepP1" x1="324.8" x2="413" y1="186.8" y2="339.5" gradientUnits="userSpaceOnUse"><stop offset="0" stopColor="#515a69" stopOpacity=".1"/><stop offset=".5" stopColor="#6b7280" stopOpacity=".1"/><stop offset="1" stopColor="#384354" stopOpacity=".1"/></linearGradient><linearGradient id="SVGl4HcQb9M1" x1="323.7" x2="414" y1="184.9" y2="341.3" gradientUnits="userSpaceOnUse"><stop offset="0" stopColor="#d4d7dd"/><stop offset=".5" stopColor="#d4d7dd"/><stop offset="1" stopColor="#bec1c6"/></linearGradient><clipPath id="SVGvy0DNepQ8"><path fill="none" d="M372 357c-22 0-40-18.1-40-40.5a40.6 40.6 0 0 1 17.1-33.3v-97A23 23 0 0 1 372 163H119.2v194Zm2.9-137h20m-20-22.8h20m-20 45.7h20"/></clipPath><symbol id="SVGqHh2cdrk1" viewBox="0 0 244 92"><path fill="url(#SVGqZsaHePB1)" stroke="#2885c7" strokeLinecap="round" strokeLinejoin="round" strokeWidth="4" d="M242 24.6h-8c-11 0-20.9-11.6-26-21.4a2.3 2.3 0 0 0-4 0c-5.2 9.8-15.1 21.4-26 21.4S157.1 13 152 3.2a2.3 2.3 0 0 0-4 0c-5.2 9.8-15.1 21.4-26 21.4S101.1 13 96 3.2a2.3 2.3 0 0 0-4 0C86.7 13 77 24.6 66 24.6S45 13 40 3.2a2.3 2.3 0 0 0-4 0C30.7 13 21 24.6 10 24.6H2v49.1A16.1 16.1 0 0 0 18 90h208a16.1 16.1 0 0 0 16-16.3Z"><animate attributeName="meteoconsThermometerWaterFill2" calcMode="spline" dur="3s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" values="M 242 24.63 h -8 c -10.92 0 -20.85 -11.66 -26 -21.39 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15.05 21.39 -26 21.39 S 157.15 13 152 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15.05 21.39 -26 21.39 S 101.15 13 96 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15 21.39 -26 21.39 S 45.15 13 40 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15 21.39 -26 21.39 H 2 V 74 A 16.14 16.14 0 0 0 18 90 H 226 a 16.14 16.14 0 0 0 16 -16.3 Z; M 242 24.63 h -8 c -10.92 0 -20.85 -11.66 -26 -21.39 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15.05 21.39 -26 21.39 S 157.15 13 152 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15.05 21.39 -26 21.39 S 101.15 13 96 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15 21.39 -26 21.39 S 45.15 13 40 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15 21.39 -26 21.39 H 2 V 59 A 16.14 16.14 0 0 0 18 75 H 226 a 16.14 16.14 0 0 0 16 -16.3 Z; M 242 24.63 h -8 c -10.92 0 -20.85 -11.66 -26 -21.39 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15.05 21.39 -26 21.39 S 157.15 13 152 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15.05 21.39 -26 21.39 S 101.15 13 96 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15 21.39 -26 21.39 S 45.15 13 40 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15 21.39 -26 21.39 H 2 V 74 A 16.14 16.14 0 0 0 18 90 H 226 a 16.14 16.14 0 0 0 16 -16.3 Z"/><animateTransform additive="sum" attributeName="transform" calcMode="spline" dur="3s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" type="translate" values="0 0; 0 15; 0 0"/></path></symbol></defs><g clipPath="url(#SVGvy0DNepQ8)"><use width="244" height="92" href="#SVGqHh2cdrk1" transform="translate(134 242)"/></g><ellipse cx="372" cy="317.1" fill="#ef4444" rx="25.7" ry="25.7"/><path fill="none" stroke="#ef4444" strokeLinecap="round" strokeMiterlimit="10" strokeWidth="17.1" d="M372 231.5V317"><animateTransform attributeName="transform" calcMode="spline" dur="1s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" type="translate" values="0 0; 0 18; 0 0"/></path><path fill="url(#SVGJsgqNepP1)" stroke="url(#SVGl4HcQb9M1)" strokeLinecap="round" strokeLinejoin="round" strokeWidth="4.3" d="M412 316.5c0 22.3-18 40.5-40 40.5s-40-18.1-40-40.5a40.6 40.6 0 0 1 17.1-33.3v-97a22.9 22.9 0 1 1 45.8 0v97a40.6 40.6 0 0 1 17.1 33.3ZM374.9 220h20m-20-22.9h20m-20 45.7h20"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><defs><linearGradient id="SVGqZsaHePB1" x1="79.5" x2="165.8" y1="-22.3" y2="127.2" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#3392d6"/><stop offset=".5" stop-color="#3392d6"/><stop offset="1" stop-color="#2477b2"/></linearGradient><linearGradient id="SVGJsgqNepP1" x1="324.8" x2="413" y1="186.8" y2="339.5" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#515a69" stop-opacity=".1"/><stop offset=".5" stop-color="#6b7280" stop-opacity=".1"/><stop offset="1" stop-color="#384354" stop-opacity=".1"/></linearGradient><linearGradient id="SVGl4HcQb9M1" x1="323.7" x2="414" y1="184.9" y2="341.3" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#d4d7dd"/><stop offset=".5" stop-color="#d4d7dd"/><stop offset="1" stop-color="#bec1c6"/></linearGradient><clipPath id="SVGvy0DNepQ8"><path fill="none" d="M372 357c-22 0-40-18.1-40-40.5a40.6 40.6 0 0 1 17.1-33.3v-97A23 23 0 0 1 372 163H119.2v194Zm2.9-137h20m-20-22.8h20m-20 45.7h20"/></clipPath><symbol id="SVGqHh2cdrk1" viewBox="0 0 244 92"><path fill="url(#SVGqZsaHePB1)" stroke="#2885c7" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M242 24.6h-8c-11 0-20.9-11.6-26-21.4a2.3 2.3 0 0 0-4 0c-5.2 9.8-15.1 21.4-26 21.4S157.1 13 152 3.2a2.3 2.3 0 0 0-4 0c-5.2 9.8-15.1 21.4-26 21.4S101.1 13 96 3.2a2.3 2.3 0 0 0-4 0C86.7 13 77 24.6 66 24.6S45 13 40 3.2a2.3 2.3 0 0 0-4 0C30.7 13 21 24.6 10 24.6H2v49.1A16.1 16.1 0 0 0 18 90h208a16.1 16.1 0 0 0 16-16.3Z"><animate attributeName="meteoconsThermometerWaterFill2" calcMode="spline" dur="3s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" values="M 242 24.63 h -8 c -10.92 0 -20.85 -11.66 -26 -21.39 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15.05 21.39 -26 21.39 S 157.15 13 152 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15.05 21.39 -26 21.39 S 101.15 13 96 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15 21.39 -26 21.39 S 45.15 13 40 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15 21.39 -26 21.39 H 2 V 74 A 16.14 16.14 0 0 0 18 90 H 226 a 16.14 16.14 0 0 0 16 -16.3 Z; M 242 24.63 h -8 c -10.92 0 -20.85 -11.66 -26 -21.39 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15.05 21.39 -26 21.39 S 157.15 13 152 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15.05 21.39 -26 21.39 S 101.15 13 96 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15 21.39 -26 21.39 S 45.15 13 40 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15 21.39 -26 21.39 H 2 V 59 A 16.14 16.14 0 0 0 18 75 H 226 a 16.14 16.14 0 0 0 16 -16.3 Z; M 242 24.63 h -8 c -10.92 0 -20.85 -11.66 -26 -21.39 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15.05 21.39 -26 21.39 S 157.15 13 152 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15.05 21.39 -26 21.39 S 101.15 13 96 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15 21.39 -26 21.39 S 45.15 13 40 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15 21.39 -26 21.39 H 2 V 74 A 16.14 16.14 0 0 0 18 90 H 226 a 16.14 16.14 0 0 0 16 -16.3 Z"/><animateTransform additive="sum" attributeName="transform" calcMode="spline" dur="3s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" type="translate" values="0 0; 0 15; 0 0"/></path></symbol></defs><g clip-path="url(#SVGvy0DNepQ8)"><use width="244" height="92" href="#SVGqHh2cdrk1" transform="translate(134 242)"/></g><ellipse cx="372" cy="317.1" fill="#ef4444" rx="25.7" ry="25.7"/><path fill="none" stroke="#ef4444" stroke-linecap="round" stroke-miterlimit="10" stroke-width="17.1" d="M372 231.5V317"><animateTransform attributeName="transform" calcMode="spline" dur="1s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" type="translate" values="0 0; 0 18; 0 0"/></path><path fill="url(#SVGJsgqNepP1)" stroke="url(#SVGl4HcQb9M1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="4.3" d="M412 316.5c0 22.3-18 40.5-40 40.5s-40-18.1-40-40.5a40.6 40.6 0 0 1 17.1-33.3v-97a22.9 22.9 0 1 1 45.8 0v97a40.6 40.6 0 0 1 17.1 33.3ZM374.9 220h20m-20-22.9h20m-20 45.7h20"/></svg>
</template>

CSS

.icon-thermometer-water-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%22SVGqZsaHePB1%22%20x1%3D%2279.5%22%20x2%3D%22165.8%22%20y1%3D%22-22.3%22%20y2%3D%22127.2%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%233392d6%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%233392d6%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%232477b2%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGJsgqNepP1%22%20x1%3D%22324.8%22%20x2%3D%22413%22%20y1%3D%22186.8%22%20y2%3D%22339.5%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23515a69%22%20stop-opacity%3D%22.1%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%236b7280%22%20stop-opacity%3D%22.1%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23384354%22%20stop-opacity%3D%22.1%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGl4HcQb9M1%22%20x1%3D%22323.7%22%20x2%3D%22414%22%20y1%3D%22184.9%22%20y2%3D%22341.3%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23d4d7dd%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23d4d7dd%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23bec1c6%22%2F%3E%3C%2FlinearGradient%3E%3CclipPath%20id%3D%22SVGvy0DNepQ8%22%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M372%20357c-22%200-40-18.1-40-40.5a40.6%2040.6%200%200%201%2017.1-33.3v-97A23%2023%200%200%201%20372%20163H119.2v194Zm2.9-137h20m-20-22.8h20m-20%2045.7h20%22%2F%3E%3C%2FclipPath%3E%3Csymbol%20id%3D%22SVGqHh2cdrk1%22%20viewBox%3D%220%200%20244%2092%22%3E%3Cpath%20fill%3D%22url(%23SVGqZsaHePB1)%22%20stroke%3D%22%232885c7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M242%2024.6h-8c-11%200-20.9-11.6-26-21.4a2.3%202.3%200%200%200-4%200c-5.2%209.8-15.1%2021.4-26%2021.4S157.1%2013%20152%203.2a2.3%202.3%200%200%200-4%200c-5.2%209.8-15.1%2021.4-26%2021.4S101.1%2013%2096%203.2a2.3%202.3%200%200%200-4%200C86.7%2013%2077%2024.6%2066%2024.6S45%2013%2040%203.2a2.3%202.3%200%200%200-4%200C30.7%2013%2021%2024.6%2010%2024.6H2v49.1A16.1%2016.1%200%200%200%2018%2090h208a16.1%2016.1%200%200%200%2016-16.3Z%22%20transform%3D%22translate(0%200)%22%3E%3C%2Fpath%3E%3C%2Fsymbol%3E%3C%2Fdefs%3E%3Cg%20clip-path%3D%22url(%23SVGvy0DNepQ8)%22%3E%3Cuse%20width%3D%22244%22%20height%3D%2292%22%20href%3D%22%23SVGqHh2cdrk1%22%20transform%3D%22translate(134%20242)%22%2F%3E%3C%2Fg%3E%3Cellipse%20cx%3D%22372%22%20cy%3D%22317.1%22%20fill%3D%22%23ef4444%22%20rx%3D%2225.7%22%20ry%3D%2225.7%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23ef4444%22%20stroke-linecap%3D%22round%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%2217.1%22%20d%3D%22M372%20231.5V317%22%20transform%3D%22translate(0%200)%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22url(%23SVGJsgqNepP1)%22%20stroke%3D%22url(%23SVGl4HcQb9M1)%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224.3%22%20d%3D%22M412%20316.5c0%2022.3-18%2040.5-40%2040.5s-40-18.1-40-40.5a40.6%2040.6%200%200%201%2017.1-33.3v-97a22.9%2022.9%200%201%201%2045.8%200v97a40.6%2040.6%200%200%201%2017.1%2033.3ZM374.9%20220h20m-20-22.9h20m-20%2045.7h20%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%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGqZsaHePB1%22%20x1%3D%2279.5%22%20x2%3D%22165.8%22%20y1%3D%22-22.3%22%20y2%3D%22127.2%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%233392d6%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%233392d6%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%232477b2%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGJsgqNepP1%22%20x1%3D%22324.8%22%20x2%3D%22413%22%20y1%3D%22186.8%22%20y2%3D%22339.5%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23515a69%22%20stop-opacity%3D%22.1%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%236b7280%22%20stop-opacity%3D%22.1%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23384354%22%20stop-opacity%3D%22.1%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGl4HcQb9M1%22%20x1%3D%22323.7%22%20x2%3D%22414%22%20y1%3D%22184.9%22%20y2%3D%22341.3%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23d4d7dd%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23d4d7dd%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23bec1c6%22%2F%3E%3C%2FlinearGradient%3E%3CclipPath%20id%3D%22SVGvy0DNepQ8%22%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M372%20357c-22%200-40-18.1-40-40.5a40.6%2040.6%200%200%201%2017.1-33.3v-97A23%2023%200%200%201%20372%20163H119.2v194Zm2.9-137h20m-20-22.8h20m-20%2045.7h20%22%2F%3E%3C%2FclipPath%3E%3Csymbol%20id%3D%22SVGqHh2cdrk1%22%20viewBox%3D%220%200%20244%2092%22%3E%3Cpath%20fill%3D%22url(%23SVGqZsaHePB1)%22%20stroke%3D%22%232885c7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M242%2024.6h-8c-11%200-20.9-11.6-26-21.4a2.3%202.3%200%200%200-4%200c-5.2%209.8-15.1%2021.4-26%2021.4S157.1%2013%20152%203.2a2.3%202.3%200%200%200-4%200c-5.2%209.8-15.1%2021.4-26%2021.4S101.1%2013%2096%203.2a2.3%202.3%200%200%200-4%200C86.7%2013%2077%2024.6%2066%2024.6S45%2013%2040%203.2a2.3%202.3%200%200%200-4%200C30.7%2013%2021%2024.6%2010%2024.6H2v49.1A16.1%2016.1%200%200%200%2018%2090h208a16.1%2016.1%200%200%200%2016-16.3Z%22%20transform%3D%22translate(0%200)%22%3E%3C%2Fpath%3E%3C%2Fsymbol%3E%3C%2Fdefs%3E%3Cg%20clip-path%3D%22url(%23SVGvy0DNepQ8)%22%3E%3Cuse%20width%3D%22244%22%20height%3D%2292%22%20href%3D%22%23SVGqHh2cdrk1%22%20transform%3D%22translate(134%20242)%22%2F%3E%3C%2Fg%3E%3Cellipse%20cx%3D%22372%22%20cy%3D%22317.1%22%20fill%3D%22%23ef4444%22%20rx%3D%2225.7%22%20ry%3D%2225.7%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23ef4444%22%20stroke-linecap%3D%22round%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%2217.1%22%20d%3D%22M372%20231.5V317%22%20transform%3D%22translate(0%200)%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22url(%23SVGJsgqNepP1)%22%20stroke%3D%22url(%23SVGl4HcQb9M1)%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224.3%22%20d%3D%22M412%20316.5c0%2022.3-18%2040.5-40%2040.5s-40-18.1-40-40.5a40.6%2040.6%200%200%201%2017.1-33.3v-97a22.9%2022.9%200%201%201%2045.8%200v97a40.6%2040.6%200%200%201%2017.1%2033.3ZM374.9%20220h20m-20-22.9h20m-20%2045.7h20%22%2F%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.