pollen icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><defs><symbol id="SVG0NOCgbUl" viewBox="0 0 304 96"><circle cx="152" cy="16" r="16" fill="#f8af18"><animateTransform attributeName="transform" begin="-0.33s" calcMode="spline" dur="3s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" type="translate" values="0 -30; 0 30; 0 -30"/></circle><circle cx="200" cy="72" r="21.3" fill="#f8af18"><animateTransform attributeName="transform" begin="-1.17s" calcMode="spline" dur="3s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" type="translate" values="0 -30; 0 30; 0 -30"/></circle><circle cx="104" cy="72" r="21.3" fill="#f8af18"><animateTransform attributeName="transform" begin="-1s" calcMode="spline" dur="3s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" type="translate" values="0 -30; 0 30; 0 -30"/></circle><circle cx="16" cy="80" r="16" fill="#f8af18"><animateTransform attributeName="transform" begin="-.67s" calcMode="spline" dur="3s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" type="translate" values="0 -30; 0 30; 0 -30"/></circle><circle cx="288" cy="80" r="16" fill="#f8af18"><animateTransform attributeName="transform" begin="-1.5s" calcMode="spline" dur="3s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" type="translate" values="0 -30; 0 30; 0 -30"/></circle><circle cx="232" cy="24" r="10.7" fill="#f8af18"><animateTransform attributeName="transform" begin="-1.33s" calcMode="spline" dur="3s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" type="translate" values="0 -30; 0 30; 0 -30"/></circle><circle cx="72" cy="24" r="10.7" fill="#f8af18"><animateTransform attributeName="transform" begin="-.83s" calcMode="spline" dur="3s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" type="translate" values="0 -30; 0 30; 0 -30"/></circle></symbol></defs><use width="304" height="96" href="#SVG0NOCgbUl" transform="translate(104 208)"/></svg>

React

import type { SVGProps } from "react";

