ProXIcons

GitHub stars GitHub forks GitHub license GitHub issues Weekly Downloads jsDelivr CDN Version GitHub pull requests GitHub last commit GitHub repo size GitHub code size in bytes GitHub language count Top language Maintenance

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.

ProXIcons Preview

What’s New in ProXIcons

v1.4.4 (Latest Release)

v1.4.3

v1.3.0

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

<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

  1. Include the ProXIcons stylesheet (via CDN or local file):
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/proxicons@latest/css/proxicons.min.css">
  1. Add icons using the px, pxs, pxl classes: ````html 


3. Customize with utility classes:

````html
<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:

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

  1. Fork the repository.

  2. Clone your fork:

git clone https://github.com/your-username/ProXIcons.git
  1. Install dependencies:
npm install
  1. Make changes and test locally:
npm run dev
  1. 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:

Ways You Can Contribute

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:

  1. Clone the repo:
git clone https://github.com/ProgrammerKR/ProXIcons.git
  1. Install dependencies:
npm install
  1. Run the development server:
npm run dev
  1. Build for production:
npm run build

Available Scripts

Community & Support

Reporting Issues

License

ProXIcons is fully open-source with permissive licenses:

View Full License

Why Choose ProXIcons?

Roadmap

Here’s what’s coming next for ProXIcons:

Check our Roadmap for progress and vote on features!

Acknowledgments

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

This site is open source. Improve this page.