or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

icon-collections.mdicon-components.mdicon-factory.mdindex.md
tile.json

tessl/npm-patternfly--react-icons

PatternFly 4 Icons as React Components providing tree-shakable icon imports with TypeScript support

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@patternfly/react-icons@6.3.x

To install, run

npx @tessl/cli install tessl/npm-patternfly--react-icons@6.3.0

index.mddocs/

PatternFly React Icons

PatternFly React Icons provides over 1,100 icon components for React applications, offering a comprehensive collection from FontAwesome, PatternFly design system, and custom Red Hat ecosystem icons. All icons are provided as tree-shakable React components with full TypeScript support and built-in accessibility features.

Package Information

  • Package Name: @patternfly/react-icons
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @patternfly/react-icons

Core Imports

import { UserIcon, ArrowRightIcon } from "@patternfly/react-icons";
import { createIcon } from "@patternfly/react-icons/dist/esm/createIcon";
import type { SVGIconProps, IconDefinition } from "@patternfly/react-icons/dist/esm/createIcon";

For individual icon imports (recommended for tree-shaking):

import UserIcon from "@patternfly/react-icons/dist/esm/icons/user-icon";
import ArrowRightIcon from "@patternfly/react-icons/dist/esm/icons/arrow-right-icon";

For CommonJS:

const { UserIcon, ArrowRightIcon } = require("@patternfly/react-icons");

Basic Usage

import { UserIcon, ArrowRightIcon, CheckIcon } from "@patternfly/react-icons";

function MyComponent() {
  return (
    <div>
      {/* Simple icon usage */}
      <UserIcon />
      
      {/* Icon with accessibility title */}
      <ArrowRightIcon title="Navigate to next page" />
      
      {/* Icon with custom styling */}
      <CheckIcon className="text-green-500" style={{ fontSize: '24px' }} />
    </div>
  );
}

Architecture

PatternFly React Icons is built around several key components:

  • Icon Factory: createIcon function generates React class components from icon definitions
  • Icon Components: Over 1,100 pre-built icon components with consistent naming ({Name}Icon)
  • Type System: Full TypeScript integration with SVGIconProps and IconDefinition interfaces
  • Accessibility Engine: Built-in ARIA support with optional titles and semantic markup
  • Build System: Generated components support both ESM and CJS with optimal tree-shaking

Capabilities

Icon Components

Pre-built React components for all icons from FontAwesome, PatternFly, and custom sources. Each icon follows consistent naming patterns and includes accessibility features.

// Example icon components
const UserIcon: React.ComponentClass<SVGIconProps>;
const ArrowRightIcon: React.ComponentClass<SVGIconProps>;
const CheckIcon: React.ComponentClass<SVGIconProps>;

interface SVGIconProps extends Omit<React.HTMLProps<SVGElement>, 'ref'> {
  title?: string;
  className?: string;
}

Icon Components

Icon Factory

Factory function for creating custom icon components from icon definitions, enabling creation of custom icons that match the library's patterns.

function createIcon(iconDefinition: IconDefinition): React.ComponentClass<SVGIconProps>;

interface IconDefinition {
  name?: string;
  width: number;
  height: number;
  svgPath: string | SVGPathObject[];
  xOffset?: number;
  yOffset?: number;
  svgClassName?: string;
}

interface SVGPathObject {
  path: string;
  className?: string;
}

Icon Factory

Icon Collections

Comprehensive categorized collections of icons from different sources, each with specific naming conventions and use cases.

// FontAwesome Icons (1000+ icons)
const TimesIcon: React.ComponentClass<SVGIconProps>;          // Solid icons
const OutlinedUserIcon: React.ComponentClass<SVGIconProps>;  // Regular icons  
const FacebookIcon: React.ComponentClass<SVGIconProps>;      // Brand icons

// PatternFly Icons (100+ icons)
const SaveAltIcon: React.ComponentClass<SVGIconProps>;
const EditAltIcon: React.ComponentClass<SVGIconProps>;

// Custom Icons (10 icons)
const OpenshiftIcon: React.ComponentClass<SVGIconProps>;
const AzureIcon: React.ComponentClass<SVGIconProps>;

Icon Collections

Types

interface SVGIconProps extends Omit<React.HTMLProps<SVGElement>, 'ref'> {
  /** Accessibility title for the icon */
  title?: string;
  /** Additional CSS classes */
  className?: string;
}

interface IconDefinition {
  /** Display name for the icon component */
  name?: string;
  /** Icon width in pixels */
  width: number;
  /** Icon height in pixels */
  height: number;
  /** SVG path data or array of path objects */
  svgPath: string | SVGPathObject[];
  /** X-axis offset (default: 0) */
  xOffset?: number;
  /** Y-axis offset (default: 0) */
  yOffset?: number;
  /** CSS class for the SVG element */
  svgClassName?: string;
}

interface SVGPathObject {
  /** SVG path data */
  path: string;
  /** CSS class for this specific path */
  className?: string;
}

interface IconConfig {
  name: string;
  height: number;
  width: number;
  svgPath: string | SVGPathObject[];
  yOffset: number;
  xOffset: number;
  svgClassName: string | null;
}