export function MeteoconsPollen(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><defs><symbol id="SVG0NOCgbUl" viewBox="0 0 304 96"><circle cx="152" cy="16" r="16" fill="#f8af18"><animateTransform attributeName="transform" begin="-0.33s" calcMode="spline" dur="3s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" type="translate" values="0 -30; 0 30; 0 -30"/></circle><circle cx="200" cy="72" r="21.3" fill="#f8af18"><animateTransform attributeName="transform" begin="-1.17s" calcMode="spline" dur="3s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" type="translate" values="0 -30; 0 30; 0 -30"/></circle><circle cx="104" cy="72" r="21.3" fill="#f8af18"><animateTransform attributeName="transform" begin="-1s" calcMode="spline" dur="3s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" type="translate" values="0 -30; 0 30; 0 -30"/></circle><circle cx="16" cy="80" r="16" fill="#f8af18"><animateTransform attributeName="transform" begin="-.67s" calcMode="spline" dur="3s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" type="translate" values="0 -30; 0 30; 0 -30"/></circle><circle cx="288" cy="80" r="16" fill="#f8af18"><animateTransform attributeName="transform" begin="-1.5s" calcMode="spline" dur="3s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" type="translate" values="0 -30; 0 30; 0 -30"/></circle><circle cx="232" cy="24" r="10.7" fill="#f8af18"><animateTransform attributeName="transform" begin="-1.33s" calcMode="spline" dur="3s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" type="translate" values="0 -30; 0 30; 0 -30"/></circle><circle cx="72" cy="24" r="10.7" fill="#f8af18"><animateTransform attributeName="transform" begin="-.83s" calcMode="spline" dur="3s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" type="translate" values="0 -30; 0 30; 0 -30"/></circle></symbol></defs><use width="304" height="96" href="#SVG0NOCgbUl" transform="translate(104 208)"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><defs><symbol id="SVG0NOCgbUl" viewBox="0 0 304 96"><circle cx="152" cy="16" r="16" fill="#f8af18"><animateTransform attributeName="transform" begin="-0.33s" calcMode="spline" dur="3s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" type="translate" values="0 -30; 0 30; 0 -30"/></circle><circle cx="200" cy="72" r="21.3" fill="#f8af18"><animateTransform attributeName="transform" begin="-1.17s" calcMode="spline" dur="3s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" type="translate" values="0 -30; 0 30; 0 -30"/></circle><circle cx="104" cy="72" r="21.3" fill="#f8af18"><animateTransform attributeName="transform" begin="-1s" calcMode="spline" dur="3s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" type="translate" values="0 -30; 0 30; 0 -30"/></circle><circle cx="16" cy="80" r="16" fill="#f8af18"><animateTransform attributeName="transform" begin="-.67s" calcMode="spline" dur="3s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" type="translate" values="0 -30; 0 30; 0 -30"/></circle><circle cx="288" cy="80" r="16" fill="#f8af18"><animateTransform attributeName="transform" begin="-1.5s" calcMode="spline" dur="3s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" type="translate" values="0 -30; 0 30; 0 -30"/></circle><circle cx="232" cy="24" r="10.7" fill="#f8af18"><animateTransform attributeName="transform" begin="-1.33s" calcMode="spline" dur="3s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" type="translate" values="0 -30; 0 30; 0 -30"/></circle><circle cx="72" cy="24" r="10.7" fill="#f8af18"><animateTransform attributeName="transform" begin="-.83s" calcMode="spline" dur="3s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" type="translate" values="0 -30; 0 30; 0 -30"/></circle></symbol></defs><use width="304" height="96" href="#SVG0NOCgbUl" transform="translate(104 208)"/></svg>
</template>

CSS

.icon-pollen {
  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%3Csymbol%20id%3D%22SVG0NOCgbUl%22%20viewBox%3D%220%200%20304%2096%22%3E%3Ccircle%20cx%3D%22152%22%20cy%3D%2216%22%20r%3D%2216%22%20fill%3D%22%23f8af18%22%20transform%3D%22translate(0%20-30)%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%2272%22%20r%3D%2221.3%22%20fill%3D%22%23f8af18%22%20transform%3D%22translate(0%20-30)%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22104%22%20cy%3D%2272%22%20r%3D%2221.3%22%20fill%3D%22%23f8af18%22%20transform%3D%22translate(0%20-30)%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2280%22%20r%3D%2216%22%20fill%3D%22%23f8af18%22%20transform%3D%22translate(0%20-30)%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22288%22%20cy%3D%2280%22%20r%3D%2216%22%20fill%3D%22%23f8af18%22%20transform%3D%22translate(0%20-30)%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22232%22%20cy%3D%2224%22%20r%3D%2210.7%22%20fill%3D%22%23f8af18%22%20transform%3D%22translate(0%20-30)%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2272%22%20cy%3D%2224%22%20r%3D%2210.7%22%20fill%3D%22%23f8af18%22%20transform%3D%22translate(0%20-30)%22%3E%3C%2Fcircle%3E%3C%2Fsymbol%3E%3C%2Fdefs%3E%3Cuse%20width%3D%22304%22%20height%3D%2296%22%20href%3D%22%23SVG0NOCgbUl%22%20transform%3D%22translate(104%20208)%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%3Csymbol%20id%3D%22SVG0NOCgbUl%22%20viewBox%3D%220%200%20304%2096%22%3E%3Ccircle%20cx%3D%22152%22%20cy%3D%2216%22%20r%3D%2216%22%20fill%3D%22%23f8af18%22%20transform%3D%22translate(0%20-30)%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%2272%22%20r%3D%2221.3%22%20fill%3D%22%23f8af18%22%20transform%3D%22translate(0%20-30)%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22104%22%20cy%3D%2272%22%20r%3D%2221.3%22%20fill%3D%22%23f8af18%22%20transform%3D%22translate(0%20-30)%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2280%22%20r%3D%2216%22%20fill%3D%22%23f8af18%22%20transform%3D%22translate(0%20-30)%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22288%22%20cy%3D%2280%22%20r%3D%2216%22%20fill%3D%22%23f8af18%22%20transform%3D%22translate(0%20-30)%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22232%22%20cy%3D%2224%22%20r%3D%2210.7%22%20fill%3D%22%23f8af18%22%20transform%3D%22translate(0%20-30)%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2272%22%20cy%3D%2224%22%20r%3D%2210.7%22%20fill%3D%22%23f8af18%22%20transform%3D%22translate(0%20-30)%22%3E%3C%2Fcircle%3E%3C%2Fsymbol%3E%3C%2Fdefs%3E%3Cuse%20width%3D%22304%22%20height%3D%2296%22%20href%3D%22%23SVG0NOCgbUl%22%20transform%3D%22translate(104%20208)%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.