Home/Libraries/OpenMoji (Iconify)/butterfly

OpenMoji (Iconify)

Butterfly

License: CC-BY-SA-4.0

ICON SIZE

STROKE WEIGHT1.5px

COLOR PICKER

Download SVG without fill color (CSS-styleable)

<svg style="color: #818cf8" xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 72 72"><path fill="#92d3f5" d="M35.892 22.845c-1.168-.751-2.351-1.513-4.256-2.536s-4.563-2.33-7.372-3.037s-5.768-.815-9-.927c-3.23-.113-6.733-.229-8.799.71s-2.694 2.932-.635 6.76s6.806 9.496 11.128 11.07s8.224-.938 11.039-2.508c2.815-1.569 4.542-2.194 6.27-2.82"/><path fill="#92d3f5" stroke="#818cf8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5" d="M32.103 44.066c-.758 3.755-1.516 7.508-3.664 9.456c-2.148 1.949-5.684 2.093-7.903-.938c-2.22-3.032-3.122-9.239-2.47-12.725c.652-3.487 2.86-4.253 5.602-5.48c2.741-1.226 6.02-2.915 9.301-4.604z"/><path fill="#92d3f5" d="M36.108 22.845c1.168-.751 2.352-1.513 4.256-2.536s4.563-2.33 7.372-3.037s5.768-.815 9-.927c3.23-.113 6.733-.229 8.799.71c2.065.94 2.694 2.932.635 6.76c-2.058 3.828-6.803 9.492-11.126 11.068s-8.226-.937-11.04-2.506c-2.816-1.569-4.543-2.194-6.271-2.82"/><path fill="#92d3f5" stroke="#818cf8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5" d="M39.897 44.066c.758 3.755 1.516 7.508 3.664 9.456c2.148 1.949 5.684 2.093 7.903-.938c2.22-3.032 3.122-9.239 2.47-12.725c-.651-3.487-2.858-4.252-5.6-5.48c-2.744-1.226-6.023-2.915-9.303-4.604z"/><ellipse cx="35.807" cy="17.922" fill="#9b9b9a" rx="3.56" ry="2.67"/><ellipse cx="35.819" cy="23.563" fill="#3f3f3f" rx="3.353" ry="2.735"/><path fill="#9b9b9a" d="M35.394 26.812c-6.321.676.606 20.481.606 20.481s7.864-21.387-.606-20.481"/><g fill="none" stroke="#818cf8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"><path d="M32.103 44.066c-.758 3.755-1.516 7.508-3.664 9.456c-2.148 1.949-5.684 2.093-7.903-.938c-2.22-3.032-3.122-9.239-2.47-12.725c.652-3.487 2.858-4.253 5.066-5.018"/><path d="M32.39 20.592c-2.659-1.306-5.317-2.612-8.126-3.32s-5.768-.815-9-.927c-3.23-.113-6.733-.229-8.798.71s-2.694 2.932-.636 6.76s6.806 9.496 11.128 11.07s8.224-.938 12.129-3.452M39.61 20.592c2.659-1.306 5.317-2.612 8.126-3.32s5.768-.815 9-.927c3.23-.113 6.733-.229 8.798.71c2.066.94 2.694 2.932.636 6.76s-6.803 9.492-11.126 11.068s-8.226-.937-12.13-3.45"/><path d="M39.897 44.066c.758 3.755 1.516 7.508 3.664 9.456c2.148 1.949 5.684 2.093 7.903-.938c2.22-3.032 3.122-9.239 2.47-12.725c-.651-3.487-2.858-4.252-5.066-5.018"/><ellipse cx="36" cy="17.922" rx="3.56" ry="2.67"/><ellipse cx="36" cy="23.563" rx="3.353" ry="2.735"/><path d="M35.392 26.812c-6.321.676.608 20.481.608 20.481s7.862-21.387-.608-20.481m2.576-11.967l1.484-3.263m-5.42 3.263l-1.484-3.263"/></g></svg>

Icons in Action

WEB APPLICATION HEADER & NAVIGATION

my-app.com/dashboard

Overview Dashboard

PROGRESS STEPPER

BUTTON UI ACTIONS

SCALABILITY & CLARITY

12px

16px

24px

32px

48px

“

Highly adaptable, clean vectors that scale perfectly across modern UI components, navigation bars, and mobile actions. Perfectly pre-vetted for production deployment.

IconSearch Presets

Frequently Asked Questions

Q.How do I use this icon in my React/Next.js project?

You have two choices: install the official package listed under the "REACT IMPORT" tab (e.g. npm install @iconify/react) and import the icon directly, or copy the complete React Component code from the "STANDALONE JSX" tab and paste it directly into a local file (e.g. ButterflyIcon.tsx) to avoid installing any npm packages.

Q.Is this icon free for commercial use?

Yes. This icon is published under the open-source **CC-BY-SA-4.0** license. The license grants full permissions for personal and commercial usage (e.g., in SaaS platforms, client projects, or business landing pages). Attributing the icon creator is generally not required for MIT/ISC licenses, but check details on our dedicated License Guide.

Q.What is the "Download SVG without fill color" toggle?

Many SVGs ship with inline fill="..." attributes. By checking this toggle, we strip these attributes and enforce fill="none", making the SVG fully styleable via CSS classes or Tailwind utility classes like fill-current.