wind toy icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M20.27,4.74a4.93,4.93,0,0,1,1.52,4.61,5.32,5.32,0,0,1-4.1,4.51,5.12,5.12,0,0,1-5.2-1.5,5.53,5.53,0,0,0,6.13-1.48A5.66,5.66,0,0,0,20.27,4.74ZM12.32,11.53a5.49,5.49,0,0,0-1.47-6.2A5.57,5.57,0,0,0,4.71,3.72,5.17,5.17,0,0,1,9.53,2.2,5.52,5.52,0,0,1,13.9,6.45,5.28,5.28,0,0,1,12.32,11.53ZM19.2,20.29a4.92,4.92,0,0,1-4.72,1.49,5.32,5.32,0,0,1-4.34-4.05A5.2,5.2,0,0,1,11.6,12.5a5.6,5.6,0,0,0,1.51,6.13A5.63,5.63,0,0,0,19.2,20.29ZM3.79,19.38A5.18,5.18,0,0,1,2.32,14a5.3,5.3,0,0,1,4.59-4,5,5,0,0,1,4.58,1.61,5.55,5.55,0,0,0-6.32,1.69A5.46,5.46,0,0,0,3.79,19.38ZM12.23,12a5.11,5.11,0,0,0,3.66-5,5.75,5.75,0,0,0-3.18-6,5,5,0,0,1,4.42,2.3,5.21,5.21,0,0,1,.24,5.92A5.4,5.4,0,0,1,12.23,12ZM11.76,12a5.18,5.18,0,0,0-3.68,5.09,5.58,5.58,0,0,0,3.19,5.79c-1,.35-2.9-.46-4-1.68A5.51,5.51,0,0,1,11.76,12ZM23,12.63a5.07,5.07,0,0,1-2.35,4.52,5.23,5.23,0,0,1-5.91.2,5.24,5.24,0,0,1-2.67-4.77,5.51,5.51,0,0,0,5.45,3.33A5.52,5.52,0,0,0,23,12.63ZM1,11.23a5,5,0,0,1,2.49-4.5,5.23,5.23,0,0,1,5.81-.06,5.3,5.3,0,0,1,2.61,4.74A5.56,5.56,0,0,0,6.56,8.06,5.71,5.71,0,0,0,1,11.23Z"><animateTransform attributeName="transform" dur="1.5s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></svg>

React

import type { SVGProps } from "react";

