# HackerNoon's Pixel Icon Library
Introducing [HackerNoon’s Pixel Icon Library (now available as a standalone site @ PixelIconLibrary.com)](https://pixeliconlibrary.com), an open-source collection of 2300+ Pixelated Icons. Meticulously designed on a 24px grid, ensuring perfect alignment and consistency to enrich your web/app/product/page/life experience. Inspired by HackerNoon’s retro design vibe, these icons capture the essence of the internet's good old days.
## What’s in the Pixel Icon Library?
- 560+ Unique Pixelated Vector Icons.
- 4 variations per icon to better match your project aesthetic.
- Light SVG Files.
- PNG files in 12px, 16 px, 24px, and 48px for both Light/Dark Mode.
- Multiple Ways to Use - [Install via NPM Package](https://www.npmjs.com/package/@hackernoon/pixel-icon-library), Directly via HTML & CSS, and [via a Figma component library](https://www.figma.com/community/file/1278952394341234192/pixel-icon-library-1440-pixelated-icons-by-hackernoon).
## Usage
### HTML Image
Using the `` element directly in your HTML file.
```html
```
### Inline HTML
You can paste the content of the icon file directly into your HTML code to display it on the page using the `` tag.
```html
// Add your SVG code here
```
### CSS
Instead of using an HTML `` element, you can use CSS instead and apply it as a background to any other element.
```css
body {
background-image: url(path/to/icon.svg);
}
```
### SVG as an object
You can also use the `
```
### Inline HTML
You can paste the content of the icon file directly into your HTML code to display it on the page using the `` tag.
```html
// Add your SVG code here
```
### CSS
Instead of using an HTML `