npm package: @sse-auth/icons
Description: A collection of well-optimized SVG tech logos for developers and designers—customizable, scalable, and free.
Author: SSE World
Latest version: 3.0.0

<div align="center">
  <a href="https://sse-icons.github.io/auth/" target="_blank">
    <img src="public/logo.png" alt="SSE Icons by SSE Auth" height="120" />
  </a>
  <h1>SSE Icons</h1>
</div>

<div align="center">
  <div>
    <a href="https://astro.build/" target="_blank">
      <img
        src="https://img.shields.io/badge/Astro-333333?logo=astro&logoColor=BC52EE"
        alt="Astro"
      />
    </a>
    <a href="https://tailwindcss.com/" target="_blank">
      <img
        src="https://img.shields.io/badge/Tailwind_CSS-333?logo=tailwindcss&logoColor=06B6D4&style=flat"
        alt="Tailwind CSS"
      />
    </a>
    <a href="https://react.dev/" target="_blank">
      <img
        src="https://img.shields.io/badge/React-333333?logo=react&logoColor=58c4dc"
        alt="React.js"
      />
    </a>
    <a
      href="https://github.com/sse-auth/icons/releases"
      target="_blank"
    >
      <img
        src="https://img.shields.io/npm/v/@sse-auth/icons?logo=github&logoColor=fff&label=Release&labelColor=333&color=148ACF&style=flat"
        alt="SSE-Icons NPM Package Version"
      />
    </a>
    <a
      href="https://github.com/sse-auth/icons/blob/main/LICENSE"
      target="_blank"
    >
      <img
        src="https://img.shields.io/github/license/sse-auth/icons?logo=github&logoColor=fff&label=License&labelColor=333&color=666666&style=flat"
        alt="SSE-Icons License"
      />
    </a>
  </div>
  <div>
    <a href="https://www.npmjs.com/package/@sse-auth/icons" target="_blank">
      <img
        src="https://img.shields.io/npm/dy/@sse-auth/icons?logo=npm&logoColor=CB3837&label=Downloads&labelColor=333&color=148ACF&style=flat"
        alt="SSE-Icons NPM Package Downloads"
        style="height: 24px"
      />
    </a>
    <a
      href="https://github.com/sse-auth/icons/stargazers"
      target="_blank"
    >
      <img
        src="https://img.shields.io/github/stars/sse-auth/icons?logo=github&logoColor=fff&label=Stars&labelColor=333&color=FFD700&style=flat"
        alt="SSE-Icons GitHub Stars"
        style="height: 24px"
      />
    </a>
    <a
      href="https://github.com/sse-auth/icons/stargazers"
      target="_blank"
    >
      <img
        src="https://img.shields.io/github/forks/sse-auth/icons?logo=github&logoColor=fff&label=Forks&labelColor=333&color=148ACF&style=flat"
        alt="SSE-Icons GitHub Forks"
        style="height: 24px"
      />
    </a>
  </div>
</div>

<p align="center">
  <a href="https://sse-icons.github.io/auth/">
    Homepage
  </a>
  <span>&nbsp;⬥&nbsp;</span>
  <a href="https://sse-icons.github.io/auth/icons/All">
    Browse Icons
  </a>
  <span>&nbsp;⬥&nbsp;</span>
  <a href="https://www.npmjs.com/package/@sse-auth/icons">
    NPM Package
  </a>
  <span>&nbsp;⬥&nbsp;</span>
  <a href="https://sse-icons.github.io/auth/docs/usageGuide/">
    Usage
  </a>
  <span>&nbsp;⬥&nbsp;</span>
  <a href="https://sse-icons.github.io/auth/docs/contributing/">
    Contributing
  </a>
</p>

<p align="center">
  <img src="public/cover-image-light.png" alt="Developer Icons" />
</p>

Welcome to **`sse-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://sse-icons.github.io/auth/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 `sse-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 @sse-auth/icons
```

or

```bash
yarn add @sse-auth/icons
```

or

```bash
pnpm add @sse-auth/icons
```

## ⚙️ Usage

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

```javascript
import { AppleDark, Auth0 } from "@sse-auth/icons";

//inside your React component JSX
export const YourReactComponent = () => {
  return (
    <div>
      <AppleDark className="apple-icon" />
      <Auth0 size={52} style={{ marginLeft: 20 }} />
    </div>
  );
};
```

In this example, we import `AppleDark` and `Auth0` from the `@sse-auth/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://sse-icons.github.io/auth/docs/contributing).

## 📜 License

Licensed under MIT License and copyrights reserved.

For complete documentation, visit our [official documentation](https://sse-icons.github.io/auth/docs).