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

# Microsoft Copilot

Microsoft Copilot is Microsoft's AI assistant for chat, search and writing on the web, Windows, Edge and mobile, and inside Microsoft 365 apps as Microsoft 365 Copilot.

## At a glance

- **Page**: https://devicons.io/icons/microsoft-copilot/
- **Website**: https://copilot.microsoft.com/
- **License**: https://www.microsoft.com/en-us/legal/intellectualproperty/trademarks
- **Also known as**: Copilot, Bing Chat, Microsoft 365 Copilot, Copilot for Windows, Bing Copilot
- **Tags**: [AI](/icons/tag/ai/), [Microsoft](/icons/tag/microsoft/), [Chatbot](/icons/tag/chatbot/), [Assistant](/icons/tag/assistant/), [LLM](/icons/tag/llm/)
- **Version added**: 1.3.0

## 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 |
| --- | --- | --- | --- | --- |
| `microsoft-copilot` | `MicrosoftCopilot` | https://devicons.io/devicons/icons/microsoft-copilot.svg | https://devicons.io/devicons/font/microsoft-copilot.svg | `devicons devicons-microsoft-copilot` |

## Install and use

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

### React

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

<MicrosoftCopilot size={32} alt="Microsoft Copilot logo" />
```

### Vue

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

<template>
  <MicrosoftCopilot :size="32" alt="Microsoft Copilot logo" />
</template>
```

### Svelte

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

<MicrosoftCopilot size={32} alt="Microsoft Copilot logo" />
```

### Raw SVG

```html
<img src="https://devicons.io/devicons/icons/microsoft-copilot.svg" alt="Microsoft Copilot logo" width="48" height="48" />
```

### Icon font

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

```html
<i class="devicons devicons-microsoft-copilot"></i>
```

## About the Microsoft Copilot logo

The Copilot logo is two interlocking, rounded ribbon shapes in a multicolour gradient. It runs from blue (#00AEFF) through green and yellow to orange (#FF5F3D) and pink. Bing Chat became Copilot in late 2023, and the colourful ribbon now marks Copilot in Windows, Edge, Microsoft 365 and the standalone app.

The gradient reads well on light and dark backgrounds.

## When to use this logo

Use Microsoft Copilot in AI assistant comparisons, enterprise AI rollout plans, Windows and Microsoft 365 productivity guides and model picker designs. It pairs naturally with ChatGPT, Google Gemini, Claude, GitHub Copilot and Microsoft Office.

## Related icons

- [Microsoft Foundry](/icons/microsoft-azure-ai.md)
- [Claude](/icons/claude.md)
- [Grok](/icons/grok.md)
- [Doubao](/icons/doubao.md)
- [ERNIE](/icons/wenxin.md)
- [Google Bard](/icons/google-bard.md)
- [Microsoft](/icons/microsoft.md)
- [Microsoft Access](/icons/microsoft-access.md)

## Browse the catalog
- Previous: [Microsoft Azure](/icons/microsoft-azure.md)
- Next: [Microsoft Edge](/icons/microsoft-edge.md)
- [All icons](/icons.md)