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

# Microsoft OneNote

Microsoft OneNote is the Microsoft 365 digital notebook for typed and handwritten notes, organised into sections and pages and synced across devices.

## At a glance

- **Page**: https://devicons.io/icons/microsoft-onenote/
- **Website**: https://www.microsoft.com/en-us/microsoft-365/onenote/digital-note-taking-app
- **License**: https://www.microsoft.com/en-us/legal/intellectualproperty/trademarks
- **Also known as**: OneNote, MS OneNote, OneNote for Windows, OneNote for the web
- **Tags**: [Microsoft](/icons/tag/microsoft/), [Notes](/icons/tag/notes/), [Productivity](/icons/tag/productivity/), [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-onenote` | `MicrosoftOnenote` | https://devicons.io/devicons/icons/microsoft-onenote.svg | https://devicons.io/devicons/font/microsoft-onenote.svg | `devicons devicons-microsoft-onenote` |

## Install and use

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

### React

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

<MicrosoftOnenote size={32} alt="Microsoft OneNote logo" />
```

### Vue

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

<template>
  <MicrosoftOnenote :size="32" alt="Microsoft OneNote logo" />
</template>
```

### Svelte

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

<MicrosoftOnenote size={32} alt="Microsoft OneNote logo" />
```

### Raw SVG

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

### Icon font

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

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

## About the Microsoft OneNote logo

The OneNote icon is a stack of rounded panels in pink and purple gradients, from light pink (#FCB1FF) and orchid (#DE67FD) to deep purple (#580087). A smaller purple tile in front carries a white "N". It follows the layered Fluent style of Microsoft's current Microsoft 365 app icons, shared with Word, Excel, PowerPoint and Outlook.

The icon reads well on light and dark backgrounds.

## When to use this logo

Use Microsoft OneNote in note-taking app comparisons, Microsoft 365 suite diagrams, knowledge management stacks and docs for the OneNote API in Microsoft Graph. It pairs naturally with Microsoft Word, Microsoft Outlook, Microsoft Teams, Notion and Obsidian.

## Related icons

- [Microsoft Office](/icons/microsoft-office.md)
- [Microsoft Word](/icons/microsoft-word.md)
- [Microsoft Excel](/icons/microsoft-excel.md)
- [Microsoft Outlook](/icons/microsoft-outlook.md)
- [Microsoft PowerPoint](/icons/microsoft-powerpoint.md)
- [Microsoft PowerToys](/icons/microsoft-powertoys.md)
- [Microsoft SharePoint](/icons/microsoft-sharepoint.md)
- [Microsoft Teams](/icons/microsoft-teams.md)

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