proxicons

v1.4.4

Published

a year ago

ProXIcons - An open-source high-quality icon library for modern web and app development

0High
0Medium
0Low

programmerkr

ProXIcons

High Quality, Modern, and Lightweight Open Source Icons

ProXIcons is a clean, developer-friendly iconset crafted for modern web, app, and design projects. With over 1500+ icons and a focus on performance, ProXIcons is your go-to icon library for any creative need.

What's New in ProXIcons

v2.0.0 (Latest Release)

New Icons: Added 500+ icons, including proxy-specific symbols, tech logos, and UI elements.
Interactive Icon Customizer: Introduced a web-based tool for real-time icon customization (colors, sizes, animations).
TypeScript 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.

v1.4.3

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.

v1.3.0

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

Installation

ProXIcons offers multiple ways to integrate into your project. Choose the method that suits your workflow!

Via npm

npm install proxicons --save

Import the module:

import 'proxicons';

Via CDN

Include the stylesheet in your HTML :

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/proxicons@latest/css/proxicons.min.css">

Or include the JavaScript for Web Components:

<script src="https://cdn.jsdelivr.net/npm/proxicons@latest/dist/proxicons.min.js"></script>

Manual Download

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.

Usage

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

Using via CSS

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/proxicons@latest/css/proxicons.min.css">

Add icons using the px, pxs, pxl classes:

<!-- Regular icon -->
<i class="px px-lightbulb"></i>

<!-- Solid icon -->
<i class="pxs px-lightbulb"></i>

<!-- Large brand icon -->
<i class="pxl px-github"></i>

<!-- Outline icon -->
<i class="pxo px-lightbulb"></i>

Customize with utility classes:

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

Using via Web Component

Include the ProXIcons script:

<script src="https://cdn.jsdelivr.net/npm/proxicons@latest/dist/proxicons.min.js"></script>

Use the element:

<!-- Basic icon -->
<prox-icon name="lightbulb"></prox-icon>

<!-- Solid variant -->
<prox-icon type="solid" name="lightbulb"></prox-icon>

<!-- Brand logo with customization -->
<prox-icon type="logo" name="github" size="lg" color="purple" animation="spin"></prox-icon>

Web Component Attributes

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

| Attribute | Values | Description | |---------------|------------|-----------------| | type | regular, solid, outline, logo, duotone | Icon style variant | | name | e.g., lightbulb, github, proxy | Icon name (see gallery for full list) | | color | e.g., blue, red, #FF5733, rgb(0,0,0) | Icon color | | size | xs, sm, md, lg, xl, or 40px | Icon size (relative or absolute) | | rotate | 90, 180, 270 | Rotate icon in degrees | | flip | horizontal, vertical | Flip icon orientation | | border | square, circle | Add a border shape around the icon | | animation | spin, tada, pulse, bounce | Apply an animation effect | | pull | left, right | Float icon to the left or right |

Using in Frameworks

ProXIcons integrates seamlessly with popular frameworks:

React:

import 'proxicons';
function App() {
  return <i className="px px-lightbulb px-lg"></i>;
}

Vue:

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

Angular:

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

Ensure the script is included in angular.json

Icon Customizer (Comming Sooon)

Try our Interactive Icon Customizer to preview and generate icons in real-time:

Visit ProXIcons Customizer.
Adjust colors, sizes, styles, and animations.
Download customized icons as SVG, PNG, or code snippets.

ProXIcons Icon Preview

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

| Icon Name | Preview | Variants Available | |---------------|-------------|-------------------------| | lightbulb | <prox-icon name="lightbulb"> | Regular, Solid, Outline | | github | <prox-icon name="github"> | Logo, Solid | | proxy | <prox-icon name="proxy"> | Regular, Outline, Duotone | | cloud | <prox-icon name="cloud"> | Regular, Solid, Outline |

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

Visit the Full Icon Gallery to explore 50 sample icons.

Contributing

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

How to Contribute

Fork the repository.
Clone your fork:

git clone https://github.com/your-username/ProXIcons.git

Install dependencies:

npm install

Make changes and test locally:

npm run dev

Submit a pull request with a clear description.

Contribution Ideas

We’d love your help to make ProXIcons 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

Ways You Can Contribute

Design New Icons: Submit original SVG icons following our Icon Guidelines
Fix Bugs: Help resolve open issues from the Issues 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!

Read our Contributing Guide (./CONTRIBUTING.md) for detailed steps.

Our Amazing Contributors

Thanks to everyone who’s helped shape ProXIcons!

[Insert dynamic contributor list or avatars]

Want to see your name here? Contribute today!

Development Setup

For developers looking to work on ProXIcons locally:

Clone the repo:

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

Install dependencies:

npm install

Run the development server:

npm run dev

Build for production:

npm run build

Available Scripts

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

Community & Support

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 at [email protected] for direct support.

Reporting Issues

Found a bug? Open an issue with details (OS, browser, steps to reproduce).
Have a feature idea? Submit a feature request.

License

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

Why Choose ProXIcons?

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.

Roadmap

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!

Acknowledgments

Inspired by FontAwesome, Feather Icons, and 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!