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

# Proton VPN

Proton VPN is a privacy-focused VPN from Swiss company Proton, with a free plan, open-source apps, a no-logs policy and Secure Core servers.

## At a glance

- **Page**: https://devicons.io/icons/proton-vpn/
- **Website**: https://protonvpn.com/
- **Brand guidelines**: https://proton.me/media/kit
- **Also known as**: ProtonVPN, Proton VPN Free
- **Tags**: [Privacy](/icons/tag/privacy/), [Security](/icons/tag/security/), [Vpn](/icons/tag/vpn/), [Networking](/icons/tag/networking/), [Open Source](/icons/tag/open-source/)
- **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-vpn-icon` | `ProtonVpnIcon` | https://devicons.io/devicons/icons/proton-vpn-icon.svg | https://devicons.io/devicons/font/proton-vpn-icon.svg | `devicons devicons-proton-vpn-icon` |
| `proton-vpn` | `ProtonVpn` | https://devicons.io/devicons/icons/proton-vpn.svg | https://devicons.io/devicons/font/proton-vpn.svg | `devicons devicons-proton-vpn` |

## Install and use

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

### React

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

<ProtonVpnIcon size={32} alt="Proton VPN logo" />
```

### Vue

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

<template>
  <ProtonVpnIcon :size="32" alt="Proton VPN logo" />
</template>
```

### Svelte

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

<ProtonVpnIcon size={32} alt="Proton VPN logo" />
```

### Raw SVG

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

### Icon font

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

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

## About the Proton VPN logo

The Proton VPN icon is a rounded, downward-pointing triangle filled with gradients from purple (#6D4AFF, #7341FF) to aqua (#00F0C3, #8EFFEE). It arrived with Proton's 2022 rebrand, which gave all of Proton's apps a shared purple identity. The lockup adds the wordmark with "Proton" in dark navy (#1B1340) and "VPN" 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 VPN in VPN comparisons, privacy tool stacks and network security guides. It pairs naturally with Proton Mail, WireGuard, Tailscale and Bitwarden.

## Related icons

- [Proton Mail](/icons/proton-mail.md)
- [Tor](/icons/tor.md)
- [GNUnet](/icons/gnu-net.md)
- [GnuPG](/icons/gnupg.md)
- [Firefox](/icons/firefox.md)
- [Bitwarden](/icons/bitwarden.md)
- [Brave](/icons/brave.md)
- [Cisco](/icons/cisco.md)

## Browse the catalog
- Previous: [Proton Mail](/icons/proton-mail.md)
- Next: [Protonet](/icons/protonet.md)
- [All icons](/icons.md)