---
title: "VPN animated icon"
description: "VPN animated icon (Account & privacy). The VPN connects: the padlock clicks shut and the globe's traffic turns through it. Light: the shackle snaps open on its right leg and slams back shut with a hit, the padlock jolts, and a beat later the globe turns one meridian spacing, coasts a little past and settles. Strong: the shackle swings wider, slams and bounces once, the padlock jolts harder, and the globe spins two spacings, picking up speed through the first and settling after the second. The sphere outline and the equator never move."
canonical: https://generativeicons.com/icons/vpn/
---

# VPN animated icon

The VPN connects: the padlock clicks shut and the globe's traffic turns through it. Light: the shackle snaps open on its right leg and slams back shut with a hit, the padlock jolts, and a beat later the globe turns one meridian spacing, coasts a little past and settles. Strong: the shackle swings wider, slams and bounces once, the padlock jolts harder, and the globe spins two spacings, picking up speed through the first and settling after the second. The sphere outline and the equator never move.

- Id: `vpn`
- Category: Account & privacy
- Search terms: virtual private network, secure connection, encrypted connection, private network, proxy, tunnel, hide ip, mask ip, secure browsing, protected network
- One action, back to rest
- Styles: outline, solid, duotone; outline weights 1.5, 2, 2.5 (any from 1 to 3); motion light or strong
- File: https://generativeicons.com/assets/vpn.lottie (dotLottie, 4542 bytes, sha256 0a5bc8526113777de337e93e230a28501e73d98ea52e7bcbef73106bf9edb994)
- License: MIT

## Install

```sh
npm install @lottiefiles/generative-icons-runtime
npx generative-icons init
npx generative-icons add vpn
```

## React

```tsx
// npm install @lottiefiles/generative-icons-react
'use client';
import { AnimatedIcon } from '@lottiefiles/generative-icons-react';
import icon, { src } from './generative-icons/vpn.mjs';

export function VpnIcon() {
  return <AnimatedIcon icon={icon} src={src} size={32}
    color="#ffffff" variant="outline" weight={2}
    motion="light" theme="dark" />;
}
```

## JavaScript

```js
import { createIcon } from '@lottiefiles/generative-icons-runtime';
import icon, { src } from './generative-icons/vpn.mjs';

const handle = await createIcon(canvas, {
  icon, src,
  color: '#ffffff', style: 'outline', weight: 2,
  motion: 'light', theme: 'dark'
});
button.addEventListener('click', () => handle.play());
// On removal: handle.destroy();
```

More: https://generativeicons.com/icons/vpn/ · https://generativeicons.com/api/icons/vpn