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

# Microsoft PowerToys

Microsoft PowerToys is a free, open-source set of Windows utilities including FancyZones, Command Palette, Color Picker, PowerRename and Text Extractor.

## At a glance

- **Page**: https://devicons.io/icons/microsoft-powertoys/
- **Website**: https://learn.microsoft.com/windows/powertoys/
- **License**: https://www.microsoft.com/en-us/legal/intellectualproperty/trademarks
- **Also known as**: PowerToys, Windows PowerToys, PowerToys Run
- **Tags**: [Microsoft](/icons/tag/microsoft/), [Windows](/icons/tag/windows/), [Productivity](/icons/tag/productivity/), [Open Source](/icons/tag/open-source/), [Utilities](/icons/tag/utilities/)
- **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-powertoys` | `MicrosoftPowertoys` | https://devicons.io/devicons/icons/microsoft-powertoys.svg | https://devicons.io/devicons/font/microsoft-powertoys.svg | `devicons devicons-microsoft-powertoys` |

## Install and use

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

### React

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

<MicrosoftPowertoys size={32} alt="Microsoft PowerToys logo" />
```

### Vue

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

<template>
  <MicrosoftPowertoys :size="32" alt="Microsoft PowerToys logo" />
</template>
```

### Svelte

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

<MicrosoftPowertoys size={32} alt="Microsoft PowerToys logo" />
```

### Raw SVG

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

### Icon font

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

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

## About the Microsoft PowerToys logo

The PowerToys icon looks like a retro control panel. A beige frame (#D7CCB3 to #F2E6CA) surrounds a grey screen (#666) showing four vertical colour bars in orange-red (#D83B01), yellow (#FFB900), green (#56B60E) and blue (#0078D4), the colours of the Microsoft logo. Three beige buttons sit below the screen.

The icon reads well on light and dark backgrounds.

## When to use this logo

Use Microsoft PowerToys in Windows productivity setups, developer workstation guides and dotfiles or setup script READMEs. It pairs naturally with Windows Terminal, PowerShell, Visual Studio Code and Microsoft Windows.

## Related icons

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

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