Repository files navigation

High Quality, Modern, and Lightweight Open Source Icons

• Minor bug fixex for Performance & Readability
• JavaScript Support: Full type definitions for better developer experience.
• Performance Boost: Reduced bundle size by 15% with advanced SVG optimization.
• Accessibility: Improved ARIA support for screen readers.
• New Variants: Added outline and duotone styles.

• Fixed version conflicts and updated metadata.
• Enhanced build system with faster development scripts.
• Optimized SVG handling using svgo for smaller file sizes.
• Minor bug fixes for cross-browser compatibility.

• Initial release with 1600+ unique icons.
• Introduced regular, solid, and brand variants.
• Added Web Component for easy integration.

npm install proxicons --save

Import the module:

import'proxicons';

Include the stylesheet in your HTML :

<linkhref="https://cdn.jsdelivr.net/gh/ProgrammerKR/ProXIcons@main/css/proxicons.min.css"rel="stylesheet">

Or include the JavaScript for Web Components:

<scriptsrc="https://cdn.jsdelivr.net/gh/proxicons@main/dist/proxicons.min.js"></script>

Download the latest release from GitHub Releases and include the files manually:

css/proxicons.min.css for CSS-based icons.

proxicons.min.js for Web Components.

ProXIcons is designed for flexibility, supporting both CSS classes and Web Components with extensive customization options.

1. Include the ProXIcons stylesheet (via CDN or local file):

<linkrel="stylesheet"href="https://cdn.jsdelivr.net/gh/ProgrammerKR/ProXIcons@main/css/proxicons.min.css">

2. Add icons using the px, pxs, pxl classes:

<!-- Regular icon --><iclass="px px-lightbulb"></i><!-- Solid icon --><iclass="pxs px-lightbulb"></i><!-- Large brand icon --><iclass="pxl px-github"></i><!-- Outline icon --><iclass="pxo px-lightbulb"></i>

3. Customize with utility classes:

<iclass="px px-lightbulb px-spin px-lg px-blue"></i>

Include the ProXIcons script:

<scriptsrc="https://cdn.jsdelivr.net/gh/proxicons@main/dist/proxicons.min.js"></script>

Use the element:

<!-- Basic icon --><prox-iconname="lightbulb"></prox-icon><!-- Solid variant --><prox-icontype="solid"name="lightbulb"></prox-icon><!-- Brand logo with customization --><prox-icontype="logo"name="github"size="lg"color="purple"animation="spin"></prox-icon>

The<prox-icon> Web Component supports the following attributes:

ProXIcons integrates seamlessly with popular frameworks:

import'proxicons';functionApp(){return<iclassName="px px-lightbulb px-lg"></i>;}

<template>  <prox-iconname="lightbulb"type="solid"size="lg"color="blue"></prox-icon></template><script>import'proxicons';</script>

<prox-iconname="lightbulb"type="outline"size="md"></prox-icon>

Ensure the script is included inangular.json

• Visit ProXIcons Customizer.

• Adjust colors, sizes, styles, and animations.

• Download customized icons as SVG, PNG, or code snippets.

Here’s a quick look at some beautiful, pixel-perfect icons fromProXIcons

Browse the Full Icon Gallery to explore all 1500+ icons with searchable filters.

Visit theFull Icon Gallery to explore 50 sample icons.

We love contributions! Whether it's adding new icons, fixing bugs, or improving documentation, your help makes ProXIcons better.

1. Fork the repository.

2. Clone your fork:

git clone https://github.com/ProgrammerKR/ProXIcons.git

3. Install dependencies:

npm install

4. Make changes and test locally:

npm run dev

5. Submit a pull request with a clear description.

We’d love your help to makeProXIcons even better! Whether you're a designer, developer, or enthusiast, here are some great ways to contribute:

• Found a bug?Report it here
• Have a feature idea?Suggest it here
• Ready to dive in?Read our Contribution Guide

• Design New Icons: Submit original SVG icons following ourIcon Guidelines
• Fix Bugs: Help resolve open issues from theIssues page
• Add Translations: Help localize the Customizer UI to more languages
• Build New Features: Add animations, export options (like WebP), or integrate with more frameworks
• Improve Docs: Enhance the documentation, examples, or tutorials

Every contribution counts — big or small!

Thanks to everyone who’s helped shape ProXIcons!

[Insert dynamic contributor list or avatars]

Want to see your name here? Contribute today!

For developers looking to work on ProXIcons locally:

1. Clone the repo:

git clone https://github.com/ProgrammerKR/ProXIcons.git

2. Install dependencies:

npm install

3. Run the development server:

npm run dev

4. Build for production:

npm run build

• npm run dev: Start the development server with hot reloading.
• npm run build: Generate minified CSS and JS bundles.
• npm run test: Run unit tests with Jest.
• npm run lint: Check code style with ESLint.
• npm run svgo: Optimize SVG icons

• Join our growing community to share ideas, get help, or showcase your projects using ProXIcons

• Discord: Join our Discord server for real-time discussions.

• GitHub Discussions: Participate in Discussions for feature requests and Q&A.

• Twitter/X: Follow us at@Prog_KanishkRaj for updates and tips.

• Email: Reach out atprogrammerkr.123@gmail.com for direct support.

• Found a bug? Open an issue with details (OS, browser, steps to reproduce).

• Have a feature idea? Submit a feature request.

ProXIcons is fully open-source with permissive licenses:

• Icons:CC BY 4.0
• Fonts:SIL OFL 1.1
• Code & Other Files:MIT License

View Full License

• Lightweight: Optimized SVGs and minimal CSS/JS footprint (~50KB minified).

• Flexible: Supports CSS, Web Components, and framework integrations.

• Customizable: Extensive options for colors, sizes, animations, and more.

• Community-Driven: Built with input from developers and designers worldwide.

Here’s what’s coming next for ProXIcons:

• Icon Customizer v2 with export to Figma and Sketch.

• CLI tool for batch icon generation.

• Support for animated SVG icons.

• Localization for Customizer UI (Spanish, French, etc.).

• Integration with design tools like Adobe XD.

Check our Roadmap for progress and vote on features!

• Inspired & forked from Boxicons.

• Special thanks to our contributors and users for their feedback and support.

ProXIcons is more than an icon library—it’s a community-driven tool to make your projects shine. Star the repo, contribute, or share your creations with us!

Back to Top