or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

16px-solid.md20px-solid.md24px-outline.md24px-solid.mdindex.md
tile.json

tessl/npm-heroicons--react

Beautiful hand-crafted SVG icons as React components, providing outline and solid icon variants in multiple sizes for modern React applications.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@heroicons/react@2.2.x

To install, run

npx @tessl/cli install tessl/npm-heroicons--react@2.2.0

index.mddocs/

Heroicons React

Heroicons React is a comprehensive React component library providing beautiful hand-crafted SVG icons created by the makers of Tailwind CSS. It offers 325 unique icons in both outline and solid variants for 24px and 20px sizes, plus 317 icons at 16px size, with each icon exported as an individual React component using TypeScript for full type safety.

Package Information

  • Package Name: @heroicons/react
  • Package Type: npm
  • Language: TypeScript
  • Installation: 
    npm install @heroicons/react
  • Peer Dependencies: React >= 16 || ^19.0.0-rc

Core Imports

Heroicons React uses size-specific import paths only. Direct imports from the root package are intentionally blocked to encourage optimal bundle sizes.

// 24px outline icons (most common)
import { AcademicCapIcon, ArrowDownIcon } from "@heroicons/react/24/outline";

// 24px solid icons  
import { AcademicCapIcon, ArrowDownIcon } from "@heroicons/react/24/solid";

// 20px solid icons (compact interfaces)
import { AcademicCapIcon, ArrowDownIcon } from "@heroicons/react/20/solid";

// 16px solid icons (smallest size, limited set)
import { AcademicCapIcon, ArrowDownIcon } from "@heroicons/react/16/solid";

For CommonJS:

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

Basic Usage

import React from 'react';
import { HeartIcon, UserIcon } from '@heroicons/react/24/outline';
import { CheckCircleIcon } from '@heroicons/react/24/solid';

function MyComponent() {
  return (
    <div>
      {/* Basic usage with default styling */}
      <HeartIcon className="h-6 w-6 text-red-500" />
      
      {/* Icons accept all standard SVG props */}
      <UserIcon 
        className="h-8 w-8 text-blue-600" 
        onClick={() => console.log('clicked')}
        aria-label="User profile"
      />
      
      {/* With custom title for accessibility */}
      <CheckCircleIcon 
        className="h-5 w-5 text-green-500"
        title="Task completed"
        titleId="task-completed-icon"
      />
    </div>
  );
}

Architecture

Heroicons React is built around several key design principles:

  • Size-Specific Organization: Icons are organized by pixel size (16px, 20px, 24px) to provide optimal rendering at different scales
  • Style Variants: 24px icons offer both outline and solid variants, while smaller sizes focus on solid variants for better clarity
  • Individual Components: Each icon is exported as a separate React component for maximum tree-shaking efficiency
  • Forward Refs: All components use React.forwardRef for ref forwarding to the underlying SVG element
  • TypeScript Integration: Full TypeScript definitions with proper prop types and ref handling
  • Accessibility First: Built-in ARIA attributes with optional title support for enhanced accessibility

Icon Naming Convention

All icon names follow the pattern: 

{IconName}Icon
using UpperCamelCase:

  • SVG file: 
    academic-cap.svg
    → React component: 
    AcademicCapIcon
  • SVG file: 
    arrow-down-tray.svg
    → React component: 
    ArrowDownTrayIcon
  • SVG file: 
    chat-bubble-left-right.svg
    → React component: 
    ChatBubbleLeftRightIcon

Capabilities

24px Outline Icons

The most comprehensive icon set with 325 outline-style icons optimized for 24px rendering. Perfect for primary interfaces, navigation, and general UI elements.

// All 325 icons available as named exports
import { 
  AcademicCapIcon,
  ArrowDownIcon,
  HeartIcon,
  UserIcon,
  // ... 321 more icons
} from "@heroicons/react/24/outline";

// Each icon component interface
type OutlineIconComponent = React.ForwardRefExoticComponent<
  React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & 
  { title?: string; titleId?: string } & 
  React.RefAttributes<SVGSVGElement>
>;

24px Outline Icons

24px Solid Icons

Matching solid variants for all 325 icons, providing filled versions perfect for active states, selected items, and emphasis.

// All 325 solid icons available as named exports
import { 
  AcademicCapIcon,
  ArrowDownIcon,
  HeartIcon,
  UserIcon,
  // ... 321 more icons
} from "@heroicons/react/24/solid";

// Each icon component interface (same as outline)
type SolidIconComponent = React.ForwardRefExoticComponent<
  React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & 
  { title?: string; titleId?: string } & 
  React.RefAttributes<SVGSVGElement>
>;

24px Solid Icons

20px Solid Icons

Compact 325-icon set optimized for smaller interface elements like buttons, form controls, and dense layouts.

// All 325 icons at 20px size
import { 
  AcademicCapIcon,
  ArrowDownIcon,
  HeartIcon,
  UserIcon,
  // ... 321 more icons
} from "@heroicons/react/20/solid";

// Same component interface as other sizes
type Icon20Component = React.ForwardRefExoticComponent<
  React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & 
  { title?: string; titleId?: string } & 
  React.RefAttributes<SVGSVGElement>
>;

20px Solid Icons

16px Solid Icons

Smallest icon set with 317 icons optimized for minimal interface elements, badges, and tight spacing requirements.

// 317 icons available at 16px size (8 fewer than other sizes)
import { 
  AcademicCapIcon,
  ArrowDownIcon,
  HeartIcon,
  UserIcon,
  // ... 313 more icons
} from "@heroicons/react/16/solid";

// Same component interface as other sizes
type Icon16Component = React.ForwardRefExoticComponent<
  React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & 
  { title?: string; titleId?: string } & 
  React.RefAttributes<SVGSVGElement>
>;

16px Solid Icons

Common Props and Styling

// Standard React SVG props that all icons accept
interface IconProps extends React.SVGProps<SVGSVGElement> {
  /** Optional accessible title for the icon */
  title?: string;
  /** Optional ID for the title element */
  titleId?: string;
  /** CSS class names for styling */
  className?: string;
  /** Click handler */
  onClick?: (event: React.MouseEvent<SVGSVGElement>) => void;
  /** Custom styles */
  style?: React.CSSProperties;
  /** ARIA label for accessibility */
  'aria-label'?: string;
  /** ARIA described by */
  'aria-describedby'?: string;
}

// Default SVG attributes applied to all icons
interface DefaultAttributes {
  xmlns: "http://www.w3.org/2000/svg";
  fill: "none"; // outline icons, "currentColor" for solid icons
  viewBox: string; // "0 0 24 24", "0 0 20 20", or "0 0 16 16"
  strokeWidth?: 1.5; // outline icons only
  stroke?: "currentColor"; // outline icons only
  'aria-hidden': "true";
  'data-slot': "icon";
}

Error Handling

The package includes helpful error handling for common import mistakes:

  • Root Import Error: Importing from 
    @heroicons/react
    directly throws an error directing users to size-specific imports
  • V1 Compatibility Error: Importing from legacy v1 paths (
    @heroicons/react/outline
    , 
    @heroicons/react/solid
    ) shows upgrade guidance
  • Missing Icons: TypeScript provides compile-time checking for icon name typos and availability across different sizes

Performance Features

  • Tree Shaking: Each icon is a separate module, enabling optimal bundle sizes
  • No Runtime Dependencies: Zero dependencies beyond React peer dependency
  • Forward Refs: Proper ref forwarding for direct SVG element access
  • Side Effect Free: Package marked with 
    "sideEffects": false
    for build optimization
  • Multiple Export Formats: Support for both CommonJS and ESM imports with TypeScript definitions