wind offshore icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><defs><linearGradient id="SVGExAgHelM1" x1="54.5" x2="89.2" y1="2.2" y2="62.2" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#d4d7dd"/><stop offset=".5" stop-color="#d4d7dd"/><stop offset="1" stop-color="#bec1c6"/></linearGradient><linearGradient id="SVG7Rf6EQLM1" x1="31.4" x2="68.3" y1="37.6" y2="101.4" href="#SVGExAgHelM1"/><linearGradient id="SVGLRHJlbus" x1="1203.2" x2="1274" y1="-755.7" y2="-633.1" gradientTransform="rotate(-8.1 7810.753 6580.212)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#875b34"/><stop offset=".5" stop-color="#875b34"/><stop offset="1" stop-color="#624226"/></linearGradient><linearGradient id="SVGm83z0ZPE" x1="1212" x2="1273.3" y1="-794.5" y2="-688.3" gradientTransform="rotate(-8.1 7810.753 6580.212)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#51cf66"/><stop offset=".5" stop-color="#51cf66"/><stop offset="1" stop-color="#37b24d"/></linearGradient><linearGradient id="SVGp9eIecsO1" x1="135.1" x2="210" y1="283.2" y2="412.8" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#3392d6"/><stop offset=".5" stop-color="#3392d6"/><stop offset="1" stop-color="#2477b2"/></linearGradient><linearGradient id="SVGqx4JLdqu1" x1="266.8" x2="339.6" y1="293.6" y2="419.7" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fbbf24"/><stop offset=".5" stop-color="#fbbf24"/><stop offset="1" stop-color="#f59e0b"/></linearGradient><symbol id="SVG4kZjFbOe1" viewBox="0 0 138 96"><path fill="none" stroke="url(#SVGExAgHelM1)" stroke-dasharray="58" stroke-linecap="round" stroke-miterlimit="10" stroke-width="12" d="M105.2 10.8A15.6 15.6 0 1 1 116.4 37H6"><animate attributeName="stroke-dashoffset" dur="6s" repeatCount="indefinite" values="0; 1274"/></path><path fill="none" stroke="url(#SVG7Rf6EQLM1)" stroke-dasharray="43" stroke-linecap="round" stroke-miterlimit="10" stroke-width="12" d="M60.7 85.2A15.6 15.6 0 1 0 71.9 59H6.6"><animate attributeName="stroke-dashoffset" dur="6s" repeatCount="indefinite" values="0; 857"/></path></symbol></defs><path fill="url(#SVGLRHJlbus)" stroke="#744e2d" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M353.7 160.3c-1-6.9-3.2-12.2-5-12l-1.3.2c-1.7.3-2.4 6-1.6 12.8l17 135c.8 7.1 3 13 5 12.7l3.5-.5c1.8-.3 2.4-6.4 1.4-13.6Z"/><path fill="url(#SVGm83z0ZPE)" stroke="#40c057" stroke-linecap="round" stroke-miterlimit="10" stroke-width="4" d="M403 153.2c-3.2-23.4-26-39.7-50.8-36.4a46 46 0 0 0-36.3 26.7h-2.2c-18.7 2.5-32 18.8-29.6 36.4a32.4 32.4 0 0 0 28.5 27.1a20.3 20.3 0 0 0-.7 8.7a22 22 0 0 0 25.3 18.3a23.4 23.4 0 0 0 14-7.3a34.7 34.7 0 0 0 28.3 8.8c18.6-2.5 31.9-18.7 29.5-36.3a30.8 30.8 0 0 0-11.4-20a41 41 0 0 0 5.3-26Z"><animateTransform additive="sum" attributeName="transform" calcMode="spline" dur="3s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1; .42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" type="rotate" values="3 366 200; -3 366 200; 3 366 200; -3 366 200; 3 366 200"/></path><path fill="url(#SVGp9eIecsO1)" stroke="#2885c7" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"><animate attributeName="meteoconsWindOffshoreFill3" calcMode="spline" dur="3s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" values="M245.68,309.62c-13.79,0-26.33-14.73-32.8-27a2.88,2.88,0,0,0-5.13,0c-6.47,12.29-19,27-32.8,27s-26.33-14.73-32.81-27a2.87,2.87,0,0,0-5.12,0c-6.48,12.29-19,27-32.81,27H94.11v62a20.38,20.38,0,0,0,20.16,20.59H245.68Z; M245.68,333.62c-13.79,0-26.33-14.73-32.8-27a2.88,2.88,0,0,0-5.13,0c-6.47,12.29-19,27-32.8,27s-26.33-14.73-32.81-27a2.87,2.87,0,0,0-5.12,0c-6.48,12.29-19,27-32.81,27H94.11v38a20.38,20.38,0,0,0,20.16,20.59H245.68Z; M245.68,309.62c-13.79,0-26.33-14.73-32.8-27a2.88,2.88,0,0,0-5.13,0c-6.47,12.29-19,27-32.8,27s-26.33-14.73-32.81-27a2.87,2.87,0,0,0-5.12,0c-6.48,12.29-19,27-32.81,27H94.11v62a20.38,20.38,0,0,0,20.16,20.59H245.68Z"/></path><path fill="url(#SVGqx4JLdqu1)" stroke="#f8af18" stroke-miterlimit="10" stroke-width="4" d="M402.3 369.8v-66.4c0-12.3-8.9-22.4-19.8-22.4h-62.6c-49.2 0-94.2 31.4-116.4 81.1l-13.4 30h192.4c11 0 19.8-10 19.8-22.4Z"/><use width="138" height="96" href="#SVG4kZjFbOe1" transform="matrix(-1 0 0 1 237 146)"/></svg>

