Developer Icons

Homepage
 ⬥ 
Browse Icons
 ⬥ 
NPM Package
 ⬥ 
Usage
 ⬥ 
Contributing

Welcome to developer-icons—a curated set of high-quality, customizable tech icons built for developers and designers. Fully compatible with TypeScript, ideal for React and Next.js, or downloadable from our official website for design projects.

🧑‍💻 Used by

🚀 Tech Stack

- Astro - The web framework for content-driven websites.
- React - A JavaScript UI library used with Astro.
- Tailwind CSS - A utility-first CSS framework for rapid UI development.
- NPM - The package manager for JavaScript.
- Typescript - A statically typed, superset of JavaScript.
- Vite - A lightning-fast build tool for an optimized development experience.
- Lucide Icons - A modern, customizable, open-source icon library.
- SVGO - A powerful tool for compressing and optimizing SVG files.
- SVGSON - A tool to seamlessly convert SVGs to JSON format and back.

🌟 Features

- ⚡ Highly optimized: Icons are optimized for performance and size. They are designed to be as small as possible while maintaining the quality.
- 🎨 Customizable: Cusomizations are available for all icons. You can change the size, color, stroke width, and much more.
- 🔍 Perfectly scalable: Icons are designed to be properly scaled to any size without compromising the quality.
- 🔄 Consistent icons: No more dealing with inconsistent styles and designs. All icons are designed with a pre-defined set of rules.
- 🌗 Various variants: Icons come with their own set of families such as light and dark mode, wordmark, and other variants.
- ⭐ Free & open-source: Completely free and open-source with license. No need to worry about privately hidden malicious code and be a contributor yourself.

Explore more and start using developer-icons today to enhance your projects with stunning, customizable icons!

📦 Installation

To add the icons to your project, run one of the following commands:

``bash
npm i developer-icons
`

or

`bash
yarn add developer-icons
`

or

`bash
pnpm add developer-icons
`

⚙️ Usage

Import named icon components from the developer-icons package and use them just like any other React component, with props/attributes similar to those of an SVG:

`javascript
import { HtmlIcon, JavascriptIcon } from "developer-icons";

//inside your React component JSX
export const YourReactComponent = () => {
return (


In this example, we import HtmlIcon and JavascriptIcon from the developer-icons package and use them within a React component. You can customize the icons by adjusting their size, color, style`, and other properties.

🤝 Contributing

We welcome contributions of all kinds, whether you're looking to add new icons, improve existing ones, or enhance the overall project. To get started, refer to our Contributing Guidelines.

📜 License

Licensed under MIT License and copyrights reserved.

For complete documentation, visit our official documentation.