[Home](/index.md) › [Icons](/icons.md) › Proton Mail

# Proton Mail

Proton Mail is an end-to-end encrypted email service from Swiss company Proton, with apps for web, desktop and mobile and Proton Mail Bridge for desktop email clients.

## At a glance

- **Page**: https://devicons.io/icons/proton-mail/
- **Website**: https://proton.me/mail
- **Brand guidelines**: https://proton.me/media/kit
- **Also known as**: ProtonMail, Proton Mail Bridge, proton.me
- **Tags**: [Email](/icons/tag/email/), [Privacy](/icons/tag/privacy/), [Encryption](/icons/tag/encryption/), [Security](/icons/tag/security/)
- **Version added**: 1.3.0
- **Contrast**: needs a light backdrop on dark backgrounds

## 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 |
| --- | --- | --- | --- | --- |
| `proton-mail-icon` | `ProtonMailIcon` | https://devicons.io/devicons/icons/proton-mail-icon.svg | https://devicons.io/devicons/font/proton-mail-icon.svg | `devicons devicons-proton-mail-icon` |
| `proton-mail` | `ProtonMail` | https://devicons.io/devicons/icons/proton-mail.svg | https://devicons.io/devicons/font/proton-mail.svg | `devicons devicons-proton-mail` |

## Install and use

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

### React

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

<ProtonMailIcon size={32} alt="Proton Mail logo" />
```

### Vue

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

<template>
  <ProtonMailIcon :size="32" alt="Proton Mail logo" />
</template>
```

### Svelte

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

<ProtonMailIcon size={32} alt="Proton Mail logo" />
```

### Raw SVG

```html
<img src="https://devicons.io/devicons/icons/proton-mail-icon.svg" alt="Proton Mail logo" width="48" height="48" />
```

### Icon font

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

```html
<i class="devicons devicons-proton-mail-icon"></i>
```

## About the Proton Mail logo

The Proton Mail icon is an envelope drawn as a stylised "M", filled with purple gradients from lavender (#E3D9FF) to Proton purple (#6D4AFF). Proton introduced it in its 2022 rebrand, when ProtonMail became Proton Mail and all of Proton's apps got a shared purple identity. The lockup adds the wordmark with "Proton" in dark navy (#1B1340) and "Mail" in purple.

The icon reads well on light and dark backgrounds. The navy "Proton" disappears on dark surfaces, so use the monochrome lockup there.

## When to use this logo

Use Proton Mail in privacy-focused email comparisons, secure communication stacks, contact links and docs for SMTP or Proton Mail Bridge setup. It pairs naturally with Proton VPN, Gmail, Signal and Bitwarden.

## Related icons

- [Proton VPN](/icons/proton-vpn.md)
- [GnuPG](/icons/gnupg.md)
- [Bitwarden](/icons/bitwarden.md)
- [Certbot](/icons/certbot.md)
- [Dashlane](/icons/dashlane.md)
- [Hcaptcha](/icons/hcaptcha.md)
- [Let's Encrypt](/icons/letsencrypt.md)
- [Signal](/icons/signal.md)

## Browse the catalog
- Previous: [Proto.io](/icons/protoio.md)
- Next: [Proton VPN](/icons/proton-vpn.md)
- [All icons](/icons.md)