Lobehub アイコン
thesvg-color:lobehub
Lobehub アイコン(thesvg-color:lobehub)は、theSVG Color セットの無料 SVG アイコンです（作者: thesvg.org）。 320 × 320 のグリッドで描かれています。 theSVG Color icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。
- アイコンセット
- theSVG Color
- 作者
- thesvg.org
- ライセンス
- MIT
- サイズ
- 320 × 320
SVG コード
<svg xmlns="http://www.w3.org/2000/svg" width="320" height="320" viewBox="0 0 320 320"><path fill="url(#SVGC2IabbnI)" d="M294 172.519c0 75.655-59.442 128.5-134 128.5s-134-53.845-134-129.5c0-22.5 5-32.141 31.5-35.671c47.5-6.329 72.542-3.829 102.5-3.829c29.959 0 72.556-1.27 102.5 3.829c24.5 4.171 30 8.671 31.5 36.671"/><path fill="#972021" d="M159.75 242.51c-28.25 0-35.75 3.5-35.75 3.5s3.5 27 35.75 27s35.75-27 35.75-27s-7.5-3.5-35.75-3.5"/><path fill="url(#SVGzIDADdkq)" d="M271.999 148.517c0 6.351-49.92 11.5-111.5 11.5s-111.5-5.149-111.5-11.5c0-6.352 49.92-11.5 111.5-11.5s111.5 5.148 111.5 11.5"/><path fill="url(#SVGnviW0bfi)" d="M135.503 160.013c.633-14.972-.483-22.788-5.5-36.443c0 0 9.5-12.056 27-12.056s30 3.064 30 3.064c-3.028 16.793-3.182 26.921-2.5 45.435z"/><path fill="#fff" d="M119.191 234.294c14.742-7.076 24.811-21.51 24.811-39.273c0-25.406-20.595-48-46-48s-47 19.594-47 45c0 13.983 6.542 26.812 16.662 35.521c5.893-2.245 12.652-3.521 19.838-3.521c12.705 0 24.077 3.989 31.689 10.273m81.622 0c-14.742-7.076-24.811-21.51-24.811-39.273c0-25.406 20.595-48 46-48s47 19.594 47 45c0 13.983-6.543 26.812-16.662 35.521c-5.893-2.245-12.652-3.521-19.838-3.521c-12.705 0-24.077 3.989-31.689 10.273"/><path fill="url(#SVGyLOylebU)" d="M101 221.012c15.464 0 28-12.536 28-28s-12.536-28-28-28s-28 12.536-28 28s12.536 28 28 28"/><path fill="url(#SVGyLOylebU)" d="M219 221.012c-15.464 0-28-12.536-28-28s12.536-28 28-28s28 12.536 28 28s-12.536 28-28 28"/><path fill="url(#SVGPfRMWdaq)" d="M172.997 19.016c-14.027 0-19.5-11.5-41-11c-23.394 0-34 13-45.5 23c-1.958 1.702-11.5 7-16 9c-19.683 8.748-34.5 21.5-34.5 40.5c0 20.711 17.461 37.5 39 37.5c3.536 0 6.963-.453 10.22-1.301c8.7 10.539 22.179 16.658 37.28 17.301c23.5 1 31-15.25 44.5-8.5c9.259 4.629 13.83 8.5 28.5 8.5c17.108 0 25.057-5.233 30-11c9-10.5 22.879-4 31.5-4c18.778 0 34-14.551 34-32.5c0-17.95-15.222-32.5-34-32.5c-5.15 0-14.856 1.27-17-7c-3.5-13.5-20.148-29-44-29c-9.318 0-17.691 1-23 1"/><path fill="url(#SVGYXo2PcBq)" d="M82.998 20.517a9.5 9.5 0 1 1-19 0a9.5 9.5 0 0 1 19 0"/><path fill="url(#SVGBIcYEdoH)" d="M71.002 108.021c0 8.836-7.163 16-16 16s-16-7.164-16-16s7.163-16 16-16s16 7.163 16 16"/><path fill="url(#SVGsMUX9dqP)" d="M282.002 49.516c0 8.56-6.94 15.5-15.5 15.5s-15.5-6.94-15.5-15.5s6.94-15.5 15.5-15.5s15.5 6.94 15.5 15.5"/><path fill="#fff" d="M132.232 244.111c5.483-.823 14.191-1.601 27.515-1.601c12.212 0 20.546.654 26.073 1.396c-1.542 5.861-12.963 8.104-26.823 8.104c-13.698 0-25.013-2.191-26.765-7.899"/><path fill="url(#SVG3UMdMepG)" d="M160.006 290.016c20.099 0 23.305-20.488 23.927-25.61c.478-4.146-1.675-6.244-4.02-7.659c-2.345-1.414-9.379-2.731-19.907-2.731c-10.527 0-17.514 1.317-19.906 2.731c-2.393 1.415-4.546 3.513-4.02 7.659c.622 5.122 3.828 25.61 23.926 25.61"/><path fill="url(#SVGXpAFVdSB)" d="M171.694 129.744c-5.721-3.89-13.954-4.248-19.786-.526c-7.724 4.929-16.971 7.798-26.91 7.798c-27.062 0-49-21.267-49-47.5c0-26.234 21.938-47.5 49-47.5c13.628 0 25.956 5.392 34.838 14.097c4.948 4.85 13.088 6.24 19.498 3.609a42.5 42.5 0 0 1 16.164-3.166c22.92 0 41.5 18.012 41.5 40.23s-18.58 40.23-41.5 40.23c-8.856 0-17.065-2.69-23.804-7.272"/><path fill="url(#SVGakaWtcsS)" d="M219.002 106.51c0 7.456-6.044 13.5-13.5 13.5s-13.5-6.044-13.5-13.5s6.044-13.5 13.5-13.5s13.5 6.044 13.5 13.5"/><defs><radialGradient id="SVGC2IabbnI" cx="0" cy="0" r="1" gradientTransform="rotate(-57.041 328.447 55.73)scale(238.957 377.848)" gradientUnits="userSpaceOnUse"><stop stop-color="#fcbd72"/><stop offset=".255" stop-color="#fac371"/><stop offset=".465" stop-color="#ffa14c"/><stop offset=".64" stop-color="#eb7a34"/><stop offset=".845" stop-color="#f0866d"/></radialGradient><radialGradient id="SVGYXo2PcBq" cx="0" cy="0" r="1" gradientTransform="rotate(90 26.49 47.007)scale(9.5)" gradientUnits="userSpaceOnUse"><stop offset=".62" stop-color="#58239f"/><stop offset=".822" stop-color="#8e3fe9"/><stop offset="1" stop-color="#af6fec"/></radialGradient><radialGradient id="SVGBIcYEdoH" cx="0" cy="0" r="1" gradientTransform="rotate(90 -26.51 81.512)scale(16)" gradientUnits="userSpaceOnUse"><stop offset=".62" stop-color="#c32f45"/><stop offset=".822" stop-color="#f44341"/><stop offset="1" stop-color="#fc9d9b"/></radialGradient><radialGradient id="SVGsMUX9dqP" cx="0" cy="0" r="1" gradientTransform="rotate(90 108.493 158.009)scale(15.5)" gradientUnits="userSpaceOnUse"><stop offset=".385" stop-color="#4da33c"/><stop offset=".822" stop-color="#63ed47"/><stop offset="1" stop-color="#70d775"/></radialGradient><radialGradient id="SVG3UMdMepG" cx="0" cy="0" r="1" gradientTransform="matrix(0 -44 58.6667 0 160 290)" gradientUnits="userSpaceOnUse"><stop stop-color="#fd9b8b"/><stop offset=".5" stop-color="#f24f3a"/><stop offset="1" stop-color="#d93318"/></radialGradient><radialGradient id="SVGXpAFVdSB" cx="0" cy="0" r="1" gradientTransform="matrix(15.5 -61.50002 82.33886 20.75208 156 110)" gradientUnits="userSpaceOnUse"><stop offset=".26" stop-color="#ffc1a3"/><stop offset=".764" stop-color="#fd82ab"/><stop offset=".952" stop-color="#df4faa"/></radialGradient><radialGradient id="SVGakaWtcsS" cx="0" cy="0" r="1" gradientTransform="rotate(90 49.496 156.006)scale(13.5)" gradientUnits="userSpaceOnUse"><stop offset=".572" stop-color="#4c86d3"/><stop offset=".822" stop-color="#72ade2"/><stop offset="1" stop-color="#90bbe3"/></radialGradient><linearGradient id="SVGzIDADdkq" x1="48.999" x2="271.999" y1="148.517" y2="148.517" gradientUnits="userSpaceOnUse"><stop stop-color="#eb791e"/><stop offset="1" stop-color="#db694e"/></linearGradient><linearGradient id="SVGnviW0bfi" x1="135.5" x2="187" y1="147.5" y2="147.5" gradientUnits="userSpaceOnUse"><stop stop-color="#fcc659"/><stop offset=".183" stop-color="#ffe366"/><stop offset=".404" stop-color="#feca50"/><stop offset=".702" stop-color="#ffe76c"/><stop offset="1" stop-color="#fcc553"/></linearGradient><linearGradient id="SVGyLOylebU" x1="73" x2="247" y1="193.012" y2="193.012" gradientUnits="userSpaceOnUse"><stop stop-color="#2a0b39"/><stop offset=".322" stop-color="#42180e"/><stop offset=".678" stop-color="#483a00"/><stop offset="1" stop-color="#310d1d"/></linearGradient><linearGradient id="SVGPfRMWdaq" x1="44.5" x2="291" y1="84" y2="82" gradientUnits="userSpaceOnUse"><stop stop-color="#342fbd"/><stop offset=".188" stop-color="#733cc0"/><stop offset=".375" stop-color="#8748c2"/><stop offset=".654" stop-color="#7c80de"/><stop offset="1" stop-color="#4a306d"/></linearGradient></defs></svg>Lobehub アイコンの使い方
React
import { Icon } from "@iconify/react";
<Icon icon="thesvg-color:lobehub" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="thesvg-color:lobehub" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="thesvg-color:lobehub" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[thesvg-color--lobehub]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/thesvg-color -->
<div class="i-thesvg-color:lobehub"></div>Web コンポーネント
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="thesvg-color:lobehub"></iconify-icon>HTML 画像
<img src="https://iconyz.com/api/public/svg/thesvg-color/lobehub.svg" alt="Lobehub アイコン" width="24" height="24">他のアイコンセットの Lobehub アイコン
Lobehub アイコン のよくある質問
Lobehub アイコンは商用利用でも無料ですか?
はい。theSVG Color icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。
React で Lobehub アイコンを使うには?
@iconify/react をインストールして <Icon icon="thesvg-color:lobehub" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。
Lobehub アイコンをウェブページに追加するには?
画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/thesvg-color/lobehub.svg" alt="Lobehub アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。