---
title: "ID card animated icon"
description: "ID card animated icon (Account & privacy). The card is read and the holder's details fill in. Light: the photo pops as the identity is captured, then the first detail line writes out to full length and the second follows a beat later; the details stay. Strong: the card taps down onto a reader and springs back, the photo pops harder, and the two lines write out in turn, each stopping crisply at full length. The preview reset fades the details back to their stubs."
canonical: https://generativeicons.com/icons/id-card/
---

# ID card animated icon

The card is read and the holder's details fill in. Light: the photo pops as the identity is captured, then the first detail line writes out to full length and the second follows a beat later; the details stay. Strong: the card taps down onto a reader and springs back, the photo pops harder, and the two lines write out in turn, each stopping crisply at full length. The preview reset fades the details back to their stubs.

- Id: `id-card`
- Category: Account & privacy
- Search terms: identity card, identification, photo id, id badge, driver license, drivers licence, national id, employee badge, membership card, kyc, verify identity
- Two states: prepared to result, played forward and back
- 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/id-card.lottie (dotLottie, 6232 bytes, sha256 6073d3cf82d30879ae4e254f18233063eb46164358e4511f6afc40d3a06c745c)
- License: MIT

## Install

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

## React

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

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