Gentleface › Nature & animals › butterfly

butterfly icon

Butterfly: butterfly, moth. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Code line-round

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M9 12.112C9 12.02 9.028 11.931 9.08 11.855C9.222 11.651 9.503 11.601 9.707 11.742C9.738 11.764 9.77 11.788 9.802 11.813C9.927 11.913 10.102 12.086 10.327 12.333C10.553 12.581 10.724 12.748 10.839 12.834C10.987 12.945 11.124 13 11.25 13C11.779 13 12.192 12.851 12.49 12.553C12.83 12.213 13 11.695 13 11C13 10.683 12.998 10.455 12.993 10.315C12.985 10.098 12.969 9.916 12.944 9.77C12.895 9.475 12.796 9.253 12.647 9.104C12.63 9.087 12.614 9.069 12.6 9.05C12.482 8.893 12.305 8.773 12.069 8.691C11.825 8.605 11.531 8.563 11.188 8.563C10.861 8.563 10.515 8.601 10.149 8.677C9.952 8.718 9.761 8.767 9.577 8.825C9.353 8.895 9.112 8.781 9.025 8.563L9 8.5L9 11.5C9.101 11.651 9.101 11.849 9 12C9 12.276 8.902 12.512 8.707 12.707C8.512 12.902 8.276 13 8 13C7.724 13 7.488 12.902 7.293 12.707C7.098 12.512 7 12.276 7 12C6.899 11.849 6.899 11.651 7 11.5L7 8.5L6.975 8.563C6.888 8.781 6.647 8.895 6.423 8.825C6.239 8.767 6.048 8.718 5.851 8.677C5.485 8.601 5.139 8.563 4.813 8.563C4.469 8.563 4.175 8.605 3.931 8.691C3.695 8.773 3.518 8.893 3.4 9.05C3.386 9.069 3.37 9.087 3.354 9.104C3.204 9.253 3.105 9.475 3.056 9.77C3.031 9.916 3.015 10.098 3.007 10.315C3.002 10.455 3 10.683 3 11C3 11.695 3.17 12.213 3.51 12.553C3.808 12.851 4.221 13 4.75 13C4.876 13 5.013 12.945 5.161 12.834C5.276 12.748 5.447 12.581 5.673 12.333C5.898 12.086 6.073 11.913 6.198 11.813C6.23 11.788 6.262 11.764 6.293 11.742C6.369 11.69 6.458 11.662 6.55 11.662C6.799 11.662 7 11.863 7 12.112L7 12.236C7 12.375 6.936 12.506 6.826 12.591C6.824 12.593 6.822 12.595 6.82 12.597C6.736 12.663 6.601 12.799 6.412 13.006C6.143 13.301 5.926 13.511 5.76 13.635C5.435 13.878 5.098 14 4.75 14C4.371 14 4.022 13.942 3.701 13.826C3.353 13.7 3.054 13.511 2.803 13.26C2.268 12.725 2 11.971 2 11C2 10.671 2.003 10.431 2.008 10.279C2.017 10.019 2.038 9.794 2.069 9.605C2.122 9.291 2.216 9.016 2.352 8.781C1.451 7.698 1 6.188 1 4.25C1 3.602 1.107 3.1 1.321 2.743C1.47 2.495 1.663 2.309 1.901 2.186C2.139 2.062 2.422 2 2.75 2C3.213 2 3.706 2.205 4.23 2.614C4.416 2.76 4.623 2.943 4.849 3.165C4.98 3.293 5.173 3.49 5.428 3.757C5.864 4.212 6.181 4.52 6.379 4.679C6.645 4.893 6.852 5 7 5C7 4.831 7.04 4.672 7.121 4.523C7.202 4.375 7.313 4.254 7.455 4.162L5.146 1.854C5.049 1.756 5 1.638 5 1.5C5 1.362 5.049 1.244 5.146 1.146C5.244 1.049 5.362 1 5.5 1C5.638 1 5.756 1.049 5.854 1.146L8 3.293L10.146 1.146C10.246 1.047 10.364 0.997 10.5 0.997C10.636 0.997 10.754 1.047 10.854 1.146C10.951 1.244 11 1.362 11 1.5C11 1.638 10.951 1.756 10.854 1.854L8.545 4.162C8.687 4.254 8.798 4.375 8.879 4.523C8.96 4.672 9 4.831 9 5C9.148 5 9.355 4.893 9.621 4.679C9.819 4.52 10.136 4.212 10.572 3.757C10.827 3.49 11.02 3.293 11.151 3.165C11.377 2.943 11.584 2.76 11.77 2.614C12.294 2.205 12.787 2 13.25 2C13.578 2 13.861 2.062 14.099 2.186C14.337 2.309 14.53 2.495 14.679 2.743C14.893 3.1 15 3.602 15 4.25C15 6.188 14.549 7.698 13.648 8.781C13.784 9.016 13.878 9.291 13.931 9.605C13.962 9.794 13.983 10.019 13.992 10.279C13.997 10.431 14 10.671 14 11C14 11.971 13.732 12.725 13.197 13.26C12.946 13.511 12.647 13.7 12.299 13.826C11.978 13.942 11.629 14 11.25 14C10.902 14 10.565 13.878 10.24 13.635C10.074 13.511 9.857 13.301 9.588 13.006C9.399 12.799 9.264 12.663 9.18 12.597C9.178 12.595 9.176 12.593 9.174 12.591C9.064 12.506 9 12.375 9 12.236L9 12.112ZM7 7.965L7 6C6.617 6 6.201 5.82 5.752 5.459C5.52 5.272 5.171 4.935 4.705 4.448C4.458 4.19 4.273 4 4.15 3.879C3.95 3.684 3.771 3.525 3.614 3.402C3.271 3.134 2.983 3 2.75 3C2.59 3 2.461 3.025 2.365 3.076C2.29 3.115 2.228 3.176 2.179 3.257C2.06 3.456 2 3.787 2 4.25C2 5.877 2.345 7.138 3.034 8.032C3.199 7.916 3.388 7.821 3.6 7.747C3.952 7.624 4.356 7.563 4.813 7.563C5.207 7.563 5.621 7.608 6.055 7.698C6.288 7.746 6.513 7.805 6.731 7.874C6.752 7.88 6.773 7.889 6.793 7.898C6.858 7.93 6.914 7.977 6.957 8.035C6.969 8.011 6.984 7.987 7 7.965ZM9.269 7.874C9.487 7.805 9.712 7.746 9.945 7.698C10.379 7.608 10.793 7.563 11.188 7.563C11.644 7.563 12.048 7.624 12.4 7.747C12.612 7.821 12.801 7.916 12.966 8.032C13.655 7.138 14 5.877 14 4.25C14 3.787 13.94 3.456 13.821 3.257C13.772 3.176 13.71 3.115 13.635 3.076C13.539 3.025 13.41 3 13.25 3C13.017 3 12.729 3.134 12.386 3.402C12.229 3.525 12.05 3.684 11.85 3.879C11.727 4 11.542 4.19 11.295 4.448C10.829 4.935 10.48 5.272 10.248 5.459C9.799 5.82 9.383 6 9 6L9 7.965C9.016 7.987 9.031 8.011 9.043 8.035C9.099 7.959 9.179 7.902 9.269 7.874Z"/></svg>

