24px Outline Icons

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 Patterns

import { 
  AcademicCapIcon,
  ArrowDownIcon,
  HeartIcon 
} from "@heroicons/react/24/outline";

// CommonJS
const { AcademicCapIcon, ArrowDownIcon } = require("@heroicons/react/24/outline");

Capabilities

Icon Components

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)}
/>

Complete Icon Reference

All 325 available outline icons (alphabetically ordered):

A

• AcademicCapIcon
• AdjustmentsHorizontalIcon
• AdjustmentsVerticalIcon
• ArchiveBoxArrowDownIcon
• ArchiveBoxIcon
• ArchiveBoxXMarkIcon
• ArrowDownCircleIcon
• ArrowDownIcon
• ArrowDownLeftIcon
• ArrowDownOnSquareIcon
• ArrowDownOnSquareStackIcon
• ArrowDownRightIcon
• ArrowDownTrayIcon
• ArrowLeftCircleIcon
• ArrowLeftEndOnRectangleIcon
• ArrowLeftIcon
• ArrowLeftOnRectangleIcon
• ArrowLeftStartOnRectangleIcon
• ArrowLongDownIcon
• ArrowLongLeftIcon
• ArrowLongRightIcon
• ArrowLongUpIcon
• ArrowPathIcon
• ArrowPathRoundedSquareIcon
• ArrowRightCircleIcon
• ArrowRightEndOnRectangleIcon
• ArrowRightIcon
• ArrowRightOnRectangleIcon
• ArrowRightStartOnRectangleIcon
• ArrowSmallDownIcon
• ArrowSmallLeftIcon
• ArrowSmallRightIcon
• ArrowSmallUpIcon
• ArrowTopRightOnSquareIcon
• ArrowTrendingDownIcon
• ArrowTrendingUpIcon
• ArrowTurnDownLeftIcon
• ArrowTurnDownRightIcon
• ArrowTurnLeftDownIcon
• ArrowTurnLeftUpIcon
• ArrowTurnRightDownIcon
• ArrowTurnRightUpIcon
• ArrowTurnUpLeftIcon
• ArrowTurnUpRightIcon
• ArrowUpCircleIcon
• ArrowUpIcon
• ArrowUpLeftIcon
• ArrowUpOnSquareIcon
• ArrowUpOnSquareStackIcon
• ArrowUpRightIcon
• ArrowUpTrayIcon
• ArrowUturnDownIcon
• ArrowUturnLeftIcon
• ArrowUturnRightIcon
• ArrowUturnUpIcon
• AtSymbolIcon

B

• BackspaceIcon
• BackwardIcon
• BanknotesIcon
• Bars2Icon
• Bars3BottomLeftIcon
• Bars3BottomRightIcon
• Bars3CenterLeftIcon
• Bars3Icon
• Bars4Icon
• BarsArrowDownIcon
• BarsArrowUpIcon
• Battery0Icon
• Battery100Icon
• Battery50Icon
• BeakerIcon
• BellAlertIcon
• BellIcon
• BellSlashIcon
• BellSnoozeIcon
• BoltIcon
• BoltSlashIcon
• BookOpenIcon
• BookmarkIcon
• BookmarkSlashIcon
• BookmarkSquareIcon
• BriefcaseIcon
• BugAntIcon
• BuildingLibraryIcon
• BuildingOffice2Icon
• BuildingOfficeIcon
• BuildingStorefrontIcon

C

• CakeIcon
• CalculatorIcon
• CalendarDaysIcon
• CalendarIcon
• CameraIcon
• ChartBarIcon
• ChartBarSquareIcon
• ChartPieIcon
• ChatBubbleBottomCenterIcon
• ChatBubbleBottomCenterTextIcon
• ChatBubbleLeftEllipsisIcon
• ChatBubbleLeftIcon
• ChatBubbleLeftRightIcon
• ChatBubbleOvalLeftEllipsisIcon
• ChatBubbleOvalLeftIcon
• CheckBadgeIcon
• CheckCircleIcon
• CheckIcon
• ChevronDoubleDownIcon
• ChevronDoubleLeftIcon
• ChevronDoubleRightIcon
• ChevronDoubleUpIcon
• ChevronDownIcon
• ChevronLeftIcon
• ChevronRightIcon
• ChevronUpDownIcon
• ChevronUpIcon
• CircleStackIcon
• ClipboardDocumentCheckIcon
• ClipboardDocumentIcon
• ClipboardDocumentListIcon
• ClipboardIcon
• ClockIcon
• CloudArrowDownIcon
• CloudArrowUpIcon
• CloudIcon
• CodeBracketIcon
• CodeBracketSquareIcon
• Cog6ToothIcon
• Cog8ToothIcon
• CogIcon
• CommandLineIcon
• ComputerDesktopIcon
• CpuChipIcon
• CreditCardIcon
• CubeIcon
• CubeTransparentIcon
• CurrencyBangladeshiIcon
• CurrencyDollarIcon
• CurrencyEuroIcon
• CurrencyPoundIcon
• CurrencyRupeeIcon
• CurrencyYenIcon
• CursorArrowRaysIcon
• CursorArrowRippleIcon

