Bun アイコン

Q: Bun アイコンは商用利用でも無料ですか?

はい。theSVG Color icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。

thesvg-color:bun

Bun アイコン(thesvg-color:bun)は、theSVG Color セットの無料 SVG アイコンです（作者: thesvg.org）。 80 × 70 のグリッドで描かれています。 theSVG Color icons は MIT ライセンスで公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。

アイコンセット: theSVG Color
作者: thesvg.org
ライセンス: MIT
サイズ: 80 × 70

SVG をダウンロード

SVG コード

<svg xmlns="http://www.w3.org/2000/svg" width="80" height="70" viewBox="0 0 80 70"><path d="M71.09 20.74c-.16-.17-.33-.34-.5-.5s-.33-.34-.5-.5s-.33-.34-.5-.5s-.33-.34-.5-.5s-.33-.34-.5-.5s-.33-.34-.5-.5s-.33-.34-.5-.5A26.46 26.46 0 0 1 75.5 35.7c0 16.57-16.82 30.05-37.5 30.05c-11.58 0-21.94-4.23-28.83-10.86l.5.5l.5.5l.5.5l.5.5l.5.5l.5.5l.5.5C19.55 65.3 30.14 69.75 42 69.75c20.68 0 37.5-13.48 37.5-30c0-7.06-3.04-13.75-8.41-19.01"/><path fill="#fbf0df" d="M73 35.7c0 15.21-15.67 27.54-35 27.54S3 50.91 3 35.7C3 26.27 9 17.94 18.22 13S33.18 3 38 3s8.94 4.13 19.78 10C67 17.94 73 26.27 73 35.7"/><path fill="#f6dece" d="M73 35.7a21.7 21.7 0 0 0-.8-5.78c-2.73 33.3-43.35 34.9-59.32 24.94A40 40 0 0 0 38 63.24c19.3 0 35-12.35 35-27.54"/><path fill="#fffefc" d="M24.53 11.17C29 8.49 34.94 3.46 40.78 3.45A9.3 9.3 0 0 0 38 3c-2.42 0-5 1.25-8.25 3.13c-1.13.66-2.3 1.39-3.54 2.15c-2.33 1.44-5 3.07-8 4.7C8.69 18.13 3 26.62 3 35.7v1.19c6.06-21.41 17.07-23.04 21.53-25.72"/><path fill="#ccbea7" fill-rule="evenodd" d="M35.12 5.53A16.41 16.41 0 0 1 29.49 18c-.28.25-.06.73.3.59c3.37-1.31 7.92-5.23 6-13.14c-.08-.45-.67-.33-.67.08m2.27 0A16.24 16.24 0 0 1 39 19c-.12.35.31.65.55.36c2.19-2.8 4.1-8.36-1.62-14.36c-.29-.26-.74.14-.54.49Zm2.76-.17A16.42 16.42 0 0 1 47 17.12a.33.33 0 0 0 .65.11c.92-3.49.4-9.44-7.17-12.53c-.4-.16-.66.38-.33.62Zm-18.46 10.4a16.94 16.94 0 0 0 10.47-9c.18-.36.75-.22.66.18c-1.73 8-7.52 9.67-11.12 9.45c-.38.01-.37-.52-.01-.63"/><path d="M38 65.75C17.32 65.75.5 52.27.5 35.7c0-10 6.18-19.33 16.53-24.92c3-1.6 5.57-3.21 7.86-4.62c1.26-.78 2.45-1.51 3.6-2.19C32 1.89 35 .5 38 .5s5.62 1.2 8.9 3.14c1 .57 2 1.19 3.07 1.87c2.49 1.54 5.3 3.28 9 5.27C69.32 16.37 75.5 25.69 75.5 35.7c0 16.57-16.82 30.05-37.5 30.05M38 3c-2.42 0-5 1.25-8.25 3.13c-1.13.66-2.3 1.39-3.54 2.15c-2.33 1.44-5 3.07-8 4.7C8.69 18.13 3 26.62 3 35.7c0 15.19 15.7 27.55 35 27.55S73 50.89 73 35.7c0-9.08-5.69-17.57-15.22-22.7c-3.78-2-6.73-3.88-9.12-5.36c-1.09-.67-2.09-1.29-3-1.84C42.63 4 40.42 3 38 3"/><path fill="#b71422" d="M45.05 43a8.93 8.93 0 0 1-2.92 4.71a6.8 6.8 0 0 1-4 1.88A6.84 6.84 0 0 1 34 47.71A8.93 8.93 0 0 1 31.12 43a.72.72 0 0 1 .8-.81h12.34a.72.72 0 0 1 .79.81"/><path fill="#ff6164" d="M34 47.79a6.9 6.9 0 0 0 4.12 1.9a6.9 6.9 0 0 0 4.11-1.9a11 11 0 0 0 1-1.07a6.83 6.83 0 0 0-4.9-2.31a6.15 6.15 0 0 0-5 2.78c.23.21.43.41.67.6"/><path d="M34.16 47a5.36 5.36 0 0 1 4.19-2.08a6 6 0 0 1 4 1.69c.23-.25.45-.51.66-.77a7 7 0 0 0-4.71-1.93a6.36 6.36 0 0 0-4.89 2.36a10 10 0 0 0 .75.73"/><path d="M38.09 50.19a7.42 7.42 0 0 1-4.45-2a9.52 9.52 0 0 1-3.11-5.05a1.2 1.2 0 0 1 .26-1a1.41 1.41 0 0 1 1.13-.51h12.34a1.44 1.44 0 0 1 1.13.51a1.19 1.19 0 0 1 .25 1a9.52 9.52 0 0 1-3.11 5.05a7.42 7.42 0 0 1-4.44 2m-6.17-7.4c-.16 0-.2.07-.21.09a8.3 8.3 0 0 0 2.73 4.37A6.23 6.23 0 0 0 38.09 49a6.28 6.28 0 0 0 3.65-1.73a8.3 8.3 0 0 0 2.72-4.37a.21.21 0 0 0-.2-.09Z"/><ellipse cx="53.22" cy="40.18" fill="#febbd0" rx="5.85" ry="3.44"/><ellipse cx="22.95" cy="40.18" fill="#febbd0" rx="5.85" ry="3.44"/><path fill-rule="evenodd" d="M25.7 38.8a5.51 5.51 0 1 0-5.5-5.51a5.51 5.51 0 0 0 5.5 5.51m24.77 0A5.51 5.51 0 1 0 45 33.29a5.5 5.5 0 0 0 5.47 5.51"/><path fill="#fff" fill-rule="evenodd" d="M24 33.64a2.07 2.07 0 1 0-2.06-2.07A2.07 2.07 0 0 0 24 33.64m24.77 0a2.07 2.07 0 1 0-2.06-2.07a2.07 2.07 0 0 0 2.04 2.07Z"/></svg>

