Skip to content
Cuelark UI

Hover the icon or press Play. Suggested motion: beat. Pick another to preview it and update the animated code:

Phosphor Icons · PiCloverThin

Clover Thin icon

A free clover thin icon from Phosphor Icons, ready for React. Use it static or animated: both versions are below, copy-paste or one shadcn command away. Sized in em and colored by currentColor.

License
MIT license
Project
github.com
Download SVG
Install with shadcn
npx shadcn@latest add https://ui.cuelark.com/r/icons/phosphor/clover-thin.json
components/icons/phosphor-clover-thin.tsx
import * as React from "react";

/**
 * Clover Thin from Phosphor Icons (https://github.com/phosphor-icons/core), MIT.
 * Via Cuelark UI: ui.cuelark.com/icons/phosphor/clover-thin. Sized in em, colored by currentColor.
 */
export function PiCloverThinIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 256 256"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M210.07,161.88C222,156.72,228,142.63,228,120s-6-36.72-17.93-41.88c-12.59-5.45-30.83-.39-54.22,15l-3,2q1-1.5,2-3c15.41-23.39,20.47-41.63,15-54.22C164.72,26,150.63,20,128,20S91.28,26,86.12,37.93c-5.45,12.59-.39,30.83,15,54.22q1,1.53,2,3l-3-2c-23.39-15.41-41.63-20.47-54.22-15C34,83.28,28,97.37,28,120s6,36.72,17.93,41.88a27.47,27.47,0,0,0,11,2.12c11.46,0,26-5.73,43.26-17.14l3-2q-1,1.5-2,3c-15.41,23.39-20.47,41.63-15,54.21C91.28,214,105.37,220,128,220s36.72-6,41.88-17.94c3.81-8.8,2.47-20.39-3.95-34.56C181.58,188,197.34,213.86,204.12,241a4,4,0,0,0,3.88,3,4.09,4.09,0,0,0,1-.12,4,4,0,0,0,2.91-4.85c-8.41-33.65-29.45-64.78-48-87.2,13.82,8.09,25.62,12.17,35.26,12.17A27.47,27.47,0,0,0,210.07,161.88ZM93.47,41.11C97.24,32.41,108.86,28,128,28s30.76,4.41,34.53,13.11c8.21,18.94-19.86,56.41-34.53,73C113.33,97.52,85.26,60.05,93.47,41.11ZM49.11,154.53C40.41,150.76,36,139.14,36,120s4.41-30.76,13.11-34.53A19.41,19.41,0,0,1,56.91,84c20.08,0,50.66,23.15,65.15,36C105.52,134.67,68.05,162.74,49.11,154.53Zm113.42,44.36C158.76,207.59,147.14,212,128,212s-30.76-4.41-34.53-13.11C85.26,180,113.33,142.48,128,125.94,142.67,142.48,170.74,180,162.53,198.89Zm-28.42-78.74L134,120c16.54-14.68,54-42.75,72.94-34.53C215.59,89.24,220,100.86,220,120s-4.41,30.76-13.11,34.53C188,162.71,150.73,134.86,134.11,120.15Z"
      />
    </svg>
  );
}
With react-icons
import { PiCloverThin } from "react-icons/pi";

export function Example() {
  return <PiCloverThin className="size-5" />;
}
clover-thin.svg
<svg
  viewBox="0 0 256 256"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M210.07,161.88C222,156.72,228,142.63,228,120s-6-36.72-17.93-41.88c-12.59-5.45-30.83-.39-54.22,15l-3,2q1-1.5,2-3c15.41-23.39,20.47-41.63,15-54.22C164.72,26,150.63,20,128,20S91.28,26,86.12,37.93c-5.45,12.59-.39,30.83,15,54.22q1,1.53,2,3l-3-2c-23.39-15.41-41.63-20.47-54.22-15C34,83.28,28,97.37,28,120s6,36.72,17.93,41.88a27.47,27.47,0,0,0,11,2.12c11.46,0,26-5.73,43.26-17.14l3-2q-1,1.5-2,3c-15.41,23.39-20.47,41.63-15,54.21C91.28,214,105.37,220,128,220s36.72-6,41.88-17.94c3.81-8.8,2.47-20.39-3.95-34.56C181.58,188,197.34,213.86,204.12,241a4,4,0,0,0,3.88,3,4.09,4.09,0,0,0,1-.12,4,4,0,0,0,2.91-4.85c-8.41-33.65-29.45-64.78-48-87.2,13.82,8.09,25.62,12.17,35.26,12.17A27.47,27.47,0,0,0,210.07,161.88ZM93.47,41.11C97.24,32.41,108.86,28,128,28s30.76,4.41,34.53,13.11c8.21,18.94-19.86,56.41-34.53,73C113.33,97.52,85.26,60.05,93.47,41.11ZM49.11,154.53C40.41,150.76,36,139.14,36,120s4.41-30.76,13.11-34.53A19.41,19.41,0,0,1,56.91,84c20.08,0,50.66,23.15,65.15,36C105.52,134.67,68.05,162.74,49.11,154.53Zm113.42,44.36C158.76,207.59,147.14,212,128,212s-30.76-4.41-34.53-13.11C85.26,180,113.33,142.48,128,125.94,142.67,142.48,170.74,180,162.53,198.89Zm-28.42-78.74L134,120c16.54-14.68,54-42.75,72.94-34.53C215.59,89.24,220,100.86,220,120s-4.41,30.76-13.11,34.53C188,162.71,150.73,134.86,134.11,120.15Z"
  />
</svg>
Attribution
"Clover Thin" icon from Phosphor Icons (https://github.com/phosphor-icons/core), licensed under MIT license.

Related icons: