butterfly icon

butterfly-fill from Phosphor by Phosphor Icons · Fill · MIT Free for personal and commercial use.

Name
butterfly-fill
Set
Phosphor
Style
Fill
Viewbox
256×256
License
MIT

5 other variants in Phosphor

butterflybutterfly-boldbutterfly-duotonebutterfly-lightbutterfly-thin

The same icon in other sets

butterflyEmoji One (Colored)butterflyFluent EmojibutterflyFluent Emoji FlatbutterflyFluent Emoji High ContrastbutterflyIconParkbutterflyIconPark OutlinebutterflyIconPark SolidbutterflyIconPark TwoTonebutterflyLucide LabbutterflyMaterial Design Iconsbutterfly-fillMingCute IconbutterflyNoto EmojibutterflyOpenMojibutterflyTabler IconsbutterflyTwitter Emoji

Use the butterfly icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M128 100.17a108 108 0 0 0-8-12.64V56a8 8 0 0 1 16 0v31.53a108 108 0 0 0-8 12.64m104.7-49.69C229 45.7 221.84 40 209 40c-16.85 0-38.46 11.28-57.81 30.16A140 140 0 0 0 136 87.53V180a8 8 0 0 1-16 0V87.53a140 140 0 0 0-15.15-17.37C85.49 51.28 63.88 40 47 40c-12.84 0-20 5.7-23.7 10.48c-6.82 8.77-12.18 24.08-.21 71.2c6.05 23.83 19.51 33 30.63 36.42A44 44 0 0 0 128 205.27a44 44 0 0 0 74.28-47.17c11.12-3.4 24.57-12.59 30.63-36.42c6.72-26.44 11.94-55.58-.21-71.2"/></svg>

React

import type { SVGProps } from "react";

export function PhButterflyFill(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M128 100.17a108 108 0 0 0-8-12.64V56a8 8 0 0 1 16 0v31.53a108 108 0 0 0-8 12.64m104.7-49.69C229 45.7 221.84 40 209 40c-16.85 0-38.46 11.28-57.81 30.16A140 140 0 0 0 136 87.53V180a8 8 0 0 1-16 0V87.53a140 140 0 0 0-15.15-17.37C85.49 51.28 63.88 40 47 40c-12.84 0-20 5.7-23.7 10.48c-6.82 8.77-12.18 24.08-.21 71.2c6.05 23.83 19.51 33 30.63 36.42A44 44 0 0 0 128 205.27a44 44 0 0 0 74.28-47.17c11.12-3.4 24.57-12.59 30.63-36.42c6.72-26.44 11.94-55.58-.21-71.2"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M128 100.17a108 108 0 0 0-8-12.64V56a8 8 0 0 1 16 0v31.53a108 108 0 0 0-8 12.64m104.7-49.69C229 45.7 221.84 40 209 40c-16.85 0-38.46 11.28-57.81 30.16A140 140 0 0 0 136 87.53V180a8 8 0 0 1-16 0V87.53a140 140 0 0 0-15.15-17.37C85.49 51.28 63.88 40 47 40c-12.84 0-20 5.7-23.7 10.48c-6.82 8.77-12.18 24.08-.21 71.2c6.05 23.83 19.51 33 30.63 36.42A44 44 0 0 0 128 205.27a44 44 0 0 0 74.28-47.17c11.12-3.4 24.57-12.59 30.63-36.42c6.72-26.44 11.94-55.58-.21-71.2"/></svg>
</template>

CSS

.icon-butterfly-fill {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M128%20100.17a108%20108%200%200%200-8-12.64V56a8%208%200%200%201%2016%200v31.53a108%20108%200%200%200-8%2012.64m104.7-49.69C229%2045.7%20221.84%2040%20209%2040c-16.85%200-38.46%2011.28-57.81%2030.16A140%20140%200%200%200%20136%2087.53V180a8%208%200%200%201-16%200V87.53a140%20140%200%200%200-15.15-17.37C85.49%2051.28%2063.88%2040%2047%2040c-12.84%200-20%205.7-23.7%2010.48c-6.82%208.77-12.18%2024.08-.21%2071.2c6.05%2023.83%2019.51%2033%2030.63%2036.42A44%2044%200%200%200%20128%20205.27a44%2044%200%200%200%2074.28-47.17c11.12-3.4%2024.57-12.59%2030.63-36.42c6.72-26.44%2011.94-55.58-.21-71.2%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M128%20100.17a108%20108%200%200%200-8-12.64V56a8%208%200%200%201%2016%200v31.53a108%20108%200%200%200-8%2012.64m104.7-49.69C229%2045.7%20221.84%2040%20209%2040c-16.85%200-38.46%2011.28-57.81%2030.16A140%20140%200%200%200%20136%2087.53V180a8%208%200%200%201-16%200V87.53a140%20140%200%200%200-15.15-17.37C85.49%2051.28%2063.88%2040%2047%2040c-12.84%200-20%205.7-23.7%2010.48c-6.82%208.77-12.18%2024.08-.21%2071.2c6.05%2023.83%2019.51%2033%2030.63%2036.42A44%2044%200%200%200%20128%20205.27a44%2044%200%200%200%2074.28-47.17c11.12-3.4%2024.57-12.59%2030.63-36.42c6.72-26.44%2011.94-55.58-.21-71.2%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/butterfly-fill.svg?color=%231a73e8&size=48