What does the h1 icon represent?

The h1 icon visually signifies a top-level heading (Heading 1), indicating the most important title or subject.

How do I use the h1 icon in React?

You can import and use it in React with: import { H1Icon } from '@heroicons/react/24/outline'

Heroicons are released under the MIT license, allowing for free use in both personal and commercial projects.

Heroicons · h1 · MIT

The Heroicons h 1 icon depicts a large heading level 1, commonly used to represent the main title or primary subject of a page or section.

Install

npm i @heroicons/react

Import & render

import { H1Icon } from '@heroicons/react/24/outline';

<H1Icon className="size-6" />

Heroicons ships this icon in 4 styles — each its own import:

24/outline

<H1Icon className="size-6" />

24/solid

<H1Icon className="size-6" />

20/solid

<H1Icon className="size-6" />

16/solid

<H1Icon className="size-6" />

What does the h1 icon represent?: The h1 icon visually signifies a top-level heading (Heading 1), indicating the most important title or subject.
How do I use the h1 icon in React?: You can import and use it in React with: import { H1Icon } from '@heroicons/react/24/outline'
What is the license for Heroicons?: Heroicons are released under the MIT license, allowing for free use in both personal and commercial projects.

The same idea in other libraries, and near matches in Heroicons.

The search behind these pages runs as a Claude Code skill. What skills are and how I ship them →