Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @patternfly/react-icons with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var reactIcons = require("@patternfly/react-icons")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@patternfly/react-icons v4.3.1

PatternFly 4 Icons as React Components


PatternFly 4 Icons as React Components.


import React from 'react';
import { TimesIcon } from '@patternfly/react-icons';

const closeIcon = <TimesIcon />;

For a list of the available icons please refer to the PatternFly React Docs

Every icon component has the following props:

colorColor of the icon (e.g. red, white, #c3ee)'currentColor'
sizeSize of the icon. There are 4 different sizes: sm, md, lg and xlsm
titleLabel of the iconnull

Adding Icons

Icons for this package are generated from the @fortawesome/free-solid-svg-icons package. To add more to what is generated, modify the icons.js file in the build folder.

If you have some custom icon defined by svg path the best way to add such icon to this repository is to add its path definition in pfIcons.js file in the build folder.

module.exports = {
  pfIcons: {
    // ... other icon defintions
    bigPlus: {width: 1024, height: 1024, svgPathData: 'M2 1 h1 v1 h1 v1 h-1 v1 h-1 v-1 h-1 v-1 h1 z'}

Tree Shaking

Ensure optimization.sideEffects is set to true within your Webpack config:

optimization: {
  sideEffects: true

Use ESM module imports to enable tree shaking with no additional setup required.

import { TimesIcon } from '@patternfly/react-icons';

To enable tree shaking with named imports for CJS modules, utilize babel-plugin-transform-imports and update a babel.config.js file to utilize the plugin:

module.exports = {
  presets: ["@babel/preset-env", "@babel/preset-react"],
  plugins: [
        "@patternfly/react-icons": {
          transform: (importName, matches) => `@patternfly/react-icons/dist/js/icons/${importName.split(/(?=[A-Z])/).join('-').toLowerCase()}`,
          preventFullImport: true
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free