D

• DevicePhoneMobileIcon
• DeviceTabletIcon
• DocumentArrowDownIcon
• DocumentArrowUpIcon
• DocumentChartBarIcon
• DocumentCheckIcon
• DocumentDuplicateIcon
• DocumentIcon
• DocumentMagnifyingGlassIcon
• DocumentMinusIcon
• DocumentPlusIcon
• DocumentTextIcon

E

• EllipsisHorizontalCircleIcon
• EllipsisHorizontalIcon
• EllipsisVerticalIcon
• EnvelopeIcon
• EnvelopeOpenIcon
• ExclamationCircleIcon
• ExclamationTriangleIcon
• EyeDropperIcon
• EyeIcon
• EyeSlashIcon

F

• FaceFrownIcon
• FaceSmileIcon
• FilmIcon
• FingerPrintIcon
• FireIcon
• FlagIcon
• FolderArrowDownIcon
• FolderIcon
• FolderMinusIcon
• FolderOpenIcon
• FolderPlusIcon
• ForwardIcon
• FunnelIcon

G

• GifIcon
• GiftIcon
• GiftTopIcon
• GlobeAltIcon
• GlobeAmericasIcon
• GlobeAsiaAustraliaIcon
• GlobeEuropeAfricaIcon

H

• HandRaisedIcon
• HandThumbDownIcon
• HandThumbUpIcon
• HashtagIcon
• HeartIcon
• HomeIcon
• HomeModernIcon

I

• IdentificationIcon
• InboxArrowDownIcon
• InboxIcon
• InboxStackIcon
• InformationCircleIcon

K-L

• KeyIcon
• LanguageIcon
• LifebuoyIcon
• LightBulbIcon
• LinkIcon
• ListBulletIcon
• LockClosedIcon
• LockOpenIcon

M

• MagnifyingGlassCircleIcon
• MagnifyingGlassIcon
• MagnifyingGlassMinusIcon
• MagnifyingGlassPlusIcon
• MapIcon
• MapPinIcon
• MegaphoneIcon
• MicrophoneIcon
• MinusCircleIcon
• MinusIcon
• MinusSmallIcon
• MoonIcon
• MusicalNoteIcon

N-P

• NewspaperIcon
• NoSymbolIcon
• PaintBrushIcon
• PaperAirplaneIcon
• PaperClipIcon
• PauseCircleIcon
• PauseIcon
• PencilIcon
• PencilSquareIcon
• PhoneArrowDownLeftIcon
• PhoneArrowUpRightIcon
• PhoneIcon
• PhoneXMarkIcon
• PhotoIcon
• PlayCircleIcon
• PlayIcon
• PlayPauseIcon
• PlusCircleIcon
• PlusIcon
• PlusSmallIcon
• PowerIcon
• PresentationChartBarIcon
• PresentationChartLineIcon
• PrinterIcon
• PuzzlePieceIcon

Q-S

• QrCodeIcon
• QuestionMarkCircleIcon
• QueueListIcon
• RadioIcon
• ReceiptPercentIcon
• ReceiptRefundIcon
• RectangleGroupIcon
• RectangleStackIcon
• RocketLaunchIcon
• RssIcon
• ScaleIcon
• ScissorsIcon
• ServerIcon
• ServerStackIcon
• ShareIcon
• ShieldCheckIcon
• ShieldExclamationIcon
• ShoppingBagIcon
• ShoppingCartIcon
• SignalIcon
• SignalSlashIcon
• SparklesIcon
• SpeakerWaveIcon
• SpeakerXMarkIcon
• Square2StackIcon
• Square3Stack3DIcon
• SquaresPlusIcon
• StarIcon
• StopCircleIcon
• StopIcon
• SunIcon
• SwatchIcon

T-V

• TableCellsIcon
• TagIcon
• TicketIcon
• TrashIcon
• TrophyIcon
• TruckIcon
• TvIcon
• UserCircleIcon
• UserGroupIcon
• UserIcon
• UserMinusIcon
• UserPlusIcon
• UsersIcon
• VariableIcon
• VideoCameraIcon
• VideoCameraSlashIcon
• ViewColumnsIcon
• ViewfinderCircleIcon

W-Z

• WalletIcon
• WifiIcon
• WindowIcon
• WrenchIcon
• WrenchScrewdriverIcon
• XCircleIcon
• XMarkIcon

Styling Best Practices

// 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" />