# ⚡ Neon Icons - Free SVG Icon Library with Glow Effects

A premium collection of **180+ free SVG icons with neon glow effects** designed for **dark mode websites and applications**.

[![Neon Icons](https://img.shields.io/badge/Icons-180+-00f5ff?style=for-the-badge)](https://yefferking.github.io/IconsNeon/)
[![Dark Mode](https://img.shields.io/badge/Dark%20Mode-Optimized-ff00ff?style=for-the-badge)](https://yefferking.github.io/IconsNeon/)
[![SVG](https://img.shields.io/badge/Format-SVG-39ff14?style=for-the-badge)](https://yefferking.github.io/IconsNeon/)
[![License](https://img.shields.io/badge/License-MIT-bf00ff?style=for-the-badge)](LICENSE)
[![npm](https://img.shields.io/npm/v/neon-icons-library?style=for-the-badge&color=ff6600)](https://www.npmjs.com/package/neon-icons-library)

## 🔗 Live Demo

👉 **[View Demo & Copy Icons](https://yefferking.github.io/IconsNeon)**

![Neon Icons Preview](preview.png)

---

## ✨ Features

- 🌟 **180+ Free Icons** - Growing collection of high-quality SVG icons
- 🎨 **7 Neon Colors** - Cyan, Magenta, Green, Orange, Purple, Yellow, Red
- 💫 **Glow Effects** - Beautiful neon glow optimized for dark backgrounds
- 📐 **Scalable SVG** - Looks perfect at any size
- 🎭 **5 Animations** - Pulse, glow, flicker, spin, bounce
- 📱 **Responsive** - Works on any device
- 🚀 **Lightweight** - Pure CSS and SVG, no dependencies
- 🌙 **Dark Mode Ready** - Perfect for modern dark themes
- 📋 **One-Click Copy** - Copy HTML, SVG or CSS code instantly

---

## 📦 Installation

### Method 1: CDN (Recommended)

Simply add to your HTML:

```html
<!-- CSS - Neon icon styles -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/yefferking/IconsNeon@main/neon-icons.css"
/>
```

### Method 2: NPM

```bash
npm install neon-icons-library
```

```javascript
import "neon-icons-library/neon-icons.css";
```

### Method 3: Download

[Download ZIP](https://github.com/yefferking/IconsNeon/archive/refs/heads/main.zip)

---

## 🚀 Quick Start

### Using `<i>` tag (like Font Awesome)

```html
<i class="ni ni-home neon-cyan"></i>
<i class="ni ni-heart neon-magenta lg"></i>
<i class="ni ni-star neon-yellow xl pulse"></i>
```

### Using `<span>` with SVG

```html
<span class="neon-icon neon-cyan">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
    <polyline points="9 22 9 12 15 12 15 22" />
  </svg>
</span>
```

---

## 🎨 Neon Color Palette

| Color      | Hex Code  | CSS Class       |
| ---------- | --------- | --------------- |
| 🔵 Cyan    | `#00f5ff` | `.neon-cyan`    |
| 🔴 Magenta | `#ff00ff` | `.neon-magenta` |
| 🟢 Green   | `#39ff14` | `.neon-green`   |
| 🟠 Orange  | `#ff6600` | `.neon-orange`  |
| 🟣 Purple  | `#bf00ff` | `.neon-purple`  |
| 🟡 Yellow  | `#ffff00` | `.neon-yellow`  |
| ❤️ Red     | `#ff0040` | `.neon-red`     |

---

## 📏 Sizes

```html
<i class="ni ni-star neon-cyan xs"></i>
<!-- 12px -->
<i class="ni ni-star neon-cyan sm"></i>
<!-- 16px -->
<i class="ni ni-star neon-cyan"></i>
<!-- 24px (default) -->
<i class="ni ni-star neon-cyan lg"></i>
<!-- 32px -->
<i class="ni ni-star neon-cyan xl"></i>
<!-- 48px -->
<i class="ni ni-star neon-cyan xxl"></i>
<!-- 64px -->
```

---

## 🎭 Animations

```html
<i class="ni ni-heart neon-magenta pulse"></i>
<!-- Pulsing -->
<i class="ni ni-star neon-yellow glow"></i>
<!-- Intense glow -->
<i class="ni ni-zap neon-orange flicker"></i>
<!-- Neon flicker -->
<i class="ni ni-settings neon-cyan spin"></i>
<!-- Rotating -->
<i class="ni ni-bell neon-purple bounce"></i>
<!-- Bouncing -->
```

---

## 🎯 Icon Categories

| Category          | Icons                                   | Default Color |
| ----------------- | --------------------------------------- | ------------- |
| **UI/Navigation** | home, user, settings, search, menu      | Cyan          |
| **Communication** | mail, message, phone, bell, send        | Magenta       |
| **Actions**       | check, plus, download, upload, save     | Green         |
| **Media**         | play, pause, volume, camera, image      | Orange        |
| **Social**        | heart, star, share, bookmark, thumbs-up | Purple        |
| **Alerts**        | alert, info, help, lightbulb, zap       | Yellow        |
| **Danger**        | x, trash, lock, shield, ban             | Red           |
| **Tech**          | code, terminal, database, server, cpu   | Cyan/Magenta  |
| **Social Media**  | github, twitter, instagram, youtube     | Various       |
| **E-commerce**    | shopping-cart, credit-card, dollar, tag | Green         |

---

## 🌙 Dark Mode Recommendation

```css
body {
  background: #0a0a0f;
}

/* Or with gradient */
body {
  background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 100%);
}
```

---

## 🤝 Contributing

Contributions are welcome! See our [contributing guide](CONTRIBUTING.md).

1. Fork the repository
2. Create a branch (`git checkout -b feature/new-icon`)
3. Add your icon to `icons.js`
4. Commit (`git commit -m 'Add X icon'`)
5. Push (`git push origin feature/new-icon`)
6. Open a Pull Request

---

## 📝 License

MIT License - Free for personal and commercial use.

---

## ⭐ Support the Project

If you like Neon Icons, give us a star! ⭐

[![GitHub stars](https://img.shields.io/github/stars/yefferking/IconsNeon?style=social)](https://github.com/yefferking/IconsNeon)

---

## 🔗 Links

- 🌐 **Demo**: [yefferking.github.io/IconsNeon](https://yefferking.github.io/IconsNeon)
- 📦 **NPM**: [neon-icons-library](https://www.npmjs.com/package/neon-icons-library)
- 🐙 **GitHub**: [YefferKing/IconsNeon](https://github.com/yefferking/IconsNeon)
- 📚 **CDN**: [jsDelivr](https://www.jsdelivr.com/package/gh/yefferking/IconsNeon)

---

**Made with ⚡ by [YefferKing](https://github.com/YefferKing)**

#neonicons #svgicons #darkmode #webdev #opensource #icons #freeicons