---
title: "Passport animated icon"
description: "Passport animated icon (Travel). The passport is stamped at the border. Light: the globe emblem swells as the stamp comes up to it, then slams back to size with a hit; impact ticks flash out on both sides of the cover and the booklet dips under the blow and springs back. Strong: a light tap first, then the full stamp: the emblem swells further and slams harder, the ticks fly out further, the booklet dips deeper and settles in two beats. The booklet stays rigid."
canonical: https://generativeicons.com/icons/passport/
---

# Passport animated icon

The passport is stamped at the border. Light: the globe emblem swells as the stamp comes up to it, then slams back to size with a hit; impact ticks flash out on both sides of the cover and the booklet dips under the blow and springs back. Strong: a light tap first, then the full stamp: the emblem swells further and slams harder, the ticks fly out further, the booklet dips deeper and settles in two beats. The booklet stays rigid.

- Id: `passport`
- Category: Travel
- Search terms: visa, border control, immigration, customs, travel document, travel id, citizenship, nationality, border crossing, abroad, international travel, passport stamp
- 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/passport.lottie (dotLottie, 5317 bytes, sha256 51eaada7f4380d63f0b791c4ab403558ca02748b15081a79fd7902daa98151f7)
- License: MIT

## Install

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

## React

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

export function PassportIcon() {
  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/passport.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/passport/ · https://generativeicons.com/api/icons/passport