# ProIcons

<p>
    <a href="https://github.com/ProCode-Software/proicons/releases">
        <img src="https://img.shields.io/github/v/release/ProCode-Software/proicons?style=for-the-badge"
            alt="Version">
    </a>
    <!-- <a href="https://github.com/ProCode-Software/proicons/releases">
        <img alt="Icons" src="https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2FProCode-Software%2Fproicons%2Fmain%2Ficons%2Ficons.lock.json&query=%24.icons.length&style=for-the-badge&label=Icons">
    </a> -->
    <a href="https://github.com/ProCode-Software/proicons">
        <img src="https://img.shields.io/github/stars/ProCode-Software/proicons?style=for-the-badge"
            alt="Stars">
    </a>
    <a href="https://www.npmjs.com/package/proicons">
        <img src="https://img.shields.io/npm/dm/proicons?label=downloads&style=for-the-badge"
            alt="NPM Package">
    </a>
    <a href="https://github.com/ProCode-Software/proicons/blob/main/LICENSE">
        <img src="https://img.shields.io/github/license/ProCode-Software/proicons?style=for-the-badge"
            alt="License">
    </a>
</p>

<img src="https://raw.githubusercontent.com/ProCode-Software/proicons/main/.github/images/github-cover_light.png#gh-light-mode-only">
<img src="https://raw.githubusercontent.com/ProCode-Software/proicons/main/.github/images/github-cover_dark.png#gh-dark-mode-only">

<p align="center">
<br>
<b>👑 A collection of 500+ modern and open-source icons and logos</b>
<br>
<a href="https://procode-software.github.io/proicons/icons">⭐ Browse icons</a> | 
<a href="https://procode-software.github.io/proicons/docs/introduction/about">📕 Documentation</a> | 
<a href="https://github.com/ProCode-Software/proicons">📁 GitHub</a> | 
<a href="https://www.npmjs.com/package/proicons">📦 NPM</a>
</p>

## Features

- 🎨 Highly-customizable icons
- 🌐 Available for [HTML](https://procode-software.github.io/proicons/docs/html-api), [Node.js](https://procode-software.github.io/proicons/docs/html-api), [React](https://procode-software.github.io/proicons/docs/react) and [Vue](https://procode-software.github.io/proicons/docs/vue)
- 🌳 Tree-shakable for eliminating unused icons when using a bundler

## Packages

<table>
    <tr>
        <th></th>
        <th>Package</th>
        <th>NPM</th>
        <th>Links</th>
    </tr>
    <tr>
        <td>
            <img src="https://raw.githubusercontent.com/ProCode-Software/proicons/refs/heads/main/site/src/public/logos/javascript.svg" width="40">
        </td>
        <td>
            <b>Vanilla</b>
            <br>
            <code>proicons</code>
        </td>
        <td>
            <a href="https://npmjs.com/package/proicons">
                <img src="https://img.shields.io/npm/dm/proicons?label=downloads&style=for-the-badge" alt="NPM Package">
            </a>
        </td>
        <td>
            <a href="https://procode-software.github.io/proicons/docs/javascript-api">Documentation</a> | 
            <a href="https://github.com/ProCode-Software/proicons/tree/main/packages/proicons">GitHub</a>
        </td>
    </tr>
    <tr>
        <td>
            <img src="https://raw.githubusercontent.com/ProCode-Software/proicons/refs/heads/main/site/src/public/logos/react.svg" width="40">
        </td>
        <td>
            <b>React</b>
            <br>
            <code>@proicons/react</code>
        </td>
        <td>
            <a href="https://npmjs.com/package/@proicons/react">
                <img src="https://img.shields.io/npm/dm/@proicons/react?label=downloads&style=for-the-badge" alt="NPM Package">
            </a>
        </td>
        <td>
            <a href="https://procode-software.github.io/proicons/docs/react">Documentation</a> | 
            <a href="https://github.com/ProCode-Software/proicons/tree/main/packages/proicons-react">GitHub</a>
        </td>
    </tr>
    <tr>
        <td>
            <img src="https://raw.githubusercontent.com/ProCode-Software/proicons/refs/heads/main/site/src/public/logos/svelte.svg" width="40">
        </td>
        <td>
            <b>Svelte</b>
            <br>
            <code>@proicons/svelte</code>
        </td>
        <td>
            <a href="https://npmjs.com/package/@proicons/svelte">
                <img src="https://img.shields.io/npm/dm/@proicons/svelte?label=downloads&style=for-the-badge" alt="NPM Package">
            </a>
        </td>
        <td>
            <a href="https://procode-software.github.io/proicons/docs/svelte">Documentation</a> | 
            <a href="https://github.com/ProCode-Software/proicons/tree/main/packages/proicons-svelte">GitHub</a>
        </td>
    </tr>
    <tr>
        <td>
            <img src="https://raw.githubusercontent.com/ProCode-Software/proicons/refs/heads/main/site/src/public/logos/vue.svg" width="40">
        </td>
        <td>
            <b>Vue</b>
            <br>
            <code>@proicons/vue</code>
        </td>
        <td>
            <a href="https://npmjs.com/package/@proicons/vue">
                <img src="https://img.shields.io/npm/dm/@proicons/vue?label=downloads&style=for-the-badge" alt="NPM Package">
            </a>
        </td>
        <td>
            <a href="https://procode-software.github.io/proicons/docs/vue">Documentation</a> | 
            <a href="https://github.com/ProCode-Software/proicons/tree/main/packages/proicons-vue">GitHub</a>
        </td>
    </tr>
    <tr>
        <td>
            <img src="https://raw.githubusercontent.com/ProCode-Software/proicons/refs/heads/main/site/src/public/logos/html5.svg" width="40">
        </td>
        <td>
            <b>Webfont</b>
            <br>
            <code>@proicons/webfont</code>
        </td>
        <td>
            <a href="https://npmjs.com/package/@proicons/webfont">
                <img src="https://img.shields.io/npm/dm/@proicons/webfont?label=downloads&style=for-the-badge" alt="NPM Package">
            </a>
        </td>
        <td>
            <a href="https://procode-software.github.io/proicons/docs/webfont">Documentation</a> | 
            <a href="https://github.com/ProCode-Software/proicons/tree/main/packages/proicons-webfont">GitHub</a>
        </td>
    </tr>
</table>

# License

ProIcons is 100% free for personal and commercial use, and is licensed under the [MIT License](https://github.com/ProCode-Software/proicons?tab=MIT-1-ov-file).

## Request an icon

If an icon you want isn't in the set, you can request an icon in [discussions](https://github.com/ProCode-Software/proicons/discussions/categories/icon-requests).

## Contributing

For more info on how to contribute, please see our [contributing guide](https://github.com/ProCode-Software/proicons/blob/main/CONTRIBUTING.md).

## Credits

- Icon design and guidelines inspired by Microsoft's [Fluent System Icons](https://github.com/microsoft/fluentui-system-icons)
- Alpha bleeding script from https://github.com/Corecii/Transparent-Pixel-Fix
- API based on [Feather Icons](https://github.com/feathericons/feather)
- Website design inspired by [Lucide Icons](https://github.com/lucide-icons/lucide)
- Logos on website from [svgl](https://svgl.app)
