---
title: "Model card animated icon"
description: "Model card animated icon (Models & providers). Inspect a model specification. Light: the model emblem on the card turns a quarter (a gem turned to show its other face) and lands with a click, and the specification lines are written out beneath it in order. Strong: the emblem winds back, turns a half with a pop, knocks and settles, and the lines write out with a longer stagger. The card never moves. A 90 or 180 degree turn of the four-fold emblem ends on its own outline; an invisible step returns the angle to 0 so the end matches the rest pixel for pixel."
canonical: https://generativeicons.com/icons/model-card/
---

# Model card animated icon

Inspect a model specification. Light: the model emblem on the card turns a quarter (a gem turned to show its other face) and lands with a click, and the specification lines are written out beneath it in order. Strong: the emblem winds back, turns a half with a pop, knocks and settles, and the lines write out with a longer stagger. The card never moves. A 90 or 180 degree turn of the four-fold emblem ends on its own outline; an invisible step returns the angle to 0 so the end matches the rest pixel for pixel.

- Id: `model-card`
- Category: Models & providers
- Search terms: model info, model details, model specs, spec sheet, specifications, datasheet, model profile, about model, model overview, capabilities, model documentation, llm specs
- 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/model-card.lottie (dotLottie, 3906 bytes, sha256 6d224da11ec37c2ba9b197c669e6d158df8901b3421d6e946e7eebc20392964d)
- License: MIT

## Install

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

## React

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

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