tessl/npm-patternfly--react-icons

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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Icon Collections

Name: tessl/npm-patternfly--react-icons
Author: tessl

Comprehensive categorized collections of over 1,100 icons from three main sources: FontAwesome, PatternFly design system, and custom Red Hat ecosystem icons. Each collection follows specific naming conventions and serves different use cases.

Capabilities

FontAwesome Icons (1000+ icons)

Icons from FontAwesome 5.15.4 including solid, regular, and brand collections with consistent naming patterns.

// FontAwesome Solid Icons (most common usage)
const UserIcon: React.ComponentClass<SVGIconProps>;
const HomeIcon: React.ComponentClass<SVGIconProps>;
const SearchIcon: React.ComponentClass<SVGIconProps>;
const BellIcon: React.ComponentClass<SVGIconProps>;
const CogIcon: React.ComponentClass<SVGIconProps>;
const TrashIcon: React.ComponentClass<SVGIconProps>;
const EditIcon: React.ComponentClass<SVGIconProps>;
const SaveIcon: React.ComponentClass<SVGIconProps>;
const PrintIcon: React.ComponentClass<SVGIconProps>;
const DownloadIcon: React.ComponentClass<SVGIconProps>;

// FontAwesome Regular Icons (outlined versions)
const OutlinedUserIcon: React.ComponentClass<SVGIconProps>;
const OutlinedBellIcon: React.ComponentClass<SVGIconProps>;
const OutlinedFileIcon: React.ComponentClass<SVGIconProps>;
const OutlinedCalendarIcon: React.ComponentClass<SVGIconProps>;
const OutlinedCheckCircleIcon: React.ComponentClass<SVGIconProps>;

// FontAwesome Brand Icons (social and company logos)
const FacebookIcon: React.ComponentClass<SVGIconProps>;
const TwitterIcon: React.ComponentClass<SVGIconProps>;
const GithubIcon: React.ComponentClass<SVGIconProps>;
const LinkedinIcon: React.ComponentClass<SVGIconProps>;
const GoogleIcon: React.ComponentClass<SVGIconProps>;
const MicrosoftIcon: React.ComponentClass<SVGIconProps>;
const AppleIcon: React.ComponentClass<SVGIconProps>;
const DockerIcon: React.ComponentClass<SVGIconProps>;
const SlackIcon: React.ComponentClass<SVGIconProps>;

FontAwesome Naming Rules:

Solid icons: Direct conversion user → UserIcon
Regular icons: Prefixed with "Outlined" user → OutlinedUserIcon
Brand icons: Company/service names facebook → FacebookIcon
Numeric handling: 500px → FiveHundredPxIcon

Excluded Icons:

faFontAwesomeLogoFull is excluded from the collection

Usage Examples:

import { 
  UserIcon, 
  OutlinedUserIcon, 
  FacebookIcon,
  FiveHundredPxIcon 
} from "@patternfly/react-icons";

// Solid icon usage
<UserIcon title="User profile" />

// Regular (outlined) icon usage  
<OutlinedUserIcon className="outline-style" />

// Brand icon usage
<FacebookIcon onClick={shareOnFacebook} />

// Numeric name handling
<FiveHundredPxIcon />

PatternFly Icons (100+ icons)

Core PatternFly design system icons optimized for enterprise applications, with some renamed for consistency with the broader collection.

// PatternFly Core Icons
const AddCircleOIcon: React.ComponentClass<SVGIconProps>;
const ApplicationsIcon: React.ComponentClass<SVGIconProps>;
const ArchiveIcon: React.ComponentClass<SVGIconProps>;
const ArrowIcon: React.ComponentClass<SVGIconProps>;
const BuildIcon: React.ComponentClass<SVGIconProps>;
const BundleIcon: React.ComponentClass<SVGIconProps>;
const CatalogIcon: React.ComponentClass<SVGIconProps>;
const CloudIcon: React.ComponentClass<SVGIconProps>;
const ContainerNodeIcon: React.ComponentClass<SVGIconProps>;
const CubeIcon: React.ComponentClass<SVGIconProps>;

// PatternFly Renamed Icons (renamed to avoid conflicts)
const SaveAltIcon: React.ComponentClass<SVGIconProps>;        // was 'save'
const FolderOpenAltIcon: React.ComponentClass<SVGIconProps>; // was 'folder-open'
const EditAltIcon: React.ComponentClass<SVGIconProps>;       // was 'edit'
const PrintAltIcon: React.ComponentClass<SVGIconProps>;      // was 'print'
const SpinnerAltIcon: React.ComponentClass<SVGIconProps>;    // was 'spinner'
const HomeAltIcon: React.ComponentClass<SVGIconProps>;       // was 'home'
const MemoryAltIcon: React.ComponentClass<SVGIconProps>;     // was 'memory'
const ServerAltIcon: React.ComponentClass<SVGIconProps>;     // was 'server'
const UserSecIcon: React.ComponentClass<SVGIconProps>;       // was 'user'
const UsersAltIcon: React.ComponentClass<SVGIconProps>;      // was 'users'
const InfoAltIcon: React.ComponentClass<SVGIconProps>;       // was 'info'
const FilterAltIcon: React.ComponentClass<SVGIconProps>;     // was 'filter'

PatternFly Naming Rules:

Most icons use direct name conversion: catalog → CatalogIcon
Conflicting names get "Alt" suffix: save → SaveAltIcon
Special security context: user → UserSecIcon

Excluded Icons:

history is excluded from PatternFly icons

Usage Examples:

import { 
  CatalogIcon, 
  SaveAltIcon, 
  UserSecIcon, 
  ApplicationsIcon 
} from "@patternfly/react-icons";