Bun アイコンの使い方

React

import { Icon } from "@iconify/react";

<Icon icon="thesvg-color:bun" width="24" />

Vue

<script setup>
import { Icon } from "@iconify/vue";
</script>

<template>
  <Icon icon="thesvg-color:bun" width="24" />
</template>

Svelte

<script>
  import Icon from "@iconify/svelte";
</script>

<Icon icon="thesvg-color:bun" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[thesvg-color--bun]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/thesvg-color -->
<div class="i-thesvg-color:bun"></div>

Web コンポーネント

<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>

<iconify-icon icon="thesvg-color:bun"></iconify-icon>

HTML 画像

<img src="https://iconyz.com/api/public/svg/thesvg-color/bun.svg" alt="Bun アイコン" width="24" height="24">

theSVG Color の関連アイコン

他のアイコンセットの Bun アイコン

Bun アイコンのよくある質問

Bun アイコンは商用利用でも無料ですか?

はい。theSVG Color icons は MIT ライセンスで公開されており、個人・商用プロジェクトで利用できます。

React で Bun アイコンを使うには?

@iconify/react をインストールして <Icon icon="thesvg-color:bun" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。

Bun アイコンをウェブページに追加するには?

画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/thesvg-color/bun.svg" alt="Bun アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。

theSVG Color アイコンをすべて見る →