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

# OpenCode

OpenCode is an open-source AI coding agent for the terminal, IDE and desktop that works with 75+ LLM providers, including Claude, GPT and Gemini.

## At a glance

- **Page**: https://devicons.io/icons/opencode/
- **Website**: https://opencode.ai/
- **License**: https://github.com/anomalyco/opencode/blob/dev/LICENSE
- **Brand guidelines**: https://opencode.ai/brand
- **Also known as**: opencode, opencode.ai, open code
- **Tags**: [AI](/icons/tag/ai/), [Agents](/icons/tag/agents/), [CLI](/icons/tag/cli/), [Developer Tools](/icons/tag/developer-tools/), [Open Source](/icons/tag/open-source/)
- **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 |
| --- | --- | --- | --- | --- |
| `opencode-icon` | `OpencodeIcon` | https://devicons.io/devicons/icons/opencode-icon.svg | https://devicons.io/devicons/font/opencode-icon.svg | `devicons devicons-opencode-icon` |
| `opencode` | `Opencode` | https://devicons.io/devicons/icons/opencode.svg | https://devicons.io/devicons/font/opencode.svg | `devicons devicons-opencode` |

## Install and use

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

### React

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

<OpencodeIcon size={32} alt="OpenCode logo" />
```

### Vue

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

<template>
  <OpencodeIcon :size="32" alt="OpenCode logo" />
</template>
```

### Svelte

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

<OpencodeIcon size={32} alt="OpenCode logo" />
```

### Raw SVG

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

### Icon font

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

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

## About the OpenCode logo

The OpenCode logo is drawn on a pixel grid, like a terminal font. The mark is a tall, square-cornered "O": a thick near-black #211E1E frame around a counter whose lower part is filled with light gray #CFCECD. The wordmark spells "opencode" in the same blocky lowercase letters, with "open" in mid gray #656363 and "code" in near-black.

The official brand page provides the logo and wordmark as separate files, each in light and dark versions. The light colors here have low contrast on dark backgrounds, so use the monochrome version there.

## When to use this logo

Use OpenCode in AI coding agent comparisons, terminal and CLI tool roundups, developer environment setup docs, and diagrams showing which models power a coding workflow. It also fits AI pair-programming tutorials and editor setup guides. It pairs naturally with Claude Code, Codex, Cursor, Aider and GitHub Copilot, and with model providers such as Anthropic, OpenAI and Google Gemini.

## Related icons

- [Codex](/icons/codex.md)
- [goose](/icons/goose.md)
- [Junie](/icons/junie.md)
- [MetaGPT](/icons/metagpt.md)
- [Claude Code](/icons/claude-code.md)
- [Devin](/icons/devin.md)
- [Dify](/icons/dify.md)
- [Kimi](/icons/kimi.md)

## Browse the catalog
- Previous: [OpenClaw](/icons/openclaw.md)
- Next: [OpenCollective](/icons/opencollective.md)
- [All icons](/icons.md)