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

# SillyTavern

SillyTavern is a free, open-source, locally installed LLM frontend for chatting with text generation models via OpenAI-compatible, KoboldAI and other backends.

## At a glance

- **Page**: https://devicons.io/icons/sillytavern/
- **Website**: https://sillytavern.app/
- **License**: https://github.com/SillyTavern/SillyTavern/blob/release/LICENSE
- **Also known as**: ST, Silly Tavern
- **Tags**: [AI](/icons/tag/ai/), [LLM](/icons/tag/llm/), [Chatbot](/icons/tag/chatbot/), [Open Source](/icons/tag/open-source/), [Frontend](/icons/tag/frontend/)
- **Version added**: 1.2.0
- **Contrast**: needs a dark backdrop on light 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 |
| --- | --- | --- | --- | --- |
| `sillytavern-icon` | `SillytavernIcon` | https://devicons.io/devicons/icons/sillytavern-icon.svg | https://devicons.io/devicons/font/sillytavern-icon.svg | `devicons devicons-sillytavern-icon` |
| `sillytavern` | `Sillytavern` | https://devicons.io/devicons/icons/sillytavern.svg | https://devicons.io/devicons/font/sillytavern.svg | `devicons devicons-sillytavern` |

## Install and use

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

### React

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

<SillytavernIcon size={32} alt="SillyTavern logo" />
```

### Vue

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

<template>
  <SillytavernIcon :size="32" alt="SillyTavern logo" />
</template>
```

### Svelte

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

<SillytavernIcon size={32} alt="SillyTavern logo" />
```

### Raw SVG

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

### Icon font

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

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

## About the SillyTavern logo

The SillyTavern mark is a brain drawn in thick outlines, with circuit-board traces that end in round pads branching out on both sides. Bold white "ST" initials sit across the middle. The icon comes from the official vector logo in the SillyTavern repository, which matches the logo on sillytavern.app. The full logo pairs the mark with a plain "SillyTavern" wordmark.

The brain is a deep red (#A11B1B) and the initials are white (#FFFFFF), made for the dark interface the app uses. On white the initials disappear, so use the monochrome version on light backgrounds.

## When to use this logo

Use the SillyTavern logo in lists of LLM chat frontends, self-hosting guides, and docs for local inference backends that support it as a client. It also fits overviews of chat interfaces for local and cloud models, and setup guides that connect a frontend to an API key or a self-hosted server. Natural pairings are Ollama, LM Studio, KoboldCpp, Open WebUI and OpenRouter.

## Related icons

- [Claude](/icons/claude.md)
- [DeepSeek](/icons/deepseek.md)
- [360 Zhinao](/icons/ai360.md)
- [Aya](/icons/cohere-aya.md)
- [Dify](/icons/dify.md)
- [Doubao](/icons/doubao.md)
- [ERNIE](/icons/wenxin.md)
- [Google Bard](/icons/google-bard.md)

## Browse the catalog
- Previous: [Sigstore](/icons/sigstore.md)
- Next: [Sinatra](/icons/sinatra.md)
- [All icons](/icons.md)