Butterfly icon
Download the Butterfly icon as free SVG or PNG. Compare outline and filled styles. Copy React, Vue or Svelte code.
- insect
- nature
- moth
- wings
- spring
- animal
- bug
- garden
Style
Size
Stroke
Filled icons have no stroke
Color
- Category
- general
- Styles
- Outline, filled
- Component
- IconButterfly
- License
- MIT · Paweł Kuna
outline/butterfly.svg
filled/butterfly.svgCode
Copy it the way you use it
butterfly.svg
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M12 18.176a3 3 0 1 1 -4.953 -2.449l-.025 .023a4.502 4.502 0 0 1 1.483 -8.75c1.414 0 2.675 .652 3.5 1.671a4.5 4.5 0 1 1 4.983 7.079a3 3 0 1 1 -4.983 2.25l-.005 .176" />
<path d="M12 19v-10" />
<path d="M9 3l3 2l3 -2" />
</svg>Use the Butterfly icon
For a decorative icon beside text, add aria-hidden="true" to the SVG. For an icon-only control, put its accessible name on the button or link.
React example
import { IconButterfly } from '@tabler/icons-react';
<IconButterfly size={24} stroke={2} />Vue example
import { IconButterfly } from '@tabler/icons-vue';
<IconButterfly :size="24" :stroke="2" />Svelte 5 example
import { IconButterfly } from '@tabler/icons-svelte-runes';
<IconButterfly size={24} stroke={2} />Related