wind offshore icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><defs><clipPath id="SVGclnyNdxg6"><path fill="none" d="M245.7 256.9H74.8v139.6h110.9l27.2-52.9l32.8-36.8v-49.9z"/></clipPath><symbol id="SVGktimpeOD6" viewBox="0 0 138 96"><path fill="none" stroke="#e2e8f0" 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="#e2e8f0" 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="#744e2d" d="M353.4 158.3c-.8-5.8-2.9-10.2-4.6-10l-1.4.2c-1.7.3-2.6 5-1.8 10.9l14 113.5c.8 6 2.9 10.8 4.7 10.6l3.6-.5c1.8-.2 2.6-5.4 1.7-11.5Z"/><path fill="#40c057" 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><g clip-path="url(#SVGclnyNdxg6)"><path fill="none" stroke="#2885c7" stroke-linecap="round" stroke-linejoin="round" stroke-width="9" d="M245.7 309.6c-13.8 0-26.3-14.7-32.8-27a2.9 2.9 0 0 0-5.2 0c-6.4 12.3-19 27-32.7 27s-26.4-14.7-32.9-27a2.9 2.9 0 0 0-5 0c-6.6 12.3-19 27-32.9 27h-10v62a20.4 20.4 0 0 0 20 20.6h131.5Z"><animate attributeName="d" 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></g><path fill="none" stroke="#f8af18" stroke-miterlimit="10" stroke-width="9" 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="#SVGktimpeOD6" transform="matrix(-1 0 0 1 237 146)"/></svg>

React

import type { SVGProps } from "react";

export function MeteoconsWindOffshore(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><defs><clipPath id="SVGclnyNdxg6"><path fill="none" d="M245.7 256.9H74.8v139.6h110.9l27.2-52.9l32.8-36.8v-49.9z"/></clipPath><symbol id="SVGktimpeOD6" viewBox="0 0 138 96"><path fill="none" stroke="#e2e8f0" 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="#e2e8f0" 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="#744e2d" d="M353.4 158.3c-.8-5.8-2.9-10.2-4.6-10l-1.4.2c-1.7.3-2.6 5-1.8 10.9l14 113.5c.8 6 2.9 10.8 4.7 10.6l3.6-.5c1.8-.2 2.6-5.4 1.7-11.5Z"/><path fill="#40c057" 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><g clipPath="url(#SVGclnyNdxg6)"><path fill="none" stroke="#2885c7" strokeLinecap="round" strokeLinejoin="round" strokeWidth="9" d="M245.7 309.6c-13.8 0-26.3-14.7-32.8-27a2.9 2.9 0 0 0-5.2 0c-6.4 12.3-19 27-32.7 27s-26.4-14.7-32.9-27a2.9 2.9 0 0 0-5 0c-6.6 12.3-19 27-32.9 27h-10v62a20.4 20.4 0 0 0 20 20.6h131.5Z"><animate attributeName="d" 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></g><path fill="none" stroke="#f8af18" strokeMiterlimit="10" strokeWidth="9" 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="#SVGktimpeOD6" 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><clipPath id="SVGclnyNdxg6"><path fill="none" d="M245.7 256.9H74.8v139.6h110.9l27.2-52.9l32.8-36.8v-49.9z"/></clipPath><symbol id="SVGktimpeOD6" viewBox="0 0 138 96"><path fill="none" stroke="#e2e8f0" 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="#e2e8f0" 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="#744e2d" d="M353.4 158.3c-.8-5.8-2.9-10.2-4.6-10l-1.4.2c-1.7.3-2.6 5-1.8 10.9l14 113.5c.8 6 2.9 10.8 4.7 10.6l3.6-.5c1.8-.2 2.6-5.4 1.7-11.5Z"/><path fill="#40c057" 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><g clip-path="url(#SVGclnyNdxg6)"><path fill="none" stroke="#2885c7" stroke-linecap="round" stroke-linejoin="round" stroke-width="9" d="M245.7 309.6c-13.8 0-26.3-14.7-32.8-27a2.9 2.9 0 0 0-5.2 0c-6.4 12.3-19 27-32.7 27s-26.4-14.7-32.9-27a2.9 2.9 0 0 0-5 0c-6.6 12.3-19 27-32.9 27h-10v62a20.4 20.4 0 0 0 20 20.6h131.5Z"><animate attributeName="d" 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></g><path fill="none" stroke="#f8af18" stroke-miterlimit="10" stroke-width="9" 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="#SVGktimpeOD6" transform="matrix(-1 0 0 1 237 146)"/></svg>
</template>

CSS

.icon-wind-offshore {
  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%3CclipPath%20id%3D%22SVGclnyNdxg6%22%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M245.7%20256.9H74.8v139.6h110.9l27.2-52.9l32.8-36.8v-49.9z%22%2F%3E%3C%2FclipPath%3E%3Csymbol%20id%3D%22SVGktimpeOD6%22%20viewBox%3D%220%200%20138%2096%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23e2e8f0%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%22%23e2e8f0%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%22%23744e2d%22%20d%3D%22M353.4%20158.3c-.8-5.8-2.9-10.2-4.6-10l-1.4.2c-1.7.3-2.6%205-1.8%2010.9l14%20113.5c.8%206%202.9%2010.8%204.7%2010.6l3.6-.5c1.8-.2%202.6-5.4%201.7-11.5Z%22%2F%3E%3Cpath%20fill%3D%22%2340c057%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%3Cg%20clip-path%3D%22url(%23SVGclnyNdxg6)%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%232885c7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%229%22%20d%3D%22M245.7%20309.6c-13.8%200-26.3-14.7-32.8-27a2.9%202.9%200%200%200-5.2%200c-6.4%2012.3-19%2027-32.7%2027s-26.4-14.7-32.9-27a2.9%202.9%200%200%200-5%200c-6.6%2012.3-19%2027-32.9%2027h-10v62a20.4%2020.4%200%200%200%2020%2020.6h131.5Z%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23f8af18%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%229%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%23SVGktimpeOD6%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%3CclipPath%20id%3D%22SVGclnyNdxg6%22%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M245.7%20256.9H74.8v139.6h110.9l27.2-52.9l32.8-36.8v-49.9z%22%2F%3E%3C%2FclipPath%3E%3Csymbol%20id%3D%22SVGktimpeOD6%22%20viewBox%3D%220%200%20138%2096%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23e2e8f0%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%22%23e2e8f0%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%22%23744e2d%22%20d%3D%22M353.4%20158.3c-.8-5.8-2.9-10.2-4.6-10l-1.4.2c-1.7.3-2.6%205-1.8%2010.9l14%20113.5c.8%206%202.9%2010.8%204.7%2010.6l3.6-.5c1.8-.2%202.6-5.4%201.7-11.5Z%22%2F%3E%3Cpath%20fill%3D%22%2340c057%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%3Cg%20clip-path%3D%22url(%23SVGclnyNdxg6)%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%232885c7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%229%22%20d%3D%22M245.7%20309.6c-13.8%200-26.3-14.7-32.8-27a2.9%202.9%200%200%200-5.2%200c-6.4%2012.3-19%2027-32.7%2027s-26.4-14.7-32.9-27a2.9%202.9%200%200%200-5%200c-6.6%2012.3-19%2027-32.9%2027h-10v62a20.4%2020.4%200%200%200%2020%2020.6h131.5Z%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23f8af18%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%229%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%23SVGktimpeOD6%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.