React

import type { SVGProps } from "react";

export function MeteoconsWindOffshoreFill(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="SVGExAgHelM1" x1="54.5" x2="89.2" y1="2.2" y2="62.2" gradientUnits="userSpaceOnUse"><stop offset="0" stopColor="#d4d7dd"/><stop offset=".5" stopColor="#d4d7dd"/><stop offset="1" stopColor="#bec1c6"/></linearGradient><linearGradient id="SVG7Rf6EQLM1" x1="31.4" x2="68.3" y1="37.6" y2="101.4" href="#SVGExAgHelM1"/><linearGradient id="SVGLRHJlbus" x1="1203.2" x2="1274" y1="-755.7" y2="-633.1" gradientTransform="rotate(-8.1 7810.753 6580.212)" gradientUnits="userSpaceOnUse"><stop offset="0" stopColor="#875b34"/><stop offset=".5" stopColor="#875b34"/><stop offset="1" stopColor="#624226"/></linearGradient><linearGradient id="SVGm83z0ZPE" x1="1212" x2="1273.3" y1="-794.5" y2="-688.3" gradientTransform="rotate(-8.1 7810.753 6580.212)" gradientUnits="userSpaceOnUse"><stop offset="0" stopColor="#51cf66"/><stop offset=".5" stopColor="#51cf66"/><stop offset="1" stopColor="#37b24d"/></linearGradient><linearGradient id="SVGp9eIecsO1" x1="135.1" x2="210" y1="283.2" y2="412.8" gradientUnits="userSpaceOnUse"><stop offset="0" stopColor="#3392d6"/><stop offset=".5" stopColor="#3392d6"/><stop offset="1" stopColor="#2477b2"/></linearGradient><linearGradient id="SVGqx4JLdqu1" x1="266.8" x2="339.6" y1="293.6" y2="419.7" gradientUnits="userSpaceOnUse"><stop offset="0" stopColor="#fbbf24"/><stop offset=".5" stopColor="#fbbf24"/><stop offset="1" stopColor="#f59e0b"/></linearGradient><symbol id="SVG4kZjFbOe1" viewBox="0 0 138 96"><path fill="none" stroke="url(#SVGExAgHelM1)" strokeDasharray="58" strokeLinecap="round" strokeMiterlimit="10" strokeWidth="12" d="M105.2 10.8A15.6 15.6 0 1 1 116.4 37H6"><animate attributeName="strokeDashoffset" dur="6s" repeatCount="indefinite" values="0; 1274"/></path><path fill="none" stroke="url(#SVG7Rf6EQLM1)" strokeDasharray="43" strokeLinecap="round" strokeMiterlimit="10" strokeWidth="12" d="M60.7 85.2A15.6 15.6 0 1 0 71.9 59H6.6"><animate attributeName="strokeDashoffset" dur="6s" repeatCount="indefinite" values="0; 857"/></path></symbol></defs><path fill="url(#SVGLRHJlbus)" stroke="#744e2d" strokeLinecap="round" strokeLinejoin="round" strokeWidth="4" d="M353.7 160.3c-1-6.9-3.2-12.2-5-12l-1.3.2c-1.7.3-2.4 6-1.6 12.8l17 135c.8 7.1 3 13 5 12.7l3.5-.5c1.8-.3 2.4-6.4 1.4-13.6Z"/><path fill="url(#SVGm83z0ZPE)" stroke="#40c057" strokeLinecap="round" strokeMiterlimit="10" strokeWidth="4" d="M403 153.2c-3.2-23.4-26-39.7-50.8-36.4a46 46 0 0 0-36.3 26.7h-2.2c-18.7 2.5-32 18.8-29.6 36.4a32.4 32.4 0 0 0 28.5 27.1a20.3 20.3 0 0 0-.7 8.7a22 22 0 0 0 25.3 18.3a23.4 23.4 0 0 0 14-7.3a34.7 34.7 0 0 0 28.3 8.8c18.6-2.5 31.9-18.7 29.5-36.3a30.8 30.8 0 0 0-11.4-20a41 41 0 0 0 5.3-26Z"><animateTransform additive="sum" attributeName="transform" calcMode="spline" dur="3s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1; .42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" type="rotate" values="3 366 200; -3 366 200; 3 366 200; -3 366 200; 3 366 200"/></path><path fill="url(#SVGp9eIecsO1)" stroke="#2885c7" strokeLinecap="round" strokeLinejoin="round" strokeWidth="4"><animate attributeName="meteoconsWindOffshoreFill3" calcMode="spline" dur="3s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" values="M245.68,309.62c-13.79,0-26.33-14.73-32.8-27a2.88,2.88,0,0,0-5.13,0c-6.47,12.29-19,27-32.8,27s-26.33-14.73-32.81-27a2.87,2.87,0,0,0-5.12,0c-6.48,12.29-19,27-32.81,27H94.11v62a20.38,20.38,0,0,0,20.16,20.59H245.68Z; M245.68,333.62c-13.79,0-26.33-14.73-32.8-27a2.88,2.88,0,0,0-5.13,0c-6.47,12.29-19,27-32.8,27s-26.33-14.73-32.81-27a2.87,2.87,0,0,0-5.12,0c-6.48,12.29-19,27-32.81,27H94.11v38a20.38,20.38,0,0,0,20.16,20.59H245.68Z; M245.68,309.62c-13.79,0-26.33-14.73-32.8-27a2.88,2.88,0,0,0-5.13,0c-6.47,12.29-19,27-32.8,27s-26.33-14.73-32.81-27a2.87,2.87,0,0,0-5.12,0c-6.48,12.29-19,27-32.81,27H94.11v62a20.38,20.38,0,0,0,20.16,20.59H245.68Z"/></path><path fill="url(#SVGqx4JLdqu1)" stroke="#f8af18" strokeMiterlimit="10" strokeWidth="4" d="M402.3 369.8v-66.4c0-12.3-8.9-22.4-19.8-22.4h-62.6c-49.2 0-94.2 31.4-116.4 81.1l-13.4 30h192.4c11 0 19.8-10 19.8-22.4Z"/><use width="138" height="96" href="#SVG4kZjFbOe1" transform="matrix(-1 0 0 1 237 146)"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><defs><linearGradient id="SVGExAgHelM1" x1="54.5" x2="89.2" y1="2.2" y2="62.2" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#d4d7dd"/><stop offset=".5" stop-color="#d4d7dd"/><stop offset="1" stop-color="#bec1c6"/></linearGradient><linearGradient id="SVG7Rf6EQLM1" x1="31.4" x2="68.3" y1="37.6" y2="101.4" href="#SVGExAgHelM1"/><linearGradient id="SVGLRHJlbus" x1="1203.2" x2="1274" y1="-755.7" y2="-633.1" gradientTransform="rotate(-8.1 7810.753 6580.212)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#875b34"/><stop offset=".5" stop-color="#875b34"/><stop offset="1" stop-color="#624226"/></linearGradient><linearGradient id="SVGm83z0ZPE" x1="1212" x2="1273.3" y1="-794.5" y2="-688.3" gradientTransform="rotate(-8.1 7810.753 6580.212)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#51cf66"/><stop offset=".5" stop-color="#51cf66"/><stop offset="1" stop-color="#37b24d"/></linearGradient><linearGradient id="SVGp9eIecsO1" x1="135.1" x2="210" y1="283.2" y2="412.8" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#3392d6"/><stop offset=".5" stop-color="#3392d6"/><stop offset="1" stop-color="#2477b2"/></linearGradient><linearGradient id="SVGqx4JLdqu1" x1="266.8" x2="339.6" y1="293.6" y2="419.7" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fbbf24"/><stop offset=".5" stop-color="#fbbf24"/><stop offset="1" stop-color="#f59e0b"/></linearGradient><symbol id="SVG4kZjFbOe1" viewBox="0 0 138 96"><path fill="none" stroke="url(#SVGExAgHelM1)" stroke-dasharray="58" stroke-linecap="round" stroke-miterlimit="10" stroke-width="12" d="M105.2 10.8A15.6 15.6 0 1 1 116.4 37H6"><animate attributeName="stroke-dashoffset" dur="6s" repeatCount="indefinite" values="0; 1274"/></path><path fill="none" stroke="url(#SVG7Rf6EQLM1)" stroke-dasharray="43" stroke-linecap="round" stroke-miterlimit="10" stroke-width="12" d="M60.7 85.2A15.6 15.6 0 1 0 71.9 59H6.6"><animate attributeName="stroke-dashoffset" dur="6s" repeatCount="indefinite" values="0; 857"/></path></symbol></defs><path fill="url(#SVGLRHJlbus)" stroke="#744e2d" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M353.7 160.3c-1-6.9-3.2-12.2-5-12l-1.3.2c-1.7.3-2.4 6-1.6 12.8l17 135c.8 7.1 3 13 5 12.7l3.5-.5c1.8-.3 2.4-6.4 1.4-13.6Z"/><path fill="url(#SVGm83z0ZPE)" stroke="#40c057" stroke-linecap="round" stroke-miterlimit="10" stroke-width="4" d="M403 153.2c-3.2-23.4-26-39.7-50.8-36.4a46 46 0 0 0-36.3 26.7h-2.2c-18.7 2.5-32 18.8-29.6 36.4a32.4 32.4 0 0 0 28.5 27.1a20.3 20.3 0 0 0-.7 8.7a22 22 0 0 0 25.3 18.3a23.4 23.4 0 0 0 14-7.3a34.7 34.7 0 0 0 28.3 8.8c18.6-2.5 31.9-18.7 29.5-36.3a30.8 30.8 0 0 0-11.4-20a41 41 0 0 0 5.3-26Z"><animateTransform additive="sum" attributeName="transform" calcMode="spline" dur="3s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1; .42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" type="rotate" values="3 366 200; -3 366 200; 3 366 200; -3 366 200; 3 366 200"/></path><path fill="url(#SVGp9eIecsO1)" stroke="#2885c7" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"><animate attributeName="meteoconsWindOffshoreFill3" calcMode="spline" dur="3s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" values="M245.68,309.62c-13.79,0-26.33-14.73-32.8-27a2.88,2.88,0,0,0-5.13,0c-6.47,12.29-19,27-32.8,27s-26.33-14.73-32.81-27a2.87,2.87,0,0,0-5.12,0c-6.48,12.29-19,27-32.81,27H94.11v62a20.38,20.38,0,0,0,20.16,20.59H245.68Z; M245.68,333.62c-13.79,0-26.33-14.73-32.8-27a2.88,2.88,0,0,0-5.13,0c-6.47,12.29-19,27-32.8,27s-26.33-14.73-32.81-27a2.87,2.87,0,0,0-5.12,0c-6.48,12.29-19,27-32.81,27H94.11v38a20.38,20.38,0,0,0,20.16,20.59H245.68Z; M245.68,309.62c-13.79,0-26.33-14.73-32.8-27a2.88,2.88,0,0,0-5.13,0c-6.47,12.29-19,27-32.8,27s-26.33-14.73-32.81-27a2.87,2.87,0,0,0-5.12,0c-6.48,12.29-19,27-32.81,27H94.11v62a20.38,20.38,0,0,0,20.16,20.59H245.68Z"/></path><path fill="url(#SVGqx4JLdqu1)" stroke="#f8af18" stroke-miterlimit="10" stroke-width="4" d="M402.3 369.8v-66.4c0-12.3-8.9-22.4-19.8-22.4h-62.6c-49.2 0-94.2 31.4-116.4 81.1l-13.4 30h192.4c11 0 19.8-10 19.8-22.4Z"/><use width="138" height="96" href="#SVG4kZjFbOe1" transform="matrix(-1 0 0 1 237 146)"/></svg>
</template>

CSS

.icon-wind-offshore-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%22SVGExAgHelM1%22%20x1%3D%2254.5%22%20x2%3D%2289.2%22%20y1%3D%222.2%22%20y2%3D%2262.2%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%3ClinearGradient%20id%3D%22SVG7Rf6EQLM1%22%20x1%3D%2231.4%22%20x2%3D%2268.3%22%20y1%3D%2237.6%22%20y2%3D%22101.4%22%20href%3D%22%23SVGExAgHelM1%22%2F%3E%3ClinearGradient%20id%3D%22SVGLRHJlbus%22%20x1%3D%221203.2%22%20x2%3D%221274%22%20y1%3D%22-755.7%22%20y2%3D%22-633.1%22%20gradientTransform%3D%22rotate(-8.1%207810.753%206580.212)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23875b34%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23875b34%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23624226%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGm83z0ZPE%22%20x1%3D%221212%22%20x2%3D%221273.3%22%20y1%3D%22-794.5%22%20y2%3D%22-688.3%22%20gradientTransform%3D%22rotate(-8.1%207810.753%206580.212)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%2351cf66%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%2351cf66%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2337b24d%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGp9eIecsO1%22%20x1%3D%22135.1%22%20x2%3D%22210%22%20y1%3D%22283.2%22%20y2%3D%22412.8%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%22SVGqx4JLdqu1%22%20x1%3D%22266.8%22%20x2%3D%22339.6%22%20y1%3D%22293.6%22%20y2%3D%22419.7%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23fbbf24%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23fbbf24%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23f59e0b%22%2F%3E%3C%2FlinearGradient%3E%3Csymbol%20id%3D%22SVG4kZjFbOe1%22%20viewBox%3D%220%200%20138%2096%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22url(%23SVGExAgHelM1)%22%20stroke-dasharray%3D%2258%22%20stroke-linecap%3D%22round%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%2212%22%20d%3D%22M105.2%2010.8A15.6%2015.6%200%201%201%20116.4%2037H6%22%20stroke-dashoffset%3D%220%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22url(%23SVG7Rf6EQLM1)%22%20stroke-dasharray%3D%2243%22%20stroke-linecap%3D%22round%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%2212%22%20d%3D%22M60.7%2085.2A15.6%2015.6%200%201%200%2071.9%2059H6.6%22%20stroke-dashoffset%3D%220%22%3E%3C%2Fpath%3E%3C%2Fsymbol%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22url(%23SVGLRHJlbus)%22%20stroke%3D%22%23744e2d%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M353.7%20160.3c-1-6.9-3.2-12.2-5-12l-1.3.2c-1.7.3-2.4%206-1.6%2012.8l17%20135c.8%207.1%203%2013%205%2012.7l3.5-.5c1.8-.3%202.4-6.4%201.4-13.6Z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGm83z0ZPE)%22%20stroke%3D%22%2340c057%22%20stroke-linecap%3D%22round%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%224%22%20d%3D%22M403%20153.2c-3.2-23.4-26-39.7-50.8-36.4a46%2046%200%200%200-36.3%2026.7h-2.2c-18.7%202.5-32%2018.8-29.6%2036.4a32.4%2032.4%200%200%200%2028.5%2027.1a20.3%2020.3%200%200%200-.7%208.7a22%2022%200%200%200%2025.3%2018.3a23.4%2023.4%200%200%200%2014-7.3a34.7%2034.7%200%200%200%2028.3%208.8c18.6-2.5%2031.9-18.7%2029.5-36.3a30.8%2030.8%200%200%200-11.4-20a41%2041%200%200%200%205.3-26Z%22%20transform%3D%22rotate(3%20366%20200)%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22url(%23SVGp9eIecsO1)%22%20stroke%3D%22%232885c7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22url(%23SVGqx4JLdqu1)%22%20stroke%3D%22%23f8af18%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%224%22%20d%3D%22M402.3%20369.8v-66.4c0-12.3-8.9-22.4-19.8-22.4h-62.6c-49.2%200-94.2%2031.4-116.4%2081.1l-13.4%2030h192.4c11%200%2019.8-10%2019.8-22.4Z%22%2F%3E%3Cuse%20width%3D%22138%22%20height%3D%2296%22%20href%3D%22%23SVG4kZjFbOe1%22%20transform%3D%22matrix(-1%200%200%201%20237%20146)%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%22SVGExAgHelM1%22%20x1%3D%2254.5%22%20x2%3D%2289.2%22%20y1%3D%222.2%22%20y2%3D%2262.2%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%3ClinearGradient%20id%3D%22SVG7Rf6EQLM1%22%20x1%3D%2231.4%22%20x2%3D%2268.3%22%20y1%3D%2237.6%22%20y2%3D%22101.4%22%20href%3D%22%23SVGExAgHelM1%22%2F%3E%3ClinearGradient%20id%3D%22SVGLRHJlbus%22%20x1%3D%221203.2%22%20x2%3D%221274%22%20y1%3D%22-755.7%22%20y2%3D%22-633.1%22%20gradientTransform%3D%22rotate(-8.1%207810.753%206580.212)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23875b34%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23875b34%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23624226%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGm83z0ZPE%22%20x1%3D%221212%22%20x2%3D%221273.3%22%20y1%3D%22-794.5%22%20y2%3D%22-688.3%22%20gradientTransform%3D%22rotate(-8.1%207810.753%206580.212)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%2351cf66%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%2351cf66%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2337b24d%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGp9eIecsO1%22%20x1%3D%22135.1%22%20x2%3D%22210%22%20y1%3D%22283.2%22%20y2%3D%22412.8%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%22SVGqx4JLdqu1%22%20x1%3D%22266.8%22%20x2%3D%22339.6%22%20y1%3D%22293.6%22%20y2%3D%22419.7%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23fbbf24%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23fbbf24%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23f59e0b%22%2F%3E%3C%2FlinearGradient%3E%3Csymbol%20id%3D%22SVG4kZjFbOe1%22%20viewBox%3D%220%200%20138%2096%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22url(%23SVGExAgHelM1)%22%20stroke-dasharray%3D%2258%22%20stroke-linecap%3D%22round%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%2212%22%20d%3D%22M105.2%2010.8A15.6%2015.6%200%201%201%20116.4%2037H6%22%20stroke-dashoffset%3D%220%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22url(%23SVG7Rf6EQLM1)%22%20stroke-dasharray%3D%2243%22%20stroke-linecap%3D%22round%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%2212%22%20d%3D%22M60.7%2085.2A15.6%2015.6%200%201%200%2071.9%2059H6.6%22%20stroke-dashoffset%3D%220%22%3E%3C%2Fpath%3E%3C%2Fsymbol%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22url(%23SVGLRHJlbus)%22%20stroke%3D%22%23744e2d%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M353.7%20160.3c-1-6.9-3.2-12.2-5-12l-1.3.2c-1.7.3-2.4%206-1.6%2012.8l17%20135c.8%207.1%203%2013%205%2012.7l3.5-.5c1.8-.3%202.4-6.4%201.4-13.6Z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGm83z0ZPE)%22%20stroke%3D%22%2340c057%22%20stroke-linecap%3D%22round%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%224%22%20d%3D%22M403%20153.2c-3.2-23.4-26-39.7-50.8-36.4a46%2046%200%200%200-36.3%2026.7h-2.2c-18.7%202.5-32%2018.8-29.6%2036.4a32.4%2032.4%200%200%200%2028.5%2027.1a20.3%2020.3%200%200%200-.7%208.7a22%2022%200%200%200%2025.3%2018.3a23.4%2023.4%200%200%200%2014-7.3a34.7%2034.7%200%200%200%2028.3%208.8c18.6-2.5%2031.9-18.7%2029.5-36.3a30.8%2030.8%200%200%200-11.4-20a41%2041%200%200%200%205.3-26Z%22%20transform%3D%22rotate(3%20366%20200)%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22url(%23SVGp9eIecsO1)%22%20stroke%3D%22%232885c7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22url(%23SVGqx4JLdqu1)%22%20stroke%3D%22%23f8af18%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%224%22%20d%3D%22M402.3%20369.8v-66.4c0-12.3-8.9-22.4-19.8-22.4h-62.6c-49.2%200-94.2%2031.4-116.4%2081.1l-13.4%2030h192.4c11%200%2019.8-10%2019.8-22.4Z%22%2F%3E%3Cuse%20width%3D%22138%22%20height%3D%2296%22%20href%3D%22%23SVG4kZjFbOe1%22%20transform%3D%22matrix(-1%200%200%201%20237%20146)%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.