The Heroicons h 2 icon depicts the text "h2", commonly used to represent a level 2 heading in content.
Common uses
- Heading level indicator
- Content structure element
- Text formatting option
Use it in React
Install
npm i @heroicons/reactImport & render
import { H2Icon } from '@heroicons/react/24/outline';
<H2Icon className="size-6" />Styles
Heroicons ships this icon in 4 styles — each its own import:
24/outline
<H2Icon className="size-6" />24/solid
<H2Icon className="size-6" />20/solid
<H2Icon className="size-6" />16/solid
<H2Icon className="size-6" />Details
- Library
- Heroicons (324 icons)
- License
- MIT
- viewBox
0 0 24 24- Keywords
- h2heading 2subheadingtext h2title 2
FAQ
- What is the h2 icon for?
- It visually represents a level 2 heading, often used for subheadings in structured content.
- How do I use the h2 icon in React?
- You can import it using: import { H2Icon } from '@heroicons/react/24/outline'
- What is the license for Heroicons?
- Heroicons are distributed under the MIT license, allowing for free use.
Related icons
The same idea in other libraries, and near matches in Heroicons.
Looking for something else? Search Heroicons and 4 more libraries by description →
The search behind these pages runs as a Claude Code skill. What skills are and how I ship them →