---
title: "Heading animated icon"
description: "Heading animated icon (Text & document editing). The block becomes a level-1 heading: the H grows to heading size and the level is written beside it. Light: the H swells up from its baseline to 1.16x, stops dead, dips back a touch under and settles, and a beat later the 1 writes itself in, flag first, then down its stem to the baseline. Strong: the H gathers first (a small dip), swells to 1.2x with a rebound and a second smaller swell; the 1 writes itself in and pops as its stem lands."
canonical: https://generativeicons.com/icons/heading/
---

# Heading animated icon

The block becomes a level-1 heading: the H grows to heading size and the level is written beside it. Light: the H swells up from its baseline to 1.16x, stops dead, dips back a touch under and settles, and a beat later the 1 writes itself in, flag first, then down its stem to the baseline. Strong: the H gathers first (a small dip), swells to 1.2x with a rebound and a second smaller swell; the 1 writes itself in and pops as its stem lands.

- Id: `heading`
- Category: Text & document editing
- Search terms: title, header, h1, h2, headline, heading 1, section title, heading level, big text
- 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/heading.lottie (dotLottie, 3237 bytes, sha256 69b0e703a8630c9c1678488525085ceeb567699696db430e9e7b88e5b3d14bec)
- License: MIT

## Install

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

## React

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

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