Tanstack アイコン

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

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

thesvg-color:tanstack

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

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

SVG をダウンロード

SVG コード

<svg xmlns="http://www.w3.org/2000/svg" width="633" height="633" viewBox="0 0 633 633"><defs><linearGradient id="SVGYD9qcbEu" x1="50%" x2="50%" y1="0%" y2="71.65%"><stop offset="0%" stop-color="#6bdaff"/><stop offset="31.922%" stop-color="#f9ffb5"/><stop offset="70.627%" stop-color="#ffa770"/><stop offset="100%" stop-color="#ff7373"/></linearGradient><linearGradient id="SVGjuryB77D" x1="43.996%" x2="53.441%" y1="8.54%" y2="93.872%"><stop offset="0%" stop-color="#673800"/><stop offset="100%" stop-color="#b65e00"/></linearGradient><linearGradient id="SVGZpP8BbBX" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#2f8a00"/><stop offset="100%" stop-color="#90ff57"/></linearGradient><linearGradient id="SVGZceYleGf" x1="92.9%" x2="8.641%" y1="45.768%" y2="54.892%"><stop offset="0%" stop-color="#ee2700"/><stop offset="100%" stop-color="#ff008e"/></linearGradient><linearGradient id="SVGbwdRnd4H" x1="61.109%" x2="43.717%" y1="3.633%" y2="43.072%"><stop offset="0%" stop-color="#fff400"/><stop offset="100%" stop-color="#3c8700"/></linearGradient><linearGradient id="SVGO68tvecJ" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#ffdf00"/><stop offset="100%" stop-color="#ff9d00"/></linearGradient><linearGradient id="SVGbYPZbdeo" x1="127.279%" x2="0%" y1="49.778%" y2="50.222%"><stop offset="0%" stop-color="#ffa400"/><stop offset="100%" stop-color="#ff5e00"/></linearGradient><linearGradient id="SVGiQeWrbLt" x1="127.279%" x2="0%" y1="47.531%" y2="52.469%"><stop offset="0%" stop-color="#ffa400"/><stop offset="100%" stop-color="#ff5e00"/></linearGradient><linearGradient id="SVG2imxqcIX" x1="127.279%" x2="0%" y1="46.195%" y2="53.805%"><stop offset="0%" stop-color="#ffa400"/><stop offset="100%" stop-color="#ff5e00"/></linearGradient><linearGradient id="SVGBVrDwePK" x1="127.279%" x2="0%" y1="35.33%" y2="64.67%"><stop offset="0%" stop-color="#ffa400"/><stop offset="100%" stop-color="#ff5e00"/></linearGradient><linearGradient id="SVGn6kuzJKz" x1="127.279%" x2="0%" y1="4.875%" y2="95.125%"><stop offset="0%" stop-color="#ffa400"/><stop offset="100%" stop-color="#ff5e00"/></linearGradient><linearGradient id="SVGekndVbbN" x1="78.334%" x2="31.668%" y1="0%" y2="100%"><stop offset="0%" stop-color="#ffa400"/><stop offset="100%" stop-color="#ff5e00"/></linearGradient><linearGradient id="SVGfUuNfcdP" x1="57.913%" x2="44.88%" y1="0%" y2="100%"><stop offset="0%" stop-color="#ffa400"/><stop offset="100%" stop-color="#ff5e00"/></linearGradient><linearGradient id="SVGIzO6ldeW" x1="50.495%" x2="49.68%" y1="0%" y2="100%"><stop offset="0%" stop-color="#ffa400"/><stop offset="100%" stop-color="#ff5e00"/></linearGradient><circle id="SVGdqVYRbPV" cx="308.5" cy="308.5" r="308.5"/></defs><g fill="none" fill-rule="evenodd" transform="translate(9 8)"><mask id="SVGGN1cOehS" fill="#fff"><use href="#SVGdqVYRbPV"/></mask><use fill="url(#SVGYD9qcbEu)" href="#SVGdqVYRbPV"/><ellipse cx="81.5" cy="602.5" fill="#015064" stroke="#00cfe2" stroke-width="25" mask="url(#SVGGN1cOehS)" rx="214.5" ry="185.968"/><ellipse cx="535.5" cy="602.5" fill="#015064" stroke="#00cfe2" stroke-width="25" mask="url(#SVGGN1cOehS)" rx="214.5" ry="185.968"/><ellipse cx="81.5" cy="640.5" fill="#015064" stroke="#00a8b8" stroke-width="25" mask="url(#SVGGN1cOehS)" rx="214.5" ry="185.968"/><ellipse cx="535.5" cy="640.5" fill="#015064" stroke="#00a8b8" stroke-width="25" mask="url(#SVGGN1cOehS)" rx="214.5" ry="185.968"/><ellipse cx="81.5" cy="676.5" fill="#015064" stroke="#007782" stroke-width="25" mask="url(#SVGGN1cOehS)" rx="214.5" ry="185.968"/><ellipse cx="535.5" cy="676.5" fill="#015064" stroke="#007782" stroke-width="25" mask="url(#SVGGN1cOehS)" rx="214.5" ry="185.968"/><g mask="url(#SVGGN1cOehS)"><path fill="url(#SVGjuryB77D)" stroke="#6e3a00" stroke-width="6.088" d="M98.318 88.007q11.537 55.656 26.856 106.013t46.07 106.088l-51.903 11.67q-15.085-90.015-21.525-117.487T77.727 94.934l20.591-6.927" transform="rotate(155 122.6 66.59)scale(1 -1)"/><g stroke="#2f8a00"><path fill="url(#SVGZpP8BbBX)" stroke-width="9.343" d="M108.544 66.538s-13.54-21.305-37.417-27.785q-23.875-6.481-54.048 13.892Q41.657 72.64 58.405 75.28c16.749 2.64 50.14-8.74 50.14-8.74Z" transform="rotate(1 -6061.691 5926.397)"/><path fill="url(#SVGZpP8BbBX)" stroke-width="9.343" d="M108.544 67.138s-47.187-5.997-81.077 19.936Q-6.424 113.006 1.502 187.369q42.63-43.83 61.016-64.846c18.387-21.016 46.026-55.385 46.026-55.385Z" transform="rotate(1 -6061.691 5926.397)"/><path fill="url(#SVGZpP8BbBX)" stroke-width="9.343" d="M108.544 66.538q-2.94-32.557 17.82-48.94Q147.123 1.212 170.303 0q-7.298 32.29-22.524 44.361q-15.227 12.072-39.236 22.177Z" transform="rotate(1 -6061.691 5926.397)"/><path fill="url(#SVGZpP8BbBX)" stroke-width="9.343" d="M108.544 67.138q44.757-47.23 93.669-33.869q48.91 13.36 56.787 55.827q-52.347-5.486-75.228-8.058q-22.881-2.574-75.228-13.9Z" transform="rotate(1 -6061.691 5926.397)"/><path fill="url(#SVGZpP8BbBX)" stroke-width="9.343" d="M108.544 67.138q52.302-14.072 88.905 17.17t45.762 77.571q-59.439-11.36-86.322-37.624a395 395 0 0 1-48.345-57.117Z" transform="rotate(1 -6061.691 5926.397)"/><path fill="url(#SVGZpP8BbBX)" stroke-width="9.343" d="M108.544 67.138Q60.037 90.331 52.75 135.436t13.698 98.462q37.31-62.127 42.096-89.849q4.787-27.721 0-76.91Z" transform="rotate(1 -6061.691 5926.397)"/><path stroke-linecap="round" stroke-width="5.91" d="M211.284 173.477q-20.776 32.987-28.32 60.093t-9.436 45.216"/><path stroke-linecap="round" stroke-width="5.91" d="M209.814 176.884q-35.973 3.847-56.428 23.714q-20.458 19.867-29.536 38.674m95.195-71.973q43.542-11.584 65.831-7.352q22.289 4.233 35.842 14.51m-109.408-1.839q30.436 13.66 54.186 29.837q23.75 16.178 35.643 30.617"/></g><path stroke="#830305" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="6.937" d="m409.379 398.157l-23.176 18.556m-58.163-41.197l-22.313 28.398m7.177-50.216l53.18 59.816"/><path fill="url(#SVGZceYleGf)" d="M67.585 27.463H5.68Q0 28.49 0 34.16t5.68 7.293h67.17l41.751-30.356q3.731-3.97.92-8.006c-2.811-4.036-4.6-3.626-8.177-2.803l-39.76 27.174Z" transform="rotate(-171 224.84 164.654)scale(1 -1)"/><path fill="#d8d8d8" stroke="#fff" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="4.414" d="m402.861 391.51l.471-4.088m-21.122 1.33l.472-4.087m-21.136.739l.485-3.845m-24.441-9.676l2.56-2.498m-15.874-9.818l2.56-2.497"/></g><ellipse cx="308.5" cy="720.5" fill="url(#SVGbwdRnd4H)" mask="url(#SVGGN1cOehS)" rx="266" ry="316.5"/><ellipse cx="308.5" cy="720.5" stroke="#6da300" stroke-opacity=".502" stroke-width="26" mask="url(#SVGGN1cOehS)" rx="253" ry="303.5"/><g mask="url(#SVGGN1cOehS)"><g transform="translate(389 -32)"><circle cx="168.5" cy="113.5" r="113.5" fill="url(#SVGO68tvecJ)"/><circle cx="168.5" cy="113.5" r="106" stroke="#ffc900" stroke-opacity=".529" stroke-width="15"/><path stroke="url(#SVGbYPZbdeo)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12" d="M30 113H0"/><path stroke="url(#SVGiQeWrbLt)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12" d="M33.5 79.5L7 74"/><path stroke="url(#SVG2imxqcIX)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12" d="m34 146l-29 8"/><path stroke="url(#SVGBVrDwePK)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12" d="m45 177l-24 13"/><path stroke="url(#SVGn6kuzJKz)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12" d="m67 204l-20 19"/><path stroke="url(#SVGekndVbbN)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12" d="m94.373 227l-13.834 22.847"/><path stroke="url(#SVGfUuNfcdP)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12" d="M127.5 243.5L120 268"/><path stroke="url(#SVGIzO6ldeW)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12" d="m167.5 252.5l.5 24.5"/></g></g><circle cx="307.5" cy="308.5" r="304" stroke="#000" stroke-width="25"/></g></svg>

Tanstack アイコンの使い方

React

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

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

Vue

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

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

Svelte

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

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

Tailwind CSS

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

UnoCSS

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

Web コンポーネント

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

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

HTML 画像

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

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

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

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

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

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

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

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

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

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