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

# Devin

Devin is an autonomous AI software engineer and coding agent from Cognition that runs parallel cloud agents to write code, test it and open pull requests.

## At a glance

- **Page**: https://devicons.io/icons/devin/
- **Website**: https://devin.ai/
- **License**: https://cognition.com/legal/platform-terms-of-service
- **Brand guidelines**: https://devin.ai/brand
- **Also known as**: Devin AI, Cognition Devin, Cognition AI
- **Tags**: [AI](/icons/tag/ai/), [Agents](/icons/tag/agents/), [Developer Tools](/icons/tag/developer-tools/), [Automation](/icons/tag/automation/), [Enterprise](/icons/tag/enterprise/)
- **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 |
| --- | --- | --- | --- | --- |
| `devin-icon` | `DevinIcon` | https://devicons.io/devicons/icons/devin-icon.svg | https://devicons.io/devicons/font/devin-icon.svg | `devicons devicons-devin-icon` |
| `devin` | `Devin` | https://devicons.io/devicons/icons/devin.svg | https://devicons.io/devicons/font/devin.svg | `devicons devicons-devin` |

## Install and use

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

### React

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

<DevinIcon size={32} alt="Devin logo" />
```

### Vue

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

<template>
  <DevinIcon :size="32" alt="Devin logo" />
</template>
```

### Svelte

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

<DevinIcon size={32} alt="Devin logo" />
```

### Raw SVG

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

### Icon font

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

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

## About the Devin logo

The Devin symbol is built from three rounded hexagons joined into a single, propeller-like shape. The full logo sets the symbol next to a clean sans-serif "Devin" wordmark. Both files come from the official brand assets page on devin.ai, which also hosts the Cognition logos.

The official logo is black on light backgrounds, with a white version for dark ones. Use the monochrome version, which follows the text color, in dark themes.

## When to use this logo

Use the Devin logo in AI coding agent comparisons, engineering tool stacks, integration pages for Slack, GitHub or Linear workflows, and docs that explain how to hand tickets to an autonomous agent. It pairs naturally with Claude Code, Codex, GitHub Copilot, Cursor and Windsurf.

## Related icons

- [Codex](/icons/codex.md)
- [goose](/icons/goose.md)
- [Junie](/icons/junie.md)
- [Kiro](/icons/kiro.md)
- [Make](/icons/make.md)
- [Manus](/icons/manus.md)
- [MetaGPT](/icons/metagpt.md)
- [Microsoft Foundry](/icons/microsoft-azure-ai.md)

## Browse the catalog
- Previous: [Devicescript](/icons/devicescript.md)
- Next: [Dgraph](/icons/dgraph.md)
- [All icons](/icons.md)