Heroicons Explorer
Search 320+ Tailwind CSS Heroicons by Tailwind Labs. Preview Outline, Solid, Mini, and Micro styles, customize Tailwind classes (size-*, text-*), and copy React JSX, Vue, or clean SVG code.
H 1 (h-1) — Heroicon
Official H 1 vector icon from the Heroicons collection by Tailwind Labs. Available in 24x24 Outline, 24x24 Solid, 20x20 Mini, and 16x16 Micro variants. Copy ready-to-paste code for React, Vue 3, or clean inline SVG with modern Tailwind CSS utility classes.
24×24 stroke-based icon with 1.5px stroke width. Best for primary navigation and general UI.
Heroicons 4-Style Spectrum for “H 1”
Compare all four hand-crafted Heroicons variants side-by-side to choose the right density for your layout.
Framework Integration & Code Snippets
Copy production-ready component code for React, Vue 3, or pure inline SVG.
import { H1Icon } from '@heroicons/react/24/outline';
export default function Example() {
return <H1Icon className="size-12" />;
}Search Keywords & Synonyms
Related & Alternative Heroicons
Icons in the same category or sharing semantic design tags with H 1.
How to use “H1Icon” with Tailwind CSS
When pairing Heroicons with Tailwind CSS, use modern size-* classes instead of separate w-* and h-* classes. For example, use size-6 (1.5rem / 24px) for standard 24x24 icons and size-5 (1.25rem / 20px) for 20x20 mini icons.
All Heroicons inherit color via currentColor. To colorize this icon, simply add text color utilities like text-indigo-600, text-slate-500, or dynamic hover states like hover:text-emerald-500 to the component or inline SVG.