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

# Microsoft Outlook

Microsoft Outlook is the Microsoft 365 email and calendar app for Windows, macOS, the web and mobile, used with Exchange Online and Outlook.com accounts.

## At a glance

- **Page**: https://devicons.io/icons/microsoft-outlook/
- **Website**: https://www.microsoft.com/microsoft-365/outlook/email-and-calendar-software-application
- **License**: https://www.microsoft.com/en-us/legal/intellectualproperty/trademarks
- **Also known as**: Outlook, Outlook.com, Hotmail, new Outlook, MS Outlook
- **Tags**: [Microsoft](/icons/tag/microsoft/), [Email](/icons/tag/email/), [Calendar](/icons/tag/calendar/), [Productivity](/icons/tag/productivity/)
- **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-outlook` | `MicrosoftOutlook` | https://devicons.io/devicons/icons/microsoft-outlook.svg | https://devicons.io/devicons/font/microsoft-outlook.svg | `devicons devicons-microsoft-outlook` |

## Install and use

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

### React

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

<MicrosoftOutlook size={32} alt="Microsoft Outlook logo" />
```

### Vue

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

<template>
  <MicrosoftOutlook :size="32" alt="Microsoft Outlook logo" />
</template>
```

### Svelte

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

<MicrosoftOutlook size={32} alt="Microsoft Outlook logo" />
```

### Raw SVG

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

### Icon font

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

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

## About the Microsoft Outlook logo

The Outlook icon is an open envelope built from layered blue panels, from sky blue (#3BD5FF) to deep blue (#165AD9), with lavender highlights (#C4B0FF). A blue tile in front carries a white "O". It uses the same layered Fluent layout as Microsoft's other Microsoft 365 app icons.

The icon reads well on light and dark backgrounds.

## When to use this logo

Use Microsoft Outlook in email client comparisons, calendar and scheduling integrations, "add to Outlook" buttons and docs for the Microsoft Graph mail and calendar APIs. It pairs naturally with Gmail, Microsoft Teams, Google Calendar and Thunderbird.

## Related icons

- [Microsoft Excel](/icons/microsoft-excel.md)
- [Microsoft Office](/icons/microsoft-office.md)
- [Microsoft OneNote](/icons/microsoft-onenote.md)
- [Microsoft PowerPoint](/icons/microsoft-powerpoint.md)
- [Microsoft PowerToys](/icons/microsoft-powertoys.md)
- [Microsoft Word](/icons/microsoft-word.md)
- [Microsoft](/icons/microsoft.md)
- [Microsoft Access](/icons/microsoft-access.md)

## Browse the catalog
- Previous: [Microsoft OneNote](/icons/microsoft-onenote.md)
- Next: [Microsoft PowerPoint](/icons/microsoft-powerpoint.md)
- [All icons](/icons.md)