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

Simple Icons · SiFlower

Flower icon

A free flower icon from Simple 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: CC0 1.0 Universal license
Project: simpleicons.org

Download SVG

Install with shadcn

npx shadcn@latest add https://ui.cuelark.com/r/icons/simple-icons/flower.json

components/icons/simple-icons-flower.tsx

import * as React from "react";

/**
 * Flower from Simple Icons (https://simpleicons.org/), CC0 1.0 Universal.
 * Via Cuelark UI: ui.cuelark.com/icons/simple-icons/flower. Sized in em, colored by currentColor.
 */
export function SiFlowerIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      role="img"
      viewBox="0 0 24 24"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="m18.938 5.31-.647-2.263-1.094-.28-.062-1.11L15.318.514l-1.036.274-.69-.788h-2.175l-.619.788L9.751.372l-1.754.764L7.61 2.22l-1.347.067-1.066 2.325.68 1.125-.63.96.29 2.03 1.251.415.012 1.302 1.937 1.119.908-.284.66.816v4.973H9.24v-.578H7.037v1.162H9.23v.579h1.075v3.517H5.062v1.162H7.42V24h6.929v-1.09h2.262v-1.162h-5.147v-4.626h1.624v-.927h-1.624v-4.097h1.286l.76-.74.84.336 2.098-.76.202-1.238 1.266-.13.83-2.043-.535-1.166Zm-1.453 2.243-.377.928-1.455.15-.237 1.442-1.045.377-1.128-.452-.963.937h-1.42l-.808-1-1.176.367-.921-.532L7.94 8.3l-1.356-.448-.126-.88.792-1.208-.742-1.227.515-1.124 1.42-.071.477-1.34.852-.372 1.403.558.806-1.027h1.082l.818.934 1.244-.329.881.554.077 1.36 1.274.326.31 1.09-.789 1.143zm-1.615 7.476h-2.783v1.163h2.783zM11.04 3.715l-1.036 1.038v1.87l1.049 1.037 2.975-.035 1.02-1.01.046-1.834-1.037-1.066Zm2.86 2.403-.354.349-2.023.024-.36-.356v-.903l.357-.357h2.047l.354.364z"
      />
    </svg>
  );
}

With react-icons

import { SiFlower } from "react-icons/si";

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

flower.svg

<svg
  role="img"
  viewBox="0 0 24 24"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="m18.938 5.31-.647-2.263-1.094-.28-.062-1.11L15.318.514l-1.036.274-.69-.788h-2.175l-.619.788L9.751.372l-1.754.764L7.61 2.22l-1.347.067-1.066 2.325.68 1.125-.63.96.29 2.03 1.251.415.012 1.302 1.937 1.119.908-.284.66.816v4.973H9.24v-.578H7.037v1.162H9.23v.579h1.075v3.517H5.062v1.162H7.42V24h6.929v-1.09h2.262v-1.162h-5.147v-4.626h1.624v-.927h-1.624v-4.097h1.286l.76-.74.84.336 2.098-.76.202-1.238 1.266-.13.83-2.043-.535-1.166Zm-1.453 2.243-.377.928-1.455.15-.237 1.442-1.045.377-1.128-.452-.963.937h-1.42l-.808-1-1.176.367-.921-.532L7.94 8.3l-1.356-.448-.126-.88.792-1.208-.742-1.227.515-1.124 1.42-.071.477-1.34.852-.372 1.403.558.806-1.027h1.082l.818.934 1.244-.329.881.554.077 1.36 1.274.326.31 1.09-.789 1.143zm-1.615 7.476h-2.783v1.163h2.783zM11.04 3.715l-1.036 1.038v1.87l1.049 1.037 2.975-.035 1.02-1.01.046-1.834-1.037-1.066Zm2.86 2.403-.354.349-2.023.024-.36-.356v-.903l.357-.357h2.047l.354.364z"
  />
</svg>

Attribution

"Flower" icon from Simple Icons (https://simpleicons.org/), licensed under CC0 1.0 Universal license.

Flower icon in other sets

Similar Simple Icons icons