Contributing

Learn how to contribute to the React Icons project

Contributing to React Icons

React Icons is an open-source project, and we welcome contributions from the community. Whether you’re fixing bugs, adding features, or updating icon packs, your help is appreciated.

Ways to Contribute

Report Issues

Found a bug or have a feature request? Open an issue on GitHub

Add Icon Sets

Propose new icon libraries to include in React Icons

Update Icons

Help keep existing icon packs up to date

Improve Docs

Fix typos or add examples to the documentation

Getting Started

1. Fork the repository

   Fork the react-icons/react-icons repository to your GitHub account.

2. Clone your fork

   git clone https://github.com/YOUR_USERNAME/react-icons.git
   cd react-icons
   
3. Install dependencies

   React Icons uses Yarn for package management:

   yarn
   
4. Create a branch

   Create a new branch for your changes:

   git checkout -b feature/your-feature-name
   

Development Workflow

Building from Source

1. Navigate to the package

   cd packages/react-icons
   
2. Fetch icon sources

   Download the latest icon sources from upstream repositories:

   yarn fetch
   
3. Build the package

   Generate the React components from SVG files:

   yarn build
   
4. Run the demo

   Test your changes in a demo app:

   cd ../demo
   yarn start
   

Project Structure

react-icons/
├── packages/
│   ├── react-icons/          # Main package
│   │   ├── src/
│   │   │   ├── icons/
│   │   │   │   └── index.ts       # Icon pack definitions
│   │   │   ├── iconBase.tsx       # Base icon component
│   │   │   ├── iconContext.tsx    # Context API
│   │   │   └── index.tsx          # Main exports
│   │   └── scripts/
│   │       ├── build.ts           # Build script
│   │       ├── fetcher.ts         # Icon fetcher
│   │       └── check.ts           # Validation
│   ├── demo/                  # Demo app for testing
│   └── preview-astro/         # Documentation site
└── build-script.sh            # Full project build

Adding a New Icon Set

Before adding a new icon set, check the discussions to see if someone else has already proposed it.

1. Check license compatibility

   Ensure the icon pack has a compatible open-source license:

   • MIT
   • Apache 2.0
   • CC BY 4.0
   • ISC
   • OFL

   Propriety or restrictive licenses are not accepted.

2. Add to icon definitions

   Edit packages/react-icons/src/icons/index.ts and add your icon pack:

   {
     id: "your-prefix",
     name: "Your Icon Pack Name",
     contents: [
       {
         files: path.resolve(__dirname, "../../icons/your-pack/svg/*.svg"),
         formatter: (name) => `YourPrefix${name}`,
       },
     ],
     projectUrl: "https://your-icon-pack.com/",
     license: "MIT",
     licenseUrl: "https://github.com/owner/repo/blob/master/LICENSE",
     source: {
       type: "git",
       localName: "your-pack",
       remoteDir: "svg/",
       url: "https://github.com/owner/your-icon-pack.git",
       branch: "main",
       hash: "commit-hash",
     },
   }
   
3. Fetch and build

   Run the fetch and build process:

   yarn fetch && yarn check && yarn build
   
4. Test the icons

   Verify your icons work correctly:

   cd ../demo
   yarn start
   

   Test importing and rendering icons from your new pack.

5. Update documentation

   Add your icon pack to the README.md icon table with:

   • Pack name and link
   • License
   • Version
   • Icon count

Updating an Existing Icon Set

1. Update the hash

   Find the icon pack in packages/react-icons/src/icons/index.ts and update the hash to the latest commit:

   source: {
     type: "git",
     localName: "font-awesome-6",
     remoteDir: "svgs/",
     url: "https://github.com/FortAwesome/Font-Awesome.git",
     branch: "6.x",
     hash: "new-commit-hash-here",  // Update this
   }
   
2. Fetch and rebuild

   cd packages/react-icons
   yarn fetch && yarn check && yarn build
   
3. Update version info

   Update the version and icon count in README.md if they changed.

Code Style

TypeScript

// Use explicit types
export interface IconBaseProps extends React.SVGAttributes<SVGElement> {
  children?: React.ReactNode;
  size?: string | number;
  color?: string;
  title?: string;
}

// Use arrow functions for components
export const IconBase = (props: IconBaseProps): React.ReactElement => {
  // Implementation
};

Formatting

The project uses Prettier for code formatting:

yarn format

Run this before committing to ensure consistent style.

Linting

ESLint is used for code quality:

yarn lint

Fix any linting errors before submitting a PR.

Testing Your Changes

Manual Testing

1. Test in demo app

   cd packages/demo
   yarn start
   

   Create a test component that uses your changes.

2. Test tree-shaking

   Build the demo and check the bundle size:

   yarn build
   

   Verify that only used icons are included in the bundle.

3. Test TypeScript

   If you changed types, verify TypeScript compilation:

   cd packages/react-icons
   yarn type-check
   

Submitting a Pull Request

1. Commit your changes

   Write clear, descriptive commit messages:

   git add .
   git commit -m "feat: add Lucide icon pack"
   

   Follow conventional commits format:

   • feat: for new features
   • fix: for bug fixes
   • docs: for documentation
   • chore: for maintenance
2. Push to your fork

   git push origin feature/your-feature-name
   
3. Create the pull request

   Go to the React Icons repository and create a pull request from your branch.

   Include in your PR description:

   • What changes you made
   • Why you made them
   • How to test them
   • Screenshots (if applicable)
4. Wait for review

   A maintainer will review your PR. Be patient and respond to feedback promptly.

Build Scripts

The project uses several build scripts:

Script	Description
yarn fetch	Downloads icon sources from upstream repositories
yarn build	Generates React components from SVG files
yarn check	Validates icon definitions and sources
yarn type-check	Runs TypeScript type checking
yarn lint	Runs ESLint
yarn format	Formats code with Prettier

Full Project Build

To build the entire project:

./build-script.sh

This script builds all packages and runs validation checks. Use it before submitting a PR.

Getting Help

GitHub Discussions

Ask questions and share ideas

GitHub Issues

Report bugs and request features

Code of Conduct

Please be respectful and constructive in all interactions. We want to maintain a welcoming community for all contributors.

By contributing to React Icons, you agree that your contributions will be licensed under the MIT License.

Next Steps

Building from Source

Detailed build instructions

Adding Icon Sets

Complete guide to adding new icon packs