Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/xandemon/developer-icons
A collection of well-optimized SVG tech logos for developers and designers—customizable, scalable, and free.
https://github.com/xandemon/developer-icons
astro github-action icons logos npm npm-packages npmjs open-source optimized react react-libraries svg svg-icon svg-images tailwindcss typescript vector-icons vite
Last synced: 4 days ago
JSON representation
A collection of well-optimized SVG tech logos for developers and designers—customizable, scalable, and free.
- Host: GitHub
- URL: https://github.com/xandemon/developer-icons
- Owner: xandemon
- License: mit
- Created: 2023-11-20T14:01:29.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-14T14:52:14.000Z (7 days ago)
- Last Synced: 2025-01-14T19:29:21.470Z (7 days ago)
- Topics: astro, github-action, icons, logos, npm, npm-packages, npmjs, open-source, optimized, react, react-libraries, svg, svg-icon, svg-images, tailwindcss, typescript, vector-icons, vite
- Language: TypeScript
- Homepage: https://xandemon.github.io/developer-icons/
- Size: 3.03 MB
- Stars: 198
- Watchers: 2
- Forks: 25
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
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](https://xandemon.github.io/developer-icons/icons/All "Developer Icons Website") for design projects.
## 🚀 Tech Stack
- [Astro](https://astro.build/) - The web framework for content-driven websites.
- [React](https://reactjs.org/) - A JavaScript UI library used with Astro.
- [Tailwind CSS](https://tailwindcss.com/) - A utility-first CSS framework for rapid UI development.
- [NPM](https://www.npmjs.com/) - The package manager for JavaScript.
- [Typescript](https://www.typescriptlang.org/) - A statically typed, superset of JavaScript.
- [Vite](https://vitejs.dev/) - A lightning-fast build tool for an optimized development experience.
- [Lucide Icons](https://lucide.dev/) - A modern, customizable, open-source icon library.
- [SVGO](https://github.com/svg/svgo) - A powerful tool for compressing and optimizing SVG files.
- [SVGSON](https://github.com/svgson/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](https://xandemon.github.io/developer-icons/docs/contributing).
## 📜 License
Licensed under MIT License and copyrights reserved.
For complete documentation, visit our [official documentation](https://xandemon.github.io/developer-icons/docs).