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.
Lock Closed (lock-closed) — Heroicon
Official Lock Closed 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 “Lock Closed”
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 { LockClosedIcon } from '@heroicons/react/24/outline';
export default function Example() {
return <LockClosedIcon className="size-12" />;
}Search Keywords & Synonyms
Related & Alternative Heroicons
Icons in the same category or sharing semantic design tags with Lock Closed.
How to use “LockClosedIcon” 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.