Skip to content
Cuelark UI

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

Phosphor Icons · PiButterflyThin

Butterfly Thin icon

A free butterfly 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/butterfly-thin.json
components/icons/phosphor-butterfly-thin.tsx
import * as React from "react";

/**
 * Butterfly Thin from Phosphor Icons (https://github.com/phosphor-icons/core), MIT.
 * Via Cuelark UI: ui.cuelark.com/icons/phosphor/butterfly-thin. Sized in em, colored by currentColor.
 */
export function PiButterflyThinIcon(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="M229.5,52.94C224.89,47,218,44,208.93,44c-25.86,0-61.28,28.73-76.93,57.28V56a4,4,0,0,0-8,0v45.28C108.35,72.73,72.93,44,47.07,44c-9,0-16,3-20.57,8.94-11.1,14.26-6,42.25.5,67.75,3.67,14.42,10.55,24.64,20.48,30.38a36.79,36.79,0,0,0,12.75,4.45A40,40,0,1,0,128,197.43a40,40,0,1,0,67.77-41.9,36.82,36.82,0,0,0,12.75-4.46c9.93-5.74,16.81-16,20.48-30.38C235.47,95.19,240.6,67.2,229.5,52.94ZM92,212a32.12,32.12,0,0,1-3.56-64,4,4,0,0,0-.88-8A39.64,39.64,0,0,0,67.78,148c-22.8,1.24-30.68-20-33-29.24-5.65-22.24-11-49.26-1.95-60.87C35.87,53.91,40.54,52,47.07,52,76.55,52,124,98.68,124,127.67V180A32,32,0,0,1,92,212Zm129.24-93.28c-2.34,9.22-10.22,30.47-33,29.24A39.68,39.68,0,0,0,168.44,140a4,4,0,0,0-.88,8A32.1,32.1,0,1,1,132,180V127.67c0-29,47.45-75.67,76.93-75.67,6.53,0,11.2,1.91,14.26,5.85C232.22,69.46,226.89,96.48,221.24,118.72Z"
      />
    </svg>
  );
}
With react-icons
import { PiButterflyThin } from "react-icons/pi";

export function Example() {
  return <PiButterflyThin className="size-5" />;
}
butterfly-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="M229.5,52.94C224.89,47,218,44,208.93,44c-25.86,0-61.28,28.73-76.93,57.28V56a4,4,0,0,0-8,0v45.28C108.35,72.73,72.93,44,47.07,44c-9,0-16,3-20.57,8.94-11.1,14.26-6,42.25.5,67.75,3.67,14.42,10.55,24.64,20.48,30.38a36.79,36.79,0,0,0,12.75,4.45A40,40,0,1,0,128,197.43a40,40,0,1,0,67.77-41.9,36.82,36.82,0,0,0,12.75-4.46c9.93-5.74,16.81-16,20.48-30.38C235.47,95.19,240.6,67.2,229.5,52.94ZM92,212a32.12,32.12,0,0,1-3.56-64,4,4,0,0,0-.88-8A39.64,39.64,0,0,0,67.78,148c-22.8,1.24-30.68-20-33-29.24-5.65-22.24-11-49.26-1.95-60.87C35.87,53.91,40.54,52,47.07,52,76.55,52,124,98.68,124,127.67V180A32,32,0,0,1,92,212Zm129.24-93.28c-2.34,9.22-10.22,30.47-33,29.24A39.68,39.68,0,0,0,168.44,140a4,4,0,0,0-.88,8A32.1,32.1,0,1,1,132,180V127.67c0-29,47.45-75.67,76.93-75.67,6.53,0,11.2,1.91,14.26,5.85C232.22,69.46,226.89,96.48,221.24,118.72Z"
  />
</svg>
Attribution
"Butterfly Thin" icon from Phosphor Icons (https://github.com/phosphor-icons/core), licensed under MIT license.

Related icons: