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

# TRAE

TRAE is an AI IDE from ByteDance, an AI-native code editor with code completion, AI chat and a builder mode that creates apps from natural language.

## At a glance

- **Page**: https://devicons.io/icons/trae/
- **Website**: https://www.trae.ai/
- **License**: https://www.trae.ai/terms-of-service
- **Also known as**: Trae, Trae AI, TRAE IDE
- **Tags**: [AI](/icons/tag/ai/), [IDE](/icons/tag/ide/), [Editor](/icons/tag/editor/), [Developer Tools](/icons/tag/developer-tools/)
- **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 |
| --- | --- | --- | --- | --- |
| `trae-icon` | `TraeIcon` | https://devicons.io/devicons/icons/trae-icon.svg | https://devicons.io/devicons/font/trae-icon.svg | `devicons devicons-trae-icon` |
| `trae` | `Trae` | https://devicons.io/devicons/icons/trae.svg | https://devicons.io/devicons/font/trae.svg | `devicons devicons-trae` |

## Install and use

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

### React

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

<TraeIcon size={32} alt="TRAE logo" />
```

### Vue

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

<template>
  <TraeIcon :size="32" alt="TRAE logo" />
</template>
```

### Svelte

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

<TraeIcon size={32} alt="TRAE logo" />
```

### Raw SVG

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

### Icon font

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

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

## About the TRAE logo

The TRAE mark is a blocky frame with two diamond "eyes" inside. The frame's lower-left corner is stepped, which gives the shape the feel of a small screen or a friendly face. The full logo pairs it with a heavy "TRAE" wordmark whose last letter is an open bracket holding a diamond, echoing the mark. The mark and wordmark come from the vector assets on trae.ai.

The brand color is a bright mint green (#32F08C). It reads well on dark backgrounds but looks pale on white. The full logo has a black wordmark, so in dark themes use the monochrome version or the mark on its own.

## When to use this logo

Use the TRAE logo in AI code editor comparisons, IDE and developer tool lists, setup guides for extensions or MCP servers, and AI coding stack diagrams. It pairs naturally with Cursor, Windsurf, Visual Studio Code, Kiro and GitHub Copilot, and with ByteDance or Doubao when you show the company and models behind it.

## Related icons

- [Cursor](/icons/cursor.md)
- [Kiro](/icons/kiro.md)
- [Windsurf](/icons/windsurf.md)
- [Junie](/icons/junie.md)
- [Github Copilot](/icons/github-copilot.md)
- [Visual Studio Code](/icons/visual-studio-code.md)
- [Cline](/icons/cline.md)
- [Codex](/icons/codex.md)

## Browse the catalog
- Previous: [Trac](/icons/trac.md)
- Next: [Travis CI](/icons/travis-ci.md)
- [All icons](/icons.md)