React

// Gentleface "butterfly" (line-round), MIT. https://gentleface.com/icons/butterfly
import type { SVGProps } from 'react';

export function ButterflyIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M9 12.112C9 12.02 9.028 11.931 9.08 11.855C9.222 11.651 9.503 11.601 9.707 11.742C9.738 11.764 9.77 11.788 9.802 11.813C9.927 11.913 10.102 12.086 10.327 12.333C10.553 12.581 10.724 12.748 10.839 12.834C10.987 12.945 11.124 13 11.25 13C11.779 13 12.192 12.851 12.49 12.553C12.83 12.213 13 11.695 13 11C13 10.683 12.998 10.455 12.993 10.315C12.985 10.098 12.969 9.916 12.944 9.77C12.895 9.475 12.796 9.253 12.647 9.104C12.63 9.087 12.614 9.069 12.6 9.05C12.482 8.893 12.305 8.773 12.069 8.691C11.825 8.605 11.531 8.563 11.188 8.563C10.861 8.563 10.515 8.601 10.149 8.677C9.952 8.718 9.761 8.767 9.577 8.825C9.353 8.895 9.112 8.781 9.025 8.563L9 8.5L9 11.5C9.101 11.651 9.101 11.849 9 12C9 12.276 8.902 12.512 8.707 12.707C8.512 12.902 8.276 13 8 13C7.724 13 7.488 12.902 7.293 12.707C7.098 12.512 7 12.276 7 12C6.899 11.849 6.899 11.651 7 11.5L7 8.5L6.975 8.563C6.888 8.781 6.647 8.895 6.423 8.825C6.239 8.767 6.048 8.718 5.851 8.677C5.485 8.601 5.139 8.563 4.813 8.563C4.469 8.563 4.175 8.605 3.931 8.691C3.695 8.773 3.518 8.893 3.4 9.05C3.386 9.069 3.37 9.087 3.354 9.104C3.204 9.253 3.105 9.475 3.056 9.77C3.031 9.916 3.015 10.098 3.007 10.315C3.002 10.455 3 10.683 3 11C3 11.695 3.17 12.213 3.51 12.553C3.808 12.851 4.221 13 4.75 13C4.876 13 5.013 12.945 5.161 12.834C5.276 12.748 5.447 12.581 5.673 12.333C5.898 12.086 6.073 11.913 6.198 11.813C6.23 11.788 6.262 11.764 6.293 11.742C6.369 11.69 6.458 11.662 6.55 11.662C6.799 11.662 7 11.863 7 12.112L7 12.236C7 12.375 6.936 12.506 6.826 12.591C6.824 12.593 6.822 12.595 6.82 12.597C6.736 12.663 6.601 12.799 6.412 13.006C6.143 13.301 5.926 13.511 5.76 13.635C5.435 13.878 5.098 14 4.75 14C4.371 14 4.022 13.942 3.701 13.826C3.353 13.7 3.054 13.511 2.803 13.26C2.268 12.725 2 11.971 2 11C2 10.671 2.003 10.431 2.008 10.279C2.017 10.019 2.038 9.794 2.069 9.605C2.122 9.291 2.216 9.016 2.352 8.781C1.451 7.698 1 6.188 1 4.25C1 3.602 1.107 3.1 1.321 2.743C1.47 2.495 1.663 2.309 1.901 2.186C2.139 2.062 2.422 2 2.75 2C3.213 2 3.706 2.205 4.23 2.614C4.416 2.76 4.623 2.943 4.849 3.165C4.98 3.293 5.173 3.49 5.428 3.757C5.864 4.212 6.181 4.52 6.379 4.679C6.645 4.893 6.852 5 7 5C7 4.831 7.04 4.672 7.121 4.523C7.202 4.375 7.313 4.254 7.455 4.162L5.146 1.854C5.049 1.756 5 1.638 5 1.5C5 1.362 5.049 1.244 5.146 1.146C5.244 1.049 5.362 1 5.5 1C5.638 1 5.756 1.049 5.854 1.146L8 3.293L10.146 1.146C10.246 1.047 10.364 0.997 10.5 0.997C10.636 0.997 10.754 1.047 10.854 1.146C10.951 1.244 11 1.362 11 1.5C11 1.638 10.951 1.756 10.854 1.854L8.545 4.162C8.687 4.254 8.798 4.375 8.879 4.523C8.96 4.672 9 4.831 9 5C9.148 5 9.355 4.893 9.621 4.679C9.819 4.52 10.136 4.212 10.572 3.757C10.827 3.49 11.02 3.293 11.151 3.165C11.377 2.943 11.584 2.76 11.77 2.614C12.294 2.205 12.787 2 13.25 2C13.578 2 13.861 2.062 14.099 2.186C14.337 2.309 14.53 2.495 14.679 2.743C14.893 3.1 15 3.602 15 4.25C15 6.188 14.549 7.698 13.648 8.781C13.784 9.016 13.878 9.291 13.931 9.605C13.962 9.794 13.983 10.019 13.992 10.279C13.997 10.431 14 10.671 14 11C14 11.971 13.732 12.725 13.197 13.26C12.946 13.511 12.647 13.7 12.299 13.826C11.978 13.942 11.629 14 11.25 14C10.902 14 10.565 13.878 10.24 13.635C10.074 13.511 9.857 13.301 9.588 13.006C9.399 12.799 9.264 12.663 9.18 12.597C9.178 12.595 9.176 12.593 9.174 12.591C9.064 12.506 9 12.375 9 12.236L9 12.112ZM7 7.965L7 6C6.617 6 6.201 5.82 5.752 5.459C5.52 5.272 5.171 4.935 4.705 4.448C4.458 4.19 4.273 4 4.15 3.879C3.95 3.684 3.771 3.525 3.614 3.402C3.271 3.134 2.983 3 2.75 3C2.59 3 2.461 3.025 2.365 3.076C2.29 3.115 2.228 3.176 2.179 3.257C2.06 3.456 2 3.787 2 4.25C2 5.877 2.345 7.138 3.034 8.032C3.199 7.916 3.388 7.821 3.6 7.747C3.952 7.624 4.356 7.563 4.813 7.563C5.207 7.563 5.621 7.608 6.055 7.698C6.288 7.746 6.513 7.805 6.731 7.874C6.752 7.88 6.773 7.889 6.793 7.898C6.858 7.93 6.914 7.977 6.957 8.035C6.969 8.011 6.984 7.987 7 7.965ZM9.269 7.874C9.487 7.805 9.712 7.746 9.945 7.698C10.379 7.608 10.793 7.563 11.188 7.563C11.644 7.563 12.048 7.624 12.4 7.747C12.612 7.821 12.801 7.916 12.966 8.032C13.655 7.138 14 5.877 14 4.25C14 3.787 13.94 3.456 13.821 3.257C13.772 3.176 13.71 3.115 13.635 3.076C13.539 3.025 13.41 3 13.25 3C13.017 3 12.729 3.134 12.386 3.402C12.229 3.525 12.05 3.684 11.85 3.879C11.727 4 11.542 4.19 11.295 4.448C10.829 4.935 10.48 5.272 10.248 5.459C9.799 5.82 9.383 6 9 6L9 7.965C9.016 7.987 9.031 8.011 9.043 8.035C9.099 7.959 9.179 7.902 9.269 7.874Z" />
    </svg>
  );
}