export function SvgSpinnersWindToy(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M20.27,4.74a4.93,4.93,0,0,1,1.52,4.61,5.32,5.32,0,0,1-4.1,4.51,5.12,5.12,0,0,1-5.2-1.5,5.53,5.53,0,0,0,6.13-1.48A5.66,5.66,0,0,0,20.27,4.74ZM12.32,11.53a5.49,5.49,0,0,0-1.47-6.2A5.57,5.57,0,0,0,4.71,3.72,5.17,5.17,0,0,1,9.53,2.2,5.52,5.52,0,0,1,13.9,6.45,5.28,5.28,0,0,1,12.32,11.53ZM19.2,20.29a4.92,4.92,0,0,1-4.72,1.49,5.32,5.32,0,0,1-4.34-4.05A5.2,5.2,0,0,1,11.6,12.5a5.6,5.6,0,0,0,1.51,6.13A5.63,5.63,0,0,0,19.2,20.29ZM3.79,19.38A5.18,5.18,0,0,1,2.32,14a5.3,5.3,0,0,1,4.59-4,5,5,0,0,1,4.58,1.61,5.55,5.55,0,0,0-6.32,1.69A5.46,5.46,0,0,0,3.79,19.38ZM12.23,12a5.11,5.11,0,0,0,3.66-5,5.75,5.75,0,0,0-3.18-6,5,5,0,0,1,4.42,2.3,5.21,5.21,0,0,1,.24,5.92A5.4,5.4,0,0,1,12.23,12ZM11.76,12a5.18,5.18,0,0,0-3.68,5.09,5.58,5.58,0,0,0,3.19,5.79c-1,.35-2.9-.46-4-1.68A5.51,5.51,0,0,1,11.76,12ZM23,12.63a5.07,5.07,0,0,1-2.35,4.52,5.23,5.23,0,0,1-5.91.2,5.24,5.24,0,0,1-2.67-4.77,5.51,5.51,0,0,0,5.45,3.33A5.52,5.52,0,0,0,23,12.63ZM1,11.23a5,5,0,0,1,2.49-4.5,5.23,5.23,0,0,1,5.81-.06,5.3,5.3,0,0,1,2.61,4.74A5.56,5.56,0,0,0,6.56,8.06,5.71,5.71,0,0,0,1,11.23Z"><animateTransform attributeName="transform" dur="1.5s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M20.27,4.74a4.93,4.93,0,0,1,1.52,4.61,5.32,5.32,0,0,1-4.1,4.51,5.12,5.12,0,0,1-5.2-1.5,5.53,5.53,0,0,0,6.13-1.48A5.66,5.66,0,0,0,20.27,4.74ZM12.32,11.53a5.49,5.49,0,0,0-1.47-6.2A5.57,5.57,0,0,0,4.71,3.72,5.17,5.17,0,0,1,9.53,2.2,5.52,5.52,0,0,1,13.9,6.45,5.28,5.28,0,0,1,12.32,11.53ZM19.2,20.29a4.92,4.92,0,0,1-4.72,1.49,5.32,5.32,0,0,1-4.34-4.05A5.2,5.2,0,0,1,11.6,12.5a5.6,5.6,0,0,0,1.51,6.13A5.63,5.63,0,0,0,19.2,20.29ZM3.79,19.38A5.18,5.18,0,0,1,2.32,14a5.3,5.3,0,0,1,4.59-4,5,5,0,0,1,4.58,1.61,5.55,5.55,0,0,0-6.32,1.69A5.46,5.46,0,0,0,3.79,19.38ZM12.23,12a5.11,5.11,0,0,0,3.66-5,5.75,5.75,0,0,0-3.18-6,5,5,0,0,1,4.42,2.3,5.21,5.21,0,0,1,.24,5.92A5.4,5.4,0,0,1,12.23,12ZM11.76,12a5.18,5.18,0,0,0-3.68,5.09,5.58,5.58,0,0,0,3.19,5.79c-1,.35-2.9-.46-4-1.68A5.51,5.51,0,0,1,11.76,12ZM23,12.63a5.07,5.07,0,0,1-2.35,4.52,5.23,5.23,0,0,1-5.91.2,5.24,5.24,0,0,1-2.67-4.77,5.51,5.51,0,0,0,5.45,3.33A5.52,5.52,0,0,0,23,12.63ZM1,11.23a5,5,0,0,1,2.49-4.5,5.23,5.23,0,0,1,5.81-.06,5.3,5.3,0,0,1,2.61,4.74A5.56,5.56,0,0,0,6.56,8.06,5.71,5.71,0,0,0,1,11.23Z"><animateTransform attributeName="transform" dur="1.5s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></svg>
</template>

CSS

.icon-wind-toy {
  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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M20.27%2C4.74a4.93%2C4.93%2C0%2C0%2C1%2C1.52%2C4.61%2C5.32%2C5.32%2C0%2C0%2C1-4.1%2C4.51%2C5.12%2C5.12%2C0%2C0%2C1-5.2-1.5%2C5.53%2C5.53%2C0%2C0%2C0%2C6.13-1.48A5.66%2C5.66%2C0%2C0%2C0%2C20.27%2C4.74ZM12.32%2C11.53a5.49%2C5.49%2C0%2C0%2C0-1.47-6.2A5.57%2C5.57%2C0%2C0%2C0%2C4.71%2C3.72%2C5.17%2C5.17%2C0%2C0%2C1%2C9.53%2C2.2%2C5.52%2C5.52%2C0%2C0%2C1%2C13.9%2C6.45%2C5.28%2C5.28%2C0%2C0%2C1%2C12.32%2C11.53ZM19.2%2C20.29a4.92%2C4.92%2C0%2C0%2C1-4.72%2C1.49%2C5.32%2C5.32%2C0%2C0%2C1-4.34-4.05A5.2%2C5.2%2C0%2C0%2C1%2C11.6%2C12.5a5.6%2C5.6%2C0%2C0%2C0%2C1.51%2C6.13A5.63%2C5.63%2C0%2C0%2C0%2C19.2%2C20.29ZM3.79%2C19.38A5.18%2C5.18%2C0%2C0%2C1%2C2.32%2C14a5.3%2C5.3%2C0%2C0%2C1%2C4.59-4%2C5%2C5%2C0%2C0%2C1%2C4.58%2C1.61%2C5.55%2C5.55%2C0%2C0%2C0-6.32%2C1.69A5.46%2C5.46%2C0%2C0%2C0%2C3.79%2C19.38ZM12.23%2C12a5.11%2C5.11%2C0%2C0%2C0%2C3.66-5%2C5.75%2C5.75%2C0%2C0%2C0-3.18-6%2C5%2C5%2C0%2C0%2C1%2C4.42%2C2.3%2C5.21%2C5.21%2C0%2C0%2C1%2C.24%2C5.92A5.4%2C5.4%2C0%2C0%2C1%2C12.23%2C12ZM11.76%2C12a5.18%2C5.18%2C0%2C0%2C0-3.68%2C5.09%2C5.58%2C5.58%2C0%2C0%2C0%2C3.19%2C5.79c-1%2C.35-2.9-.46-4-1.68A5.51%2C5.51%2C0%2C0%2C1%2C11.76%2C12ZM23%2C12.63a5.07%2C5.07%2C0%2C0%2C1-2.35%2C4.52%2C5.23%2C5.23%2C0%2C0%2C1-5.91.2%2C5.24%2C5.24%2C0%2C0%2C1-2.67-4.77%2C5.51%2C5.51%2C0%2C0%2C0%2C5.45%2C3.33A5.52%2C5.52%2C0%2C0%2C0%2C23%2C12.63ZM1%2C11.23a5%2C5%2C0%2C0%2C1%2C2.49-4.5%2C5.23%2C5.23%2C0%2C0%2C1%2C5.81-.06%2C5.3%2C5.3%2C0%2C0%2C1%2C2.61%2C4.74A5.56%2C5.56%2C0%2C0%2C0%2C6.56%2C8.06%2C5.71%2C5.71%2C0%2C0%2C0%2C1%2C11.23Z%22%20transform%3D%22rotate(360%2012%2012)%22%3E%3C%2Fpath%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M20.27%2C4.74a4.93%2C4.93%2C0%2C0%2C1%2C1.52%2C4.61%2C5.32%2C5.32%2C0%2C0%2C1-4.1%2C4.51%2C5.12%2C5.12%2C0%2C0%2C1-5.2-1.5%2C5.53%2C5.53%2C0%2C0%2C0%2C6.13-1.48A5.66%2C5.66%2C0%2C0%2C0%2C20.27%2C4.74ZM12.32%2C11.53a5.49%2C5.49%2C0%2C0%2C0-1.47-6.2A5.57%2C5.57%2C0%2C0%2C0%2C4.71%2C3.72%2C5.17%2C5.17%2C0%2C0%2C1%2C9.53%2C2.2%2C5.52%2C5.52%2C0%2C0%2C1%2C13.9%2C6.45%2C5.28%2C5.28%2C0%2C0%2C1%2C12.32%2C11.53ZM19.2%2C20.29a4.92%2C4.92%2C0%2C0%2C1-4.72%2C1.49%2C5.32%2C5.32%2C0%2C0%2C1-4.34-4.05A5.2%2C5.2%2C0%2C0%2C1%2C11.6%2C12.5a5.6%2C5.6%2C0%2C0%2C0%2C1.51%2C6.13A5.63%2C5.63%2C0%2C0%2C0%2C19.2%2C20.29ZM3.79%2C19.38A5.18%2C5.18%2C0%2C0%2C1%2C2.32%2C14a5.3%2C5.3%2C0%2C0%2C1%2C4.59-4%2C5%2C5%2C0%2C0%2C1%2C4.58%2C1.61%2C5.55%2C5.55%2C0%2C0%2C0-6.32%2C1.69A5.46%2C5.46%2C0%2C0%2C0%2C3.79%2C19.38ZM12.23%2C12a5.11%2C5.11%2C0%2C0%2C0%2C3.66-5%2C5.75%2C5.75%2C0%2C0%2C0-3.18-6%2C5%2C5%2C0%2C0%2C1%2C4.42%2C2.3%2C5.21%2C5.21%2C0%2C0%2C1%2C.24%2C5.92A5.4%2C5.4%2C0%2C0%2C1%2C12.23%2C12ZM11.76%2C12a5.18%2C5.18%2C0%2C0%2C0-3.68%2C5.09%2C5.58%2C5.58%2C0%2C0%2C0%2C3.19%2C5.79c-1%2C.35-2.9-.46-4-1.68A5.51%2C5.51%2C0%2C0%2C1%2C11.76%2C12ZM23%2C12.63a5.07%2C5.07%2C0%2C0%2C1-2.35%2C4.52%2C5.23%2C5.23%2C0%2C0%2C1-5.91.2%2C5.24%2C5.24%2C0%2C0%2C1-2.67-4.77%2C5.51%2C5.51%2C0%2C0%2C0%2C5.45%2C3.33A5.52%2C5.52%2C0%2C0%2C0%2C23%2C12.63ZM1%2C11.23a5%2C5%2C0%2C0%2C1%2C2.49-4.5%2C5.23%2C5.23%2C0%2C0%2C1%2C5.81-.06%2C5.3%2C5.3%2C0%2C0%2C1%2C2.61%2C4.74A5.56%2C5.56%2C0%2C0%2C0%2C6.56%2C8.06%2C5.71%2C5.71%2C0%2C0%2C0%2C1%2C11.23Z%22%20transform%3D%22rotate(360%2012%2012)%22%3E%3C%2Fpath%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.