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

# Civitai

Civitai is a model-sharing platform and community for generative AI where creators share free Stable Diffusion and Flux models and AI-generated images.

## At a glance

- **Page**: https://devicons.io/icons/civitai/
- **Website**: https://civitai.com/
- **License**: https://civitai.com/content/tos
- **Also known as**: Civit AI, Civitai.com
- **Tags**: [AI](/icons/tag/ai/), [Image Generation](/icons/tag/image-generation/), [Machine Learning](/icons/tag/machine-learning/), [Community](/icons/tag/community/)
- **Version added**: 1.2.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 |
| --- | --- | --- | --- | --- |
| `civitai-icon` | `CivitaiIcon` | https://devicons.io/devicons/icons/civitai-icon.svg | https://devicons.io/devicons/font/civitai-icon.svg | `devicons devicons-civitai-icon` |
| `civitai` | `Civitai` | https://devicons.io/devicons/icons/civitai.svg | https://devicons.io/devicons/font/civitai.svg | `devicons devicons-civitai` |

## Install and use

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

### React

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

<CivitaiIcon size={32} alt="Civitai logo" />
```

### Vue

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

<template>
  <CivitaiIcon :size="32" alt="Civitai logo" />
</template>
```

### Svelte

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

<CivitaiIcon size={32} alt="Civitai logo" />
```

### Raw SVG

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

### Icon font

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

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

## About the Civitai logo

The Civitai mark is a hexagon with a bright blue outer ring, a dark navy center and a white, angular "C". The wordmark spells "CIVITAI" in blocky letters, with a small notch cut into the "V". On civitai.com the mark shows on small screens and the wordmark on larger ones. Both files use the site's default colors; the site swaps in seasonal colors for holidays such as Halloween.

The ring fades from blue (#1284F7) to deep blue (#0A20C9). The wordmark is dark grey (#222222) with "AI" in blue (#1971C2). The dark grey letters are hard to see on dark backgrounds, so use the monochrome version in dark themes.

## When to use this logo

Use the Civitai logo in model hub comparisons, Stable Diffusion and Flux workflow docs, checkpoint and LoRA download guides, and lists of generative art tools. The hexagon mark fits compact spots such as model source badges, provider pickers and app sidebars, while the wordmark suits headers and partner sections. It pairs naturally with Hugging Face, ComfyUI, AUTOMATIC1111, Stable Diffusion and Flux.

## Related icons

- [AUTOMATIC1111](/icons/automatic1111.md)
- [ComfyUI](/icons/comfyui.md)
- [DALL·E](/icons/dall-e.md)
- [Midjourney](/icons/midjourney.md)
- [Stability AI](/icons/stability-ai.md)
- [DeepSeek](/icons/deepseek.md)
- [Github Copilot](/icons/github-copilot.md)
- [Hugging Face](/icons/hugging-face.md)

## Browse the catalog
- Previous: [Cirrus CI](/icons/cirrus-ci.md)
- Next: [Claude](/icons/claude.md)
- [All icons](/icons.md)