Butterfly icon
vs:butterfly
The Butterfly icon (vs:butterfly) is a free SVG icon from the Vesper Icons set by TableCheck. It is drawn on a 1792 × 1792 grid. Vesper Icons are released under the Open Font License, which allows use in personal and commercial projects. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.
- Icon set
- Vesper Icons
- Author
- TableCheck
- License
- OFL-1.1
- Size
- 1792 × 1792
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="1792" height="1792" viewBox="0 0 1792 1792"><path fill="currentColor" d="M793 768H256q-51 0-94.5 9.5t-81 30t-59 59.5T0 960q0 69 42.5 148T153 1252.5t161 109t185 42.5q152-2 270-120q-45 58-55 130.5t11 137t57 120t83 88t90 32.5q64 0 111.5-21.5t75-60t40.5-86t13-103.5q0-83-26.5-170t-69.5-148zm48-38l144-532q22-83 73.5-140.5T1188 0q81 0 165 73.5T1492 265t55 235q0 109-51 197t-146 142q83-33 162.5-13.5t141.5 68t100 111.5t38 118q0 30-13 64t-38.5 65.5t-70 52.5t-99.5 21q-101 0-211.5-53.5T1185 1143z"/></svg>
How to use the Butterfly icon
React
import { Icon } from "@iconify/react";
<Icon icon="vs:butterfly" width="24" />
Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="vs:butterfly" width="24" />
</template>
Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="vs:butterfly" width="24" />
Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[vs--butterfly]"></span>
UnoCSS
<!-- @unocss/preset-icons + @iconify-json/vs -->
<div class="i-vs:butterfly"></div>
Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="vs:butterfly"></iconify-icon>
HTML image
<img src="https://iconyz.com/api/public/svg/vs/butterfly.svg" alt="Butterfly icon" width="24" height="24">
Butterfly icon in other icon sets
Butterfly icon FAQ
Is the Butterfly icon free for commercial use?
Yes. Vesper Icons are released under the Open Font License, which allows use in personal and commercial projects.
How do I use the Butterfly icon in React?
Install @iconify/react and render <Icon icon="vs:butterfly" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Butterfly icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/vs/butterfly.svg" alt="Butterfly icon">, or paste the SVG code inline to style it with CSS.
Browse all Vesper Icons →
ICONYZ
