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

# ComfyUI

ComfyUI is an open-source, node-based AI engine for generating images, video, 3D models and audio with diffusion models, developed by Comfy Org.

## At a glance

- **Page**: https://devicons.io/icons/comfyui/
- **Website**: https://www.comfy.org/
- **License**: https://github.com/Comfy-Org/ComfyUI/blob/master/LICENSE
- **Brand guidelines**: https://www.comfy.org/brand
- **Also known as**: Comfy, Comfy UI, Comfy Org, Comfy Cloud
- **Tags**: [AI](/icons/tag/ai/), [Image Generation](/icons/tag/image-generation/), [Video](/icons/tag/video/), [Open Source](/icons/tag/open-source/), [Machine Learning](/icons/tag/machine-learning/)
- **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 |
| --- | --- | --- | --- | --- |
| `comfyui-icon` | `ComfyuiIcon` | https://devicons.io/devicons/icons/comfyui-icon.svg | https://devicons.io/devicons/font/comfyui-icon.svg | `devicons devicons-comfyui-icon` |
| `comfyui` | `Comfyui` | https://devicons.io/devicons/icons/comfyui.svg | https://devicons.io/devicons/font/comfyui.svg | `devicons devicons-comfyui` |

## Install and use

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

### React

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

<ComfyuiIcon size={32} alt="ComfyUI logo" />
```

### Vue

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

<template>
  <ComfyuiIcon :size="32" alt="ComfyUI logo" />
</template>
```

### Svelte

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

<ComfyuiIcon size={32} alt="ComfyUI logo" />
```

### Raw SVG

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

### Icon font

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

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

## About the ComfyUI logo

The Comfy logomark is a chunky, slanted "C" drawn with rounded blocks, with a short tab that sticks out from its lower left like a node connector. The core logo spells "Comfy" in the same blocky, slanted letterforms, with the logomark as its first letter. Comfy's brand portal lists Comfy Yellow #F2FF59 as the main color and Comfy Ink #211927 as its dark partner.

Comfy Yellow is bright and works on dark backgrounds, but it almost disappears on white. On light backgrounds, use the monochrome version. The brand portal asks that the logos not be distorted, recolored or outlined.

## When to use this logo

Use ComfyUI in diffusion workflow tutorials, node-graph and pipeline diagrams, image and video generation tool comparisons, and docs for custom nodes or the ComfyUI API. It also fits self-hosted GPU setup guides and Comfy Cloud deployment notes. It pairs naturally with Stability AI, AUTOMATIC1111, Hugging Face, Black Forest Labs Flux and other open image models.

## Related icons

- [AUTOMATIC1111](/icons/automatic1111.md)
- [Stability AI](/icons/stability-ai.md)
- [DeepSeek](/icons/deepseek.md)
- [Hugging Face](/icons/hugging-face.md)
- [Adobe Firefly](/icons/adobe-firefly.md)
- [Civitai](/icons/civitai.md)
- [Coqui](/icons/coqui.md)
- [DALL·E](/icons/dall-e.md)

## Browse the catalog
- Previous: [Cohere](/icons/cohere.md)
- Next: [Commitizen](/icons/commitizen.md)
- [All icons](/icons.md)