@hackernoon/pixel-icon-library
Version:
Pixel Icon Library is meticulously designed on a 24px grid to give your project the perfectly pixelated vibe. Inspired by (and in use on) HackerNoon.com’s retro design vibe, these icons capture the essence of the internet's good old days. Open source and
117 lines (76 loc) • 3.84 kB
Markdown
# 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 `<img />` element directly in your HTML file.
```html
<img src="path/to/icon.svg" alt="icon title" />
```
### Inline HTML
You can paste the content of the icon file directly into your HTML code to display it on the page using the `<svg> </svg>` tag.
```html
<body>
// Add your SVG code here
</body>
```
### CSS
Instead of using an HTML `<img />` 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 `<object>` tag to add the SVG to your page
```html
<object data="path/to/icon.svg" width="24" height="24"> </object>
```
### Using <iframe>
Keep in mind that using iframe is not recommended, because its hard to maintain
```html
<iframe src="path/to/icon.svg"> </iframe>
```
### SVG as embed
Most of the modern browsers have deprecated plugins, so this is not recommended.
```html
<embed src="path/to/icon.svg" />
```
### Figma
HackerNoon’s Pixel Icon Library is available as a [Figma Community File](https://www.figma.com/community/file/1278952394341234192/Pixel-Icon-Library-%7C-120%2B-Pixelated-Icons-By-HackerNoon). To use the components, log in to your Figma account and duplicate the file to your drafts.
## [Installation via NPM Package](https://www.npmjs.com/package/@hackernoon/pixel-icon-library)
### Installing NPM Package
```bash
npm i @hackernoon/pixel-icon-library
```
### Importing CSS Classes
```html
<link rel="stylesheet" href="path/to/@hackernoon/pixel-icon-library/fonts/iconfont.css">
```
### Displaying An Icon
```html
<i class="hn hn-icon-name"></i>
```
### React
```jsx
import '@hackernoon/pixel-icon-library/fonts/iconfont.css';
const MyComponent = () => (
<i className="hn hn-icon-name" />
);
```
# License (Free | Starter | Pro)
- The icons (.svg/.png) files are free to download and are licensed under CC 4.0
- By downloading, it is assumed that you agree with the terms mentioned in CC 4.0.
- You must give appropriate credit, provide a link to the license, and indicate if changes were made.
- Other files in the repository which are not icons, are licensed under the MIT License.
### Don't want to attribute? [Consider buying a license plan](https://pixeliconlibrary.com/license/).
# Contribution
For more info on how to contribute please check our [Contribution Guidelines](https://github.com/hackernoon/pixelated-site-icons/blob/main/CONTRIBUTING.md)
# Learn More @ [PixelIconLibrary.com](https://pixeliconlibrary.com)
**Designed with 💚 by Designers at [HackerNoon](https://hackernoon.com)**