Bento アイコン
thesvg-color:bento
Bento アイコン(thesvg-color:bento)は、theSVG Color セットの無料 SVG アイコンです（作者: thesvg.org）。 45 × 41 のグリッドで描かれています。 theSVG Color icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。
- アイコンセット
- theSVG Color
- 作者
- thesvg.org
- ライセンス
- MIT
- サイズ
- 45 × 41
SVG コード
<svg xmlns="http://www.w3.org/2000/svg" width="45" height="41" viewBox="0 0 45 41"><g fill="none"><path fill="#dbdbdb" fill-rule="evenodd" d="M4.206 28.621C1.883 26.804.722 25.895.287 24.847L0 23.419v-5.847h1.464v2.909c.641-.601 1.535-1.3 2.742-2.245l11.611-9.087c2.323-1.818 3.484-2.727 4.823-3.067c1.178-.3 2.447-.3 3.625 0c1.339.34 2.5 1.25 4.822 3.067L40.7 18.236c1.207.945 2.1 1.644 2.742 2.245v-2.91h1.464v5.858c0 .478-.096.957-.287 1.418c-.435 1.048-1.597 1.957-3.92 3.774l-11.61 9.088c-2.323 1.817-3.484 2.726-4.823 3.066c-1.178.3-2.447.3-3.625 0c-1.339-.34-2.5-1.249-4.823-3.066z" clip-rule="evenodd"/><path fill="#fff" d="M4.206 22.764C1.883 20.947.722 20.038.287 18.99a3.65 3.65 0 0 1 0-2.837c.435-1.048 1.596-1.957 3.919-3.774l11.611-9.087C18.14 1.474 19.301.565 20.64.225c1.178-.3 2.447-.3 3.625 0c1.339.34 2.5 1.249 4.822 3.067L40.7 12.379c2.322 1.817 3.484 2.726 3.919 3.774a3.65 3.65 0 0 1 0 2.837c-.435 1.048-1.597 1.957-3.92 3.774l-11.61 9.087c-2.323 1.818-3.484 2.727-4.823 3.067c-1.178.3-2.447.3-3.625 0c-1.339-.34-2.5-1.25-4.823-3.067z"/><path fill="#ff8686" d="M17.476 11.513c-1.161-.909-1.742-1.363-1.96-1.887a1.82 1.82 0 0 1 0-1.418c.218-.524.799-.979 1.96-1.887l1.659-1.299c1.161-.908 1.742-1.363 2.411-1.533a3.7 3.7 0 0 1 1.813 0c.67.17 1.25.625 2.41 1.533l1.66 1.299c1.161.908 1.742 1.363 1.96 1.887c.19.46.19.957 0 1.418c-.218.524-.799.979-1.96 1.887l-1.66 1.299c-1.16.908-1.74 1.363-2.41 1.533a3.7 3.7 0 0 1-1.813 0c-.67-.17-1.25-.625-2.411-1.533z"/><path fill="#5aff88" d="M28.535 20.168c-1.162-.909-1.742-1.363-1.96-1.887a1.82 1.82 0 0 1 0-1.419c.218-.524.798-.978 1.96-1.887l1.658-1.298c1.162-.909 1.742-1.363 2.412-1.533a3.7 3.7 0 0 1 1.812 0c.67.17 1.25.624 2.411 1.533l1.66 1.298c1.16.909 1.741 1.363 1.959 1.887c.191.461.191.958 0 1.419c-.218.524-.799.978-1.96 1.887l-1.659 1.298c-1.16.909-1.742 1.363-2.411 1.533a3.7 3.7 0 0 1-1.812 0c-.67-.17-1.25-.624-2.412-1.533z"/><path fill="#768cff" d="M6.418 20.168c-1.162-.909-1.742-1.363-1.96-1.887a1.82 1.82 0 0 1 0-1.419c.218-.524.798-.978 1.96-1.887l1.658-1.298c1.162-.909 1.742-1.363 2.412-1.533a3.7 3.7 0 0 1 1.812 0c.67.17 1.25.624 2.411 1.533L27.43 23.63c1.161.908 1.742 1.363 1.96 1.887c.19.46.19.957 0 1.418c-.218.524-.799.978-1.96 1.887l-1.66 1.298c-1.16.91-1.74 1.364-2.41 1.534c-.59.15-1.224.15-1.813 0c-.67-.17-1.25-.625-2.411-1.534z"/></g></svg>
Bento アイコンの使い方
React
import { Icon } from "@iconify/react";
<Icon icon="thesvg-color:bento" width="24" />
Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="thesvg-color:bento" width="24" />
</template>
Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="thesvg-color:bento" width="24" />
Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[thesvg-color--bento]"></span>
UnoCSS
<!-- @unocss/preset-icons + @iconify-json/thesvg-color -->
<div class="i-thesvg-color:bento"></div>
Web コンポーネント
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="thesvg-color:bento"></iconify-icon>
HTML 画像
<img src="https://iconyz.com/api/public/svg/thesvg-color/bento.svg" alt="Bento アイコン" width="24" height="24">
Bento アイコン のよくある質問
Bento アイコンは商用利用でも無料ですか?
はい。theSVG Color icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。
React で Bento アイコンを使うには?
@iconify/react をインストールして <Icon icon="thesvg-color:bento" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。
Bento アイコンをウェブページに追加するには?
画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/thesvg-color/bento.svg" alt="Bento アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。
theSVG Color アイコン をすべて見る →
ICONYZ
