The 24px outline icon set provides 325 beautifully crafted outline-style icons optimized for 24-pixel rendering. These icons feature stroke-based designs with consistent 1.5px stroke width and are perfect for primary interfaces, navigation, and general UI elements.
import {
AcademicCapIcon,
ArrowDownIcon,
HeartIcon
} from "@heroicons/react/24/outline";// CommonJS
const { AcademicCapIcon, ArrowDownIcon } = require("@heroicons/react/24/outline");All 325 outline icons follow the same component interface with consistent styling and behavior.
/**
* Each outline icon component with forward ref support
* Renders as an SVG with outline styling (stroke-based, no fill)
*/
type OutlineIconComponent = React.ForwardRefExoticComponent<
React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & {
/** Optional accessible title for the icon */
title?: string;
/** Optional ID for the title element */
titleId?: string;
} & React.RefAttributes<SVGSVGElement>
>;
// Default SVG attributes for all outline icons
interface OutlineIconAttributes {
xmlns: "http://www.w3.org/2000/svg";
fill: "none";
viewBox: "0 0 24 24";
strokeWidth: 1.5;
stroke: "currentColor";
'aria-hidden': "true";
'data-slot': "icon";
}Usage Examples:
import { HeartIcon, UserCircleIcon, BellIcon } from "@heroicons/react/24/outline";
// Basic usage
<HeartIcon className="h-6 w-6 text-red-500" />
// With accessibility features
<BellIcon
className="h-6 w-6 text-gray-700"
title="Notifications"
titleId="bell-notifications"
aria-label="View notifications"
/>
// With event handlers
<UserCircleIcon
className="h-8 w-8 text-blue-600 cursor-pointer hover:text-blue-800"
onClick={(e) => handleProfileClick(e)}
/>All 325 available outline icons (alphabetically ordered):
// Recommended sizing classes (Tailwind CSS)
<HeartIcon className="h-4 w-4" /> // 16px (small)
<HeartIcon className="h-5 w-5" /> // 20px (default for 24px icons)
<HeartIcon className="h-6 w-6" /> // 24px (native size)
<HeartIcon className="h-8 w-8" /> // 32px (large)
// Color customization
<HeartIcon className="h-6 w-6 text-red-500" />
<HeartIcon className="h-6 w-6 text-current" />
<HeartIcon className="h-6 w-6" style={{ color: '#ef4444' }} />
// Hover and interactive states
<HeartIcon className="h-6 w-6 text-gray-400 hover:text-red-500 cursor-pointer" />