> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/react-icons/react-icons/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

<CardGroup cols={2}>
  <Card title="Report Issues" icon="bug">
    Found a bug or have a feature request? Open an issue on GitHub
  </Card>

  <Card title="Add Icon Sets" icon="square-plus">
    Propose new icon libraries to include in React Icons
  </Card>

  <Card title="Update Icons" icon="arrows-rotate">
    Help keep existing icon packs up to date
  </Card>

  <Card title="Improve Docs" icon="book">
    Fix typos or add examples to the documentation
  </Card>
</CardGroup>

## Getting Started

<Steps>
  <Step title="Fork the repository">
    Fork the [react-icons/react-icons](https://github.com/react-icons/react-icons) repository to your GitHub account.
  </Step>

  <Step title="Clone your fork">
    ```bash theme={null}
    git clone https://github.com/YOUR_USERNAME/react-icons.git
    cd react-icons
    ```
  </Step>

  <Step title="Install dependencies">
    React Icons uses Yarn for package management:

    ```bash theme={null}
    yarn
    ```
  </Step>

  <Step title="Create a branch">
    Create a new branch for your changes:

    ```bash theme={null}
    git checkout -b feature/your-feature-name
    ```
  </Step>
</Steps>

## Development Workflow

### Building from Source

<Steps>
  <Step title="Navigate to the package">
    ```bash theme={null}
    cd packages/react-icons
    ```
  </Step>

  <Step title="Fetch icon sources">
    Download the latest icon sources from upstream repositories:

    ```bash theme={null}
    yarn fetch
    ```
  </Step>

  <Step title="Build the package">
    Generate the React components from SVG files:

    ```bash theme={null}
    yarn build
    ```
  </Step>

  <Step title="Run the demo">
    Test your changes in a demo app:

    ```bash theme={null}
    cd ../demo
    yarn start
    ```
  </Step>
</Steps>

### 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

<Warning>
  Before adding a new icon set, check the [discussions](https://github.com/react-icons/react-icons/discussions/categories/new-icon-set) to see if someone else has already proposed it.
</Warning>

<Steps>
  <Step title="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.
  </Step>

  <Step title="Add to icon definitions">
    Edit `packages/react-icons/src/icons/index.ts` and add your icon pack:

    ```typescript theme={null}
    {
      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",
      },
    }
    ```
  </Step>

  <Step title="Fetch and build">
    Run the fetch and build process:

    ```bash theme={null}
    yarn fetch && yarn check && yarn build
    ```
  </Step>

  <Step title="Test the icons">
    Verify your icons work correctly:

    ```bash theme={null}
    cd ../demo
    yarn start
    ```

    Test importing and rendering icons from your new pack.
  </Step>

  <Step title="Update documentation">
    Add your icon pack to the README.md icon table with:

    * Pack name and link
    * License
    * Version
    * Icon count
  </Step>
</Steps>

## Updating an Existing Icon Set

<Steps>
  <Step title="Update the hash">
    Find the icon pack in `packages/react-icons/src/icons/index.ts` and update the `hash` to the latest commit:

    ```typescript theme={null}
    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
    }
    ```
  </Step>

  <Step title="Fetch and rebuild">
    ```bash theme={null}
    cd packages/react-icons
    yarn fetch && yarn check && yarn build
    ```
  </Step>

  <Step title="Update version info">
    Update the version and icon count in README.md if they changed.
  </Step>
</Steps>

## Code Style

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    // 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
    };
    ```
  </Tab>

  <Tab title="Formatting">
    The project uses Prettier for code formatting:

    ```bash theme={null}
    yarn format
    ```

    Run this before committing to ensure consistent style.
  </Tab>

  <Tab title="Linting">
    ESLint is used for code quality:

    ```bash theme={null}
    yarn lint
    ```

    Fix any linting errors before submitting a PR.
  </Tab>
</Tabs>

## Testing Your Changes

### Manual Testing

<Steps>
  <Step title="Test in demo app">
    ```bash theme={null}
    cd packages/demo
    yarn start
    ```

    Create a test component that uses your changes.
  </Step>

  <Step title="Test tree-shaking">
    Build the demo and check the bundle size:

    ```bash theme={null}
    yarn build
    ```

    Verify that only used icons are included in the bundle.
  </Step>

  <Step title="Test TypeScript">
    If you changed types, verify TypeScript compilation:

    ```bash theme={null}
    cd packages/react-icons
    yarn type-check
    ```
  </Step>
</Steps>

## Submitting a Pull Request

<Steps>
  <Step title="Commit your changes">
    Write clear, descriptive commit messages:

    ```bash theme={null}
    git add .
    git commit -m "feat: add Lucide icon pack"
    ```

    Follow [conventional commits](https://www.conventionalcommits.org/) format:

    * `feat:` for new features
    * `fix:` for bug fixes
    * `docs:` for documentation
    * `chore:` for maintenance
  </Step>

  <Step title="Push to your fork">
    ```bash theme={null}
    git push origin feature/your-feature-name
    ```
  </Step>

  <Step title="Create the pull request">
    Go to the [React Icons repository](https://github.com/react-icons/react-icons) 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)
  </Step>

  <Step title="Wait for review">
    A maintainer will review your PR. Be patient and respond to feedback promptly.
  </Step>
</Steps>

## 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:

```bash theme={null}
./build-script.sh
```

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

## Getting Help

<CardGroup cols={2}>
  <Card title="GitHub Discussions" icon="comments" href="https://github.com/react-icons/react-icons/discussions">
    Ask questions and share ideas
  </Card>

  <Card title="GitHub Issues" icon="circle-exclamation" href="https://github.com/react-icons/react-icons/issues">
    Report bugs and request features
  </Card>
</CardGroup>

## Code of Conduct

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

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

## Next Steps

<CardGroup cols={2}>
  <Card title="Building from Source" icon="hammer" href="/advanced/building-from-source">
    Detailed build instructions
  </Card>

  <Card title="Adding Icon Sets" icon="square-plus" href="/advanced/adding-icon-sets">
    Complete guide to adding new icon packs
  </Card>
</CardGroup>