[Home](/index.md) › [Icons](/icons.md) › TanStack

# TanStack

TanStack is a family of open-source, type-safe headless libraries for the web, including TanStack Query, Router, Table, Form and the full-stack TanStack Start framework.

## At a glance

- **Page**: https://devicons.io/icons/tanstack/
- **Website**: https://tanstack.com/
- **Also known as**: TanStack Start, TanStack Router, TanStack Table, TanStack Form, TanStack Virtual, TanStack DB
- **Tags**: [JavaScript](/icons/tag/javascript/), [TypeScript](/icons/tag/typescript/), [React](/icons/tag/react/), [Open Source](/icons/tag/open-source/), [Framework](/icons/tag/framework/)
- **Version added**: 1.3.0
- **Contrast**: needs a light backdrop on dark backgrounds

## Files

Each file is one variant of this logo. The component name is derived from the file name.

| File | Component | Color SVG | Monochrome SVG | Font class |
| --- | --- | --- | --- | --- |
| `tanstack-icon` | `TanstackIcon` | https://devicons.io/devicons/icons/tanstack-icon.svg | https://devicons.io/devicons/font/tanstack-icon.svg | `devicons devicons-tanstack-icon` |
| `tanstack` | `Tanstack` | https://devicons.io/devicons/icons/tanstack.svg | https://devicons.io/devicons/font/tanstack.svg | `devicons devicons-tanstack` |

## Install and use

```bash
npm install @dev.icons/react  # or @dev.icons/vue, @dev.icons/svelte
```

### React

```tsx
import { TanstackIcon } from "@dev.icons/react";
// Monochrome (inherits currentColor):
// import { TanstackIcon } from "@dev.icons/react/mono";

<TanstackIcon size={32} alt="TanStack logo" />
```

### Vue

```vue
<script setup>
import { TanstackIcon } from "@dev.icons/vue";
</script>

<template>
  <TanstackIcon :size="32" alt="TanStack logo" />
</template>
```

### Svelte

```svelte
<script>
  import { TanstackIcon } from "@dev.icons/svelte";
</script>

<TanstackIcon size={32} alt="TanStack logo" />
```

### Raw SVG

```html
<img src="https://devicons.io/devicons/icons/tanstack-icon.svg" alt="TanStack logo" width="48" height="48" />
```

### Icon font

```css
@import "devicons/css"; /* npm install devicons */
```

```html
<i class="devicons devicons-tanstack-icon"></i>
```

## About the TanStack logo

The TanStack icon is a near-black (#121212) rounded badge with a white palm tree standing on an island above white waves. The lockup puts a small version of the badge next to "TANSTACK" in heavy uppercase letters. TanStack Query, the library formerly known as React Query, has its own page with its own logo.

The near-black badge and wordmark disappear on dark surfaces, so use the monochrome versions there.

## When to use this logo

Use TanStack in React and Solid stack diagrams, data-fetching and routing library comparisons, full-stack framework overviews and docs for TanStack Start, Router or Table. It pairs naturally with React Query, React, Vite, TypeScript and Next.js.

## Related icons

- [Remotion](/icons/remotion.md)
- [Angular](/icons/angular.md)
- [RedwoodJS](/icons/redwoodjs.md)
- [Remix](/icons/remix.md)
- [LangChain](/icons/langchain.md)
- [Next.js](/icons/nextjs.md)
- [Svelte](/icons/svelte.md)
- [Vitest](/icons/vitest.md)

## Browse the catalog
- Previous: [Tailwind](/icons/tailwind.md)
- Next: [Tapcart](/icons/tapcart.md)
- [All icons](/icons.md)