// Standard PatternFly icons
<CatalogIcon title="Application catalog" />
<ApplicationsIcon className="app-menu-icon" />

// Renamed PatternFly icons (avoid conflicts with FontAwesome)
<SaveAltIcon />      // PatternFly save icon
<UserSecIcon />      // PatternFly user icon for security contexts

Custom Icons (10 icons)

Specialized icons for Red Hat and PatternFly ecosystem tools, providing brand-specific iconography not available in standard collections.

/**
 * Red Hat and PatternFly ecosystem icons
 */
const OpenshiftIcon: React.ComponentClass<SVGIconProps>;     // OpenShift container platform logo
const AnsibeTowerIcon: React.ComponentClass<SVGIconProps>;   // Ansible Tower logo (note: typo preserved)
const CloudCircleIcon: React.ComponentClass<SVGIconProps>;   // Cloud with circle design
const CloudServerIcon: React.ComponentClass<SVGIconProps>;   // Cloud server representation
const ChartSpikeIcon: React.ComponentClass<SVGIconProps>;    // Spiked chart visualization
const PaperPlaneAltIcon: React.ComponentClass<SVGIconProps>; // Alternative paper plane design
const OpenstackIcon: React.ComponentClass<SVGIconProps>;     // OpenStack logo
const AzureIcon: React.ComponentClass<SVGIconProps>;         // Microsoft Azure logo
const PathMissingIcon: React.ComponentClass<SVGIconProps>;   // Path/route missing indicator
const PenToSquareIcon: React.ComponentClass<SVGIconProps>;   // Edit/modify icon

Custom Icon Details:

OpenshiftIcon - OpenShift container platform branding
AnsibeTowerIcon - Ansible Tower automation (note: name contains preserved typo)
CloudCircleIcon - Generic cloud icon with circular design
CloudServerIcon - Cloud computing with server elements
ChartSpikeIcon - Data visualization with spike patterns
PaperPlaneAltIcon - Send/message icon alternative design
OpenstackIcon - OpenStack cloud platform logo
AzureIcon - Microsoft Azure cloud services logo
PathMissingIcon - Error state for missing routes/paths
PenToSquareIcon - Edit action with pen-to-square metaphor

Usage Examples:

import { 
  OpenshiftIcon, 
  AzureIcon, 
  CloudServerIcon,
  ChartSpikeIcon 
} from "@patternfly/react-icons";

// Red Hat ecosystem branding
<OpenshiftIcon title="OpenShift cluster" />

// Cloud provider branding
<AzureIcon className="azure-branding" />

// Infrastructure visualization
<CloudServerIcon title="Cloud infrastructure" />

// Data visualization
<ChartSpikeIcon onClick={showDetailedChart} />

Collection Usage Patterns

Different collections serve different purposes in applications.

By Use Case:

// General UI actions (FontAwesome solid)
import { 
  UserIcon,      // User profiles
  SearchIcon,    // Search functionality
  CogIcon,       // Settings/configuration
  BellIcon       // Notifications
} from "@patternfly/react-icons";

// Subtle/outlined variants (FontAwesome regular)
import { 
  OutlinedUserIcon,    // Less prominent user indicators
  OutlinedFileIcon,    // Document representations
  OutlinedBellIcon     // Inactive notifications
} from "@patternfly/react-icons";

// Social/brand integration (FontAwesome brands)
import { 
  GithubIcon,     // GitHub integration
  SlackIcon,      // Slack notifications
  DockerIcon      // Container technology
} from "@patternfly/react-icons";

// Enterprise/PatternFly UI (PatternFly icons)
import { 
  CatalogIcon,        // Application catalogs
  ApplicationsIcon,   // App management
  ContainerNodeIcon   // Kubernetes/OpenShift
} from "@patternfly/react-icons";

// Red Hat ecosystem (Custom icons)
import { 
  OpenshiftIcon,    // Container platforms
  AzureIcon,        // Multi-cloud support
  ChartSpikeIcon    // Monitoring dashboards
} from "@patternfly/react-icons";

Tree Shaking and Performance

Optimize bundle size by importing icons individually rather than from the main package.

Recommended Approach:

// Individual imports for optimal tree shaking
import UserIcon from "@patternfly/react-icons/dist/esm/icons/user-icon";
import SearchIcon from "@patternfly/react-icons/dist/esm/icons/search-icon";
import FacebookIcon from "@patternfly/react-icons/dist/esm/icons/facebook-icon";

Babel Transform for CommonJS:

// babel.config.js for automatic transform
module.exports = {
  plugins: [
    [
      "transform-imports",
      {
        "@patternfly/react-icons": {
          transform: (importName) => 
            `@patternfly/react-icons/dist/js/icons/${importName
              .split(/(?=[A-Z])/)
              .join('-')
              .toLowerCase()}`,
          preventFullImport: true
        }
      }
    ]
  ]
};

Icon Discovery

With over 1,100 icons available, use systematic approaches to find the right icons.

By Category:

UI Actions: User, Search, Edit, Save, Delete, Settings
Navigation: Arrow, Home, Menu, Back, Forward
Status: Check, X, Warning, Info, Success, Error
Media: Play, Pause, Volume, Image, Video
Communication: Bell, Message, Mail, Phone
Business: Calendar, Clock, Chart, Graph, Report
Technology: Code, Database, Server, Cloud, Mobile

Online Resources:

PatternFly Icon Documentation: https://react-staging.patternfly.org/icons
FontAwesome 5.15.4 Gallery: https://fontawesome.com/v5.15/icons
Icon search and preview tools in PatternFly documentation

Install with Tessl CLI

npx tessl i tessl/npm-patternfly--react-icons

docs

tessl/npm-patternfly--react-icons