Vue

Vue: see /icons/butterfly.md

Svelte

Svelte: see /icons/butterfly.md

HTML img

HTML img: see /icons/butterfly.md

CSS

CSS: see /icons/butterfly.md

Data URL

Data URL: see /icons/butterfly.md

Sprite

Sprite: see /icons/butterfly.md

SwiftUI

SwiftUI: see /icons/butterfly.md

Compose

Compose: see /icons/butterfly.md

Android XML

Android XML: see /icons/butterfly.md

Flutter

Flutter: see /icons/butterfly.md

Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.

With npm: import { ButterflyIcon } from '@gentleface/react'; (setup).

Meaning

Use it for

butterfly, moth

Don’t confuse with

bug: bug is a software defect, not an insect

Tags

butterfly

Category

Nature & animals

Component name

ButterflyIcon

History

2026-10-29 released in 0.2.0
2026-10-30 added

Since

version 0.2.0

More nature & animals icons

bird birdhouse cactus cannabis cat clover co2 compost cow dog dog-bark feather fish fish-off flower grass · all nature & animals icons

For agents

Metadata: /icons/butterfly.json · Markdown: /icons/butterfly.md · SVG: https://gentleface.com/svg/{style}/16/butterfly.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/butterfly.png

butterfly icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp

Code line-round

Meaning

More nature & animals icons

For agents

butterfly icon