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

Circum Icons · CiLemon

Lemon icon

A free lemon icon from Circum 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: MPL-2.0 license
Project: circumicons.com

Download SVG

Install with shadcn

npx shadcn@latest add https://ui.cuelark.com/r/icons/circum/lemon.json

components/icons/circum-lemon.tsx

import * as React from "react";

/**
 * Lemon from Circum Icons (https://circumicons.com/), MPL-2.0 license.
 * Via Cuelark UI: ui.cuelark.com/icons/circum/lemon. Sized in em, colored by currentColor.
 */
export function CiLemonIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 24 24"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <g id="Lemon">
        <g>
          <path
            d="M6,20.924a2.172,2.172,0,0,1-1.545-.642l-.734-.733a2.207,2.207,0,0,1-.16-2.947,1.18,1.18,0,0,0,.272-1.117A9.105,9.105,0,0,1,6.205,6.208a9.1,9.1,0,0,1,9.277-2.371,1.149,1.149,0,0,0,1.062-.229l.055-.044a2.205,2.205,0,0,1,2.946.161l.734.733a2.207,2.207,0,0,1,.16,2.947,1.179,1.179,0,0,0-.272,1.116A9.11,9.11,0,0,1,17.8,17.8,9.109,9.109,0,0,1,8.518,20.17a1.14,1.14,0,0,0-1.062.229A2.324,2.324,0,0,1,6,20.924ZM12.812,4.4a8.427,8.427,0,0,0-5.9,2.519,8.1,8.1,0,0,0-2.133,8.246,2.149,2.149,0,0,1-.395,2.014,1.227,1.227,0,0,0,.044,1.667l.734.733a1.209,1.209,0,0,0,1.613.088,2.175,2.175,0,0,1,2.067-.438,8.1,8.1,0,0,0,8.246-2.133,8.1,8.1,0,0,0,2.133-8.246,2.144,2.144,0,0,1,.395-2.013,1.229,1.229,0,0,0-.044-1.668l-.734-.733a1.206,1.206,0,0,0-1.612-.089l-.052.042a2.148,2.148,0,0,1-2.016.4A7.213,7.213,0,0,0,12.812,4.4Z"
          />
          <path
            d="M6.457,12.286a.523.523,0,0,1-.178-.032.5.5,0,0,1-.29-.646,9.841,9.841,0,0,1,5.338-5.5.5.5,0,1,1,.386.921,8.845,8.845,0,0,0-4.789,4.939A.5.5,0,0,1,6.457,12.286Z"
          />
        </g>
      </g>
    </svg>
  );
}

With react-icons

import { CiLemon } from "react-icons/ci";

export function Example() {
  return <CiLemon className="size-5" />;
}

lemon.svg

<svg
  viewBox="0 0 24 24"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <g id="Lemon">
    <g>
      <path
        d="M6,20.924a2.172,2.172,0,0,1-1.545-.642l-.734-.733a2.207,2.207,0,0,1-.16-2.947,1.18,1.18,0,0,0,.272-1.117A9.105,9.105,0,0,1,6.205,6.208a9.1,9.1,0,0,1,9.277-2.371,1.149,1.149,0,0,0,1.062-.229l.055-.044a2.205,2.205,0,0,1,2.946.161l.734.733a2.207,2.207,0,0,1,.16,2.947,1.179,1.179,0,0,0-.272,1.116A9.11,9.11,0,0,1,17.8,17.8,9.109,9.109,0,0,1,8.518,20.17a1.14,1.14,0,0,0-1.062.229A2.324,2.324,0,0,1,6,20.924ZM12.812,4.4a8.427,8.427,0,0,0-5.9,2.519,8.1,8.1,0,0,0-2.133,8.246,2.149,2.149,0,0,1-.395,2.014,1.227,1.227,0,0,0,.044,1.667l.734.733a1.209,1.209,0,0,0,1.613.088,2.175,2.175,0,0,1,2.067-.438,8.1,8.1,0,0,0,8.246-2.133,8.1,8.1,0,0,0,2.133-8.246,2.144,2.144,0,0,1,.395-2.013,1.229,1.229,0,0,0-.044-1.668l-.734-.733a1.206,1.206,0,0,0-1.612-.089l-.052.042a2.148,2.148,0,0,1-2.016.4A7.213,7.213,0,0,0,12.812,4.4Z"
      />
      <path
        d="M6.457,12.286a.523.523,0,0,1-.178-.032.5.5,0,0,1-.29-.646,9.841,9.841,0,0,1,5.338-5.5.5.5,0,1,1,.386.921,8.845,8.845,0,0,0-4.789,4.939A.5.5,0,0,1,6.457,12.286Z"
      />
    </g>
  </g>
</svg>

Attribution

"Lemon" icon from Circum Icons (https://circumicons.com/), licensed under MPL-2.0 license.

Lemon icon in other sets

Similar Circum Icons icons