clover icon

clover-fill from Phosphor by Phosphor Icons · Fill · MIT Free for personal and commercial use.

Name: clover-fill
Set: Phosphor
Style: Fill
Viewbox: 256×256
License: MIT

5 other variants in Phosphor

clover clover-bold clover-duotone clover-light clover-thin

The same icon in other sets

cloverFont Awesome 6 Solid cloverFont Awesome Solid clover-12-filledFluent UI System Icons cloverHuge Icons cloverLucide cloverMaterial Design Icons cloverTabler Icons cloverWeb3 Icons cloverWeb3 Icons Branded

Use the clover icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M228 120c0 22.63-6 36.72-17.93 41.87a27.3 27.3 0 0 1-11 2.13a41.8 41.8 0 0 1-8.4-.93a4.05 4.05 0 0 1-2.52-1.64a368.5 368.5 0 0 0-47.75-55.26a8 8 0 0 0-11 11.62c14.84 13.91 64.13 63.49 78.32 120.27a8 8 0 0 1-5.82 9.7a8 8 0 0 1-1.9.24a8 8 0 0 1-7.75-6.06c-4.12-16.47-11.65-32.48-20.46-47.09a25.9 25.9 0 0 1-1.9 7.21C164.72 214 150.63 220 128 220s-36.72-6-41.88-17.94c-5.45-12.58-.39-30.82 15-54.21c.68-1 1.36-2 2-3l-3 2C82.84 158.27 68.35 164 56.89 164a27.3 27.3 0 0 1-11-2.13C34 156.72 28 142.63 28 120s6-36.72 17.93-41.88c12.59-5.45 30.83-.39 54.22 15l3 2l-2-3c-15.41-23.39-20.47-41.63-15-54.22C91.28 26 105.37 20 128 20s36.72 6 41.88 17.93c5.45 12.59.39 30.83-15 54.22q-1 1.53-2 3l3-2c23.39-15.41 41.63-20.47 54.22-15C222 83.28 228 97.37 228 120"/></svg>

React

import type { SVGProps } from "react";

export function PhCloverFill(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M228 120c0 22.63-6 36.72-17.93 41.87a27.3 27.3 0 0 1-11 2.13a41.8 41.8 0 0 1-8.4-.93a4.05 4.05 0 0 1-2.52-1.64a368.5 368.5 0 0 0-47.75-55.26a8 8 0 0 0-11 11.62c14.84 13.91 64.13 63.49 78.32 120.27a8 8 0 0 1-5.82 9.7a8 8 0 0 1-1.9.24a8 8 0 0 1-7.75-6.06c-4.12-16.47-11.65-32.48-20.46-47.09a25.9 25.9 0 0 1-1.9 7.21C164.72 214 150.63 220 128 220s-36.72-6-41.88-17.94c-5.45-12.58-.39-30.82 15-54.21c.68-1 1.36-2 2-3l-3 2C82.84 158.27 68.35 164 56.89 164a27.3 27.3 0 0 1-11-2.13C34 156.72 28 142.63 28 120s6-36.72 17.93-41.88c12.59-5.45 30.83-.39 54.22 15l3 2l-2-3c-15.41-23.39-20.47-41.63-15-54.22C91.28 26 105.37 20 128 20s36.72 6 41.88 17.93c5.45 12.59.39 30.83-15 54.22q-1 1.53-2 3l3-2c23.39-15.41 41.63-20.47 54.22-15C222 83.28 228 97.37 228 120"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M228 120c0 22.63-6 36.72-17.93 41.87a27.3 27.3 0 0 1-11 2.13a41.8 41.8 0 0 1-8.4-.93a4.05 4.05 0 0 1-2.52-1.64a368.5 368.5 0 0 0-47.75-55.26a8 8 0 0 0-11 11.62c14.84 13.91 64.13 63.49 78.32 120.27a8 8 0 0 1-5.82 9.7a8 8 0 0 1-1.9.24a8 8 0 0 1-7.75-6.06c-4.12-16.47-11.65-32.48-20.46-47.09a25.9 25.9 0 0 1-1.9 7.21C164.72 214 150.63 220 128 220s-36.72-6-41.88-17.94c-5.45-12.58-.39-30.82 15-54.21c.68-1 1.36-2 2-3l-3 2C82.84 158.27 68.35 164 56.89 164a27.3 27.3 0 0 1-11-2.13C34 156.72 28 142.63 28 120s6-36.72 17.93-41.88c12.59-5.45 30.83-.39 54.22 15l3 2l-2-3c-15.41-23.39-20.47-41.63-15-54.22C91.28 26 105.37 20 128 20s36.72 6 41.88 17.93c5.45 12.59.39 30.83-15 54.22q-1 1.53-2 3l3-2c23.39-15.41 41.63-20.47 54.22-15C222 83.28 228 97.37 228 120"/></svg>
</template>

CSS

.icon-clover-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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M228%20120c0%2022.63-6%2036.72-17.93%2041.87a27.3%2027.3%200%200%201-11%202.13a41.8%2041.8%200%200%201-8.4-.93a4.05%204.05%200%200%201-2.52-1.64a368.5%20368.5%200%200%200-47.75-55.26a8%208%200%200%200-11%2011.62c14.84%2013.91%2064.13%2063.49%2078.32%20120.27a8%208%200%200%201-5.82%209.7a8%208%200%200%201-1.9.24a8%208%200%200%201-7.75-6.06c-4.12-16.47-11.65-32.48-20.46-47.09a25.9%2025.9%200%200%201-1.9%207.21C164.72%20214%20150.63%20220%20128%20220s-36.72-6-41.88-17.94c-5.45-12.58-.39-30.82%2015-54.21c.68-1%201.36-2%202-3l-3%202C82.84%20158.27%2068.35%20164%2056.89%20164a27.3%2027.3%200%200%201-11-2.13C34%20156.72%2028%20142.63%2028%20120s6-36.72%2017.93-41.88c12.59-5.45%2030.83-.39%2054.22%2015l3%202l-2-3c-15.41-23.39-20.47-41.63-15-54.22C91.28%2026%20105.37%2020%20128%2020s36.72%206%2041.88%2017.93c5.45%2012.59.39%2030.83-15%2054.22q-1%201.53-2%203l3-2c23.39-15.41%2041.63-20.47%2054.22-15C222%2083.28%20228%2097.37%20228%20120%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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M228%20120c0%2022.63-6%2036.72-17.93%2041.87a27.3%2027.3%200%200%201-11%202.13a41.8%2041.8%200%200%201-8.4-.93a4.05%204.05%200%200%201-2.52-1.64a368.5%20368.5%200%200%200-47.75-55.26a8%208%200%200%200-11%2011.62c14.84%2013.91%2064.13%2063.49%2078.32%20120.27a8%208%200%200%201-5.82%209.7a8%208%200%200%201-1.9.24a8%208%200%200%201-7.75-6.06c-4.12-16.47-11.65-32.48-20.46-47.09a25.9%2025.9%200%200%201-1.9%207.21C164.72%20214%20150.63%20220%20128%20220s-36.72-6-41.88-17.94c-5.45-12.58-.39-30.82%2015-54.21c.68-1%201.36-2%202-3l-3%202C82.84%20158.27%2068.35%20164%2056.89%20164a27.3%2027.3%200%200%201-11-2.13C34%20156.72%2028%20142.63%2028%20120s6-36.72%2017.93-41.88c12.59-5.45%2030.83-.39%2054.22%2015l3%202l-2-3c-15.41-23.39-20.47-41.63-15-54.22C91.28%2026%20105.37%2020%20128%2020s36.72%206%2041.88%2017.93c5.45%2012.59.39%2030.83-15%2054.22q-1%201.53-2%203l3-2c23.39-15.41%2041.63-20.47%2054.22-15C222%2083.28%20228%2097.37%20228%20120%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/clover-fill.svg?color=%231a73e8&size=48