Tanstack icon

thesvg-color:tanstack

The Tanstack icon (thesvg-color:tanstack) is a free SVG icon from the theSVG Color set by thesvg.org. It is drawn on a 633 × 633 grid. theSVG Color icons are released under the MIT license, which allows use in personal and commercial projects. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.

Icon set: theSVG Color
Author: thesvg.org
License: MIT
Size: 633 × 633

Download SVG

SVG code

<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>

How to use the Tanstack icon

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 component

<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 image

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

Tanstack icon in other icon sets

Tanstack icon FAQ

Is the Tanstack icon free for commercial use?

Yes. theSVG Color icons are released under the MIT license, which allows use in personal and commercial projects.

How do I use the Tanstack icon in React?

Install @iconify/react and render <Icon icon="thesvg-color:tanstack" />, or use “Copy code” on this page to get a standalone React component.

How do I add the Tanstack icon to a web page?

Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/thesvg-color/tanstack.svg" alt="Tanstack icon">, or paste the SVG code inline to style it with CSS.

Browse all theSVG Color icons →