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

# Microsoft Office

Microsoft Office is Microsoft's productivity suite of Word, Excel, PowerPoint, Outlook and more, now sold and branded as Microsoft 365.

## At a glance

- **Page**: https://devicons.io/icons/microsoft-office/
- **Website**: https://www.office.com/
- **License**: https://www.microsoft.com/en-us/legal/intellectualproperty/trademarks
- **Also known as**: Office, Office 365, MS Office, Microsoft 365
- **Tags**: [Microsoft](/icons/tag/microsoft/), [Productivity](/icons/tag/productivity/), [Enterprise](/icons/tag/enterprise/), [Collaboration](/icons/tag/collaboration/)
- **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-office` | `MicrosoftOffice` | https://devicons.io/devicons/icons/microsoft-office.svg | https://devicons.io/devicons/font/microsoft-office.svg | `devicons devicons-microsoft-office` |

## Install and use

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

### React

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

<MicrosoftOffice size={32} alt="Microsoft Office logo" />
```

### Vue

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

<template>
  <MicrosoftOffice :size="32" alt="Microsoft Office logo" />
</template>
```

### Svelte

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

<MicrosoftOffice size={32} alt="Microsoft Office logo" />
```

### Raw SVG

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

### Icon font

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

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

## About the Microsoft Office logo

This is the Microsoft Office logo from Microsoft's 2019 icon refresh. It is a folded, rounded "O", like an open door, in red and orange gradients that run from dark red (#A4070A) to bright red (#F32B44). Microsoft has since moved the suite to the Microsoft 365 name, but this logo is still the recognised mark for Office.

The logo reads well on light and dark backgrounds.

## When to use this logo

Use Microsoft Office in office suite comparisons, document workflow diagrams and legacy docs that still say Office or Office 365. For individual apps, pair it with Microsoft Word, Microsoft Excel, Microsoft PowerPoint and Microsoft Outlook, or compare it with Google Workspace.

## Related icons

- [Microsoft OneNote](/icons/microsoft-onenote.md)
- [Microsoft SharePoint](/icons/microsoft-sharepoint.md)
- [Microsoft Word](/icons/microsoft-word.md)
- [Microsoft](/icons/microsoft.md)
- [Microsoft Excel](/icons/microsoft-excel.md)
- [Microsoft Foundry](/icons/microsoft-azure-ai.md)
- [Microsoft Outlook](/icons/microsoft-outlook.md)
- [Microsoft PowerPoint](/icons/microsoft-powerpoint.md)

## Browse the catalog
- Previous: [Microsoft Foundry](/icons/microsoft-azure-ai.md)
- Next: [Microsoft OneDrive](/icons/microsoft-onedrive.md)
- [All icons](/icons.md)