\n\nWelcome 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](https://xandemon.github.io/developer-icons/icons/All \"Developer Icons Website\") for design projects.\n\n## ✨ Star History\n\n[](https://github.com/xandemon/developer-icons/stargazers)\n\n## 🧑💻 Used by\n\n\n \n\n\n## 🎖️ Features\n\n- ⚡ **Highly optimized:** Icons are optimized for performance and size. They are designed to be as small as possible while maintaining the quality.\n- 🎨 **Customizable:** Cusomizations are available for all icons. You can change the size, color, stroke width, and much more.\n- 🔍 **Perfectly scalable:** Icons are designed to be properly scaled to any size without compromising the quality.\n- 🔄 **Consistent icons:** No more dealing with inconsistent styles and designs. All icons are designed with a pre-defined set of rules.\n- 🌗 **Various variants:** Icons come with their own set of families such as light and dark mode, wordmark, and other variants.\n- 🫂 **Free & open-source:** Completely free and open-source with license. No need to worry about privately hidden malicious code and be a contributor yourself.\n\nExplore more and start using `developer-icons` today to enhance your projects with stunning, customizable icons!\n\n## 🚀 Tech Stack\n\n- [Astro](https://astro.build/) - The web framework for content-driven websites.\n- [React](https://reactjs.org/) - A JavaScript UI library used with Astro.\n- [Tailwind CSS](https://tailwindcss.com/) - A utility-first CSS framework for rapid UI development.\n- [NPM](https://www.npmjs.com/) - The package manager for JavaScript.\n- [Typescript](https://www.typescriptlang.org/) - A statically typed, superset of JavaScript.\n- [Vite](https://vitejs.dev/) - A lightning-fast build tool for an optimized development experience.\n- [Lucide Icons](https://lucide.dev/) - A modern, customizable, open-source icon library.\n- [SVGO](https://github.com/svg/svgo) - A powerful tool for compressing and optimizing SVG files.\n- [SVGSON](https://github.com/svgson/svgson) - A tool to seamlessly convert SVGs to JSON format and back.\n\n## 📦 Installation\n\nTo add the icons to your project, run one of the following commands:\n\n```bash\nnpm i developer-icons\n```\n\nor\n\n```bash\nyarn add developer-icons\n```\n\nor\n\n```bash\npnpm add developer-icons\n```\n\n## ⚙️ Usage\n\nImport 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:\n\n```javascript\nimport { HtmlIcon, JavascriptIcon } from \"developer-icons\";\n\n//inside your React component JSX\nexport const YourReactComponent = () => {\n return (\n
\n \n \n
\n );\n};\n```\n\nIn 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.\n\n## 🤝 Contributing\n\nWe 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](https://xandemon.github.io/developer-icons/docs/contributing).\n\n\n \n\n\nAnd many many thanks to those who participated in this little project :)\n\n## 📜 License\n\nLicensed under MIT License and copyrights reserved.\n\nFor complete documentation, visit our [official documentation](https://xandemon.github.io/developer-icons/docs).\n","readmeFilename":"README.md"}
![\"Developer](\"public/logo.png\"){kind=logo}
\n ![\"Astro\"](\"https://img.shields.io/badge/Astro-333333?logo=astro&logoColor=BC52EE\"){kind=icon}
\n ![\"Tailwind](\"https://img.shields.io/badge/Tailwind_CSS-333?logo=tailwindcss&logoColor=06B6D4&style=flat\"){kind=icon}
\n ![\"React.js\"](\"https://img.shields.io/badge/React-333333?logo=react&logoColor=58c4dc\"){kind=icon}
\n ![\"Developer-Icons](\"https://img.shields.io/npm/v/developer-icons?logo=github&logoColor=fff&label=Release&labelColor=333&color=148ACF&style=flat\")
\n ![\"Developer-Icons](\"https://img.shields.io/github/license/xandemon/developer-icons?logo=github&logoColor=fff&label=License&labelColor=333&color=666666&style=flat\")
\n ![\"Developer-Icons](\"https://img.shields.io/npm/dy/developer-icons?logo=npm&logoColor=CB3837&label=Downloads&labelColor=333&color=148ACF&style=flat\")
\n ![\"Developer-Icons](\"https://img.shields.io/github/stars/xandemon/developer-icons?logo=github&logoColor=fff&label=Stars&labelColor=333&color=FFD700&style=flat\")
\n ![\"Developer-Icons](\"https://img.shields.io/github/forks/xandemon/developer-icons?logo=github&logoColor=fff&label=Forks&labelColor=333&color=148ACF&style=flat\")
\n ![\"Developer](\"public/cover-image-dark.png\")
\n