wind onshore icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><defs><clipPath id="SVGclnyNdxg"><path fill="none" d="M245.7 256.9H74.8v139.6h110.9l27.2-52.9l32.8-36.8v-49.9z"/></clipPath><symbol id="SVGktimpeOD" 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="M378.5 160.6c.5-5.8-.4-10.5-2.2-10.6l-1.4-.2c-1.7-.2-3.6 4.2-4.3 10l-12.8 111.6c-.7 6 .2 11 2 11.3l3.6.3c1.9.2 3.8-4.5 4.4-10.5Z"/><path fill="#40c057" d="M427.8 167.4a44.2 44.2 0 0 0-40.8-47.3a46 46 0 0 0-41.5 17.4l-2.2-.5c-18.7-2-35.4 10.7-37.2 28.4a32.4 32.4 0 0 0 21.3 33a20.2 20.2 0 0 0-2.8 8.4c-1.3 11.7 7.9 22.3 20.3 23.6a23.4 23.4 0 0 0 15.4-3.7a34.7 34.7 0 0 0 25.4 15.2c18.7 2 35.4-10.8 37.2-28.4a30.8 30.8 0 0 0-6.4-22a41 41 0 0 0 11.3-24.1Z"><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 330 200; -3 330 200; 3 330 200; -3 330 200; 3 330 200"/></path><g clip-path="url(#SVGclnyNdxg)"><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.6a120 120 0 0 0-74.2 26.3a143.7 143.7 0 0 0-42.2 54.8l-13.4 30h192.4c11 0 19.8-10 19.8-22.4Z"/><use width="138" height="96" href="#SVGktimpeOD" transform="translate(99 146)"/></svg>

React

import type { SVGProps } from "react";

export function MeteoconsWindOnshore(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="SVGclnyNdxg"><path fill="none" d="M245.7 256.9H74.8v139.6h110.9l27.2-52.9l32.8-36.8v-49.9z"/></clipPath><symbol id="SVGktimpeOD" 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="M378.5 160.6c.5-5.8-.4-10.5-2.2-10.6l-1.4-.2c-1.7-.2-3.6 4.2-4.3 10l-12.8 111.6c-.7 6 .2 11 2 11.3l3.6.3c1.9.2 3.8-4.5 4.4-10.5Z"/><path fill="#40c057" d="M427.8 167.4a44.2 44.2 0 0 0-40.8-47.3a46 46 0 0 0-41.5 17.4l-2.2-.5c-18.7-2-35.4 10.7-37.2 28.4a32.4 32.4 0 0 0 21.3 33a20.2 20.2 0 0 0-2.8 8.4c-1.3 11.7 7.9 22.3 20.3 23.6a23.4 23.4 0 0 0 15.4-3.7a34.7 34.7 0 0 0 25.4 15.2c18.7 2 35.4-10.8 37.2-28.4a30.8 30.8 0 0 0-6.4-22a41 41 0 0 0 11.3-24.1Z"><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 330 200; -3 330 200; 3 330 200; -3 330 200; 3 330 200"/></path><g clipPath="url(#SVGclnyNdxg)"><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.6a120 120 0 0 0-74.2 26.3a143.7 143.7 0 0 0-42.2 54.8l-13.4 30h192.4c11 0 19.8-10 19.8-22.4Z"/><use width="138" height="96" href="#SVGktimpeOD" transform="translate(99 146)"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><defs><clipPath id="SVGclnyNdxg"><path fill="none" d="M245.7 256.9H74.8v139.6h110.9l27.2-52.9l32.8-36.8v-49.9z"/></clipPath><symbol id="SVGktimpeOD" 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="M378.5 160.6c.5-5.8-.4-10.5-2.2-10.6l-1.4-.2c-1.7-.2-3.6 4.2-4.3 10l-12.8 111.6c-.7 6 .2 11 2 11.3l3.6.3c1.9.2 3.8-4.5 4.4-10.5Z"/><path fill="#40c057" d="M427.8 167.4a44.2 44.2 0 0 0-40.8-47.3a46 46 0 0 0-41.5 17.4l-2.2-.5c-18.7-2-35.4 10.7-37.2 28.4a32.4 32.4 0 0 0 21.3 33a20.2 20.2 0 0 0-2.8 8.4c-1.3 11.7 7.9 22.3 20.3 23.6a23.4 23.4 0 0 0 15.4-3.7a34.7 34.7 0 0 0 25.4 15.2c18.7 2 35.4-10.8 37.2-28.4a30.8 30.8 0 0 0-6.4-22a41 41 0 0 0 11.3-24.1Z"><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 330 200; -3 330 200; 3 330 200; -3 330 200; 3 330 200"/></path><g clip-path="url(#SVGclnyNdxg)"><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.6a120 120 0 0 0-74.2 26.3a143.7 143.7 0 0 0-42.2 54.8l-13.4 30h192.4c11 0 19.8-10 19.8-22.4Z"/><use width="138" height="96" href="#SVGktimpeOD" transform="translate(99 146)"/></svg>
</template>

CSS

.icon-wind-onshore {
  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%22SVGclnyNdxg%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%22SVGktimpeOD%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%22M378.5%20160.6c.5-5.8-.4-10.5-2.2-10.6l-1.4-.2c-1.7-.2-3.6%204.2-4.3%2010l-12.8%20111.6c-.7%206%20.2%2011%202%2011.3l3.6.3c1.9.2%203.8-4.5%204.4-10.5Z%22%2F%3E%3Cpath%20fill%3D%22%2340c057%22%20d%3D%22M427.8%20167.4a44.2%2044.2%200%200%200-40.8-47.3a46%2046%200%200%200-41.5%2017.4l-2.2-.5c-18.7-2-35.4%2010.7-37.2%2028.4a32.4%2032.4%200%200%200%2021.3%2033a20.2%2020.2%200%200%200-2.8%208.4c-1.3%2011.7%207.9%2022.3%2020.3%2023.6a23.4%2023.4%200%200%200%2015.4-3.7a34.7%2034.7%200%200%200%2025.4%2015.2c18.7%202%2035.4-10.8%2037.2-28.4a30.8%2030.8%200%200%200-6.4-22a41%2041%200%200%200%2011.3-24.1Z%22%20transform%3D%22rotate(3%20330%20200)%22%3E%3C%2Fpath%3E%3Cg%20clip-path%3D%22url(%23SVGclnyNdxg)%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.6a120%20120%200%200%200-74.2%2026.3a143.7%20143.7%200%200%200-42.2%2054.8l-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%23SVGktimpeOD%22%20transform%3D%22translate(99%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%22SVGclnyNdxg%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%22SVGktimpeOD%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%22M378.5%20160.6c.5-5.8-.4-10.5-2.2-10.6l-1.4-.2c-1.7-.2-3.6%204.2-4.3%2010l-12.8%20111.6c-.7%206%20.2%2011%202%2011.3l3.6.3c1.9.2%203.8-4.5%204.4-10.5Z%22%2F%3E%3Cpath%20fill%3D%22%2340c057%22%20d%3D%22M427.8%20167.4a44.2%2044.2%200%200%200-40.8-47.3a46%2046%200%200%200-41.5%2017.4l-2.2-.5c-18.7-2-35.4%2010.7-37.2%2028.4a32.4%2032.4%200%200%200%2021.3%2033a20.2%2020.2%200%200%200-2.8%208.4c-1.3%2011.7%207.9%2022.3%2020.3%2023.6a23.4%2023.4%200%200%200%2015.4-3.7a34.7%2034.7%200%200%200%2025.4%2015.2c18.7%202%2035.4-10.8%2037.2-28.4a30.8%2030.8%200%200%200-6.4-22a41%2041%200%200%200%2011.3-24.1Z%22%20transform%3D%22rotate(3%20330%20200)%22%3E%3C%2Fpath%3E%3Cg%20clip-path%3D%22url(%23SVGclnyNdxg)%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.6a120%20120%200%200%200-74.2%2026.3a143.7%20143.7%200%200%200-42.2%2054.8l-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%23SVGktimpeOD%22%20transform%3D%22translate(99%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.