Repository: hackernoon/pixel-icon-library
Branch: main
Commit: 771bffdea24f
Files: 10
Total size: 36.0 KB

Directory structure:
gitextract_gkn37bcn/

├── .github/
│   └── ISSUE_TEMPLATE/
│       └── icon-request.md
├── .gitignore
├── .nojekyll
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── fonts/
│   └── iconfont.css
├── package.json
└── scripts/
    ├── css.hbs
    └── generate.js

================================================
FILE CONTENTS
================================================

================================================
FILE: .github/ISSUE_TEMPLATE/icon-request.md
================================================
---
name: Icon Request
about: Template for Requesting a New Icon
title: "[Icon Request: Name of the Icon]"
labels: ""
assignees: ""
---

**Name of the Icon along with a Brief Description**
Please add the name & a clear description of the icon requested.

**Describe the possible use cases for the Icon**
Please add a short description of all possible use cases for the icon.

**Any other info that you'd like to add to the Icon Description**

**Additional context**
Add any File/Screenshot for the Icon here.


================================================
FILE: .gitignore
================================================
node_modules


================================================
FILE: .nojekyll
================================================



================================================
FILE: CONTRIBUTING.md
================================================
# Contribution Guidelines

Thanks for taking the time to contribute! 💚
These are some guidelines for contributing to HackerNoon Pixel Icon Library -

## For Pull Requests:

- You can create a Pull Request containing your icon(s) along with a short description.
- Include as much information as you can in the Commit Message.
- Document your pull request. Explain the use case/need when adding new icons.
- Make sure to create the pull request in a relevant branch.

## For New Icon Requests:

- Before you create a new icon request, please check if someone has requested the icon already.
- If so, please add a ❤️.
- If not, create an issue with the title: Icon Request: <icon name> using our Icon Request Issue Template.
- Please include as much information as possible!


================================================
FILE: LICENSE
================================================
MIT License

Copyright (c) 2023 HackerNoon

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


================================================
FILE: README.md
================================================
![Github Cover](https://github.com/user-attachments/assets/dffe651b-8d74-40df-8fbd-5e71f10a0873)


# 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?

- 578 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)**


================================================
FILE: fonts/iconfont.css
================================================
@font-face {
	font-family: "iconfont";
	src: url("./iconfont.eot?a39ec1eff0e45e5d724d24255ba47ade#iefix") format("embedded-opentype"),
url("./iconfont.woff2?a39ec1eff0e45e5d724d24255ba47ade") format("woff2"),
url("./iconfont.woff?a39ec1eff0e45e5d724d24255ba47ade") format("woff"),
url("./iconfont.ttf?a39ec1eff0e45e5d724d24255ba47ade") format("truetype"),
url("./iconfont.svg?a39ec1eff0e45e5d724d24255ba47ade#iconfont") format("svg");
}

.hn {
	line-height: 1;
}

.hn:before {
	font-family: iconfont !important;
	font-style: normal;
	font-weight: normal !important;
	vertical-align: top;
}

.hn-algolia:before {
	content: "\f101";
}
.hn-android:before {
	content: "\f102";
}
.hn-angellist:before {
	content: "\f103";
}
.hn-anthropic:before {
	content: "\f104";
}
.hn-apple:before {
	content: "\f105";
}
.hn-arweave:before {
	content: "\f106";
}
.hn-behance:before {
	content: "\f107";
}
.hn-bitcoin:before {
	content: "\f108";
}
.hn-bloomberg:before {
	content: "\f109";
}
.hn-bluesky:before {
	content: "\f10a";
}
.hn-cloudflare:before {
	content: "\f10b";
}
.hn-creative-commons:before {
	content: "\f10c";
}
.hn-crunchbase:before {
	content: "\f10d";
}
.hn-digg:before {
	content: "\f10e";
}
.hn-discord:before {
	content: "\f10f";
}
.hn-discourse:before {
	content: "\f110";
}
.hn-ethereum:before {
	content: "\f111";
}
.hn-facebook-round:before {
	content: "\f112";
}
.hn-facebook-square:before {
	content: "\f113";
}
.hn-figma:before {
	content: "\f114";
}
.hn-giphy:before {
	content: "\f115";
}
.hn-github:before {
	content: "\f116";
}
.hn-gitlab:before {
	content: "\f117";
}
.hn-golden:before {
	content: "\f118";
}
.hn-google-news:before {
	content: "\f119";
}
.hn-google:before {
	content: "\f11a";
}
.hn-hackernoon:before {
	content: "\f11b";
}
.hn-huggingface:before {
	content: "\f11c";
}
.hn-imgur:before {
	content: "\f11d";
}
.hn-instagram:before {
	content: "\f11e";
}
.hn-ios:before {
	content: "\f11f";
}
.hn-kaggle:before {
	content: "\f120";
}
.hn-linkedin:before {
	content: "\f121";
}
.hn-mastodon:before {
	content: "\f122";
}
.hn-minds:before {
	content: "\f123";
}
.hn-mistral:before {
	content: "\f124";
}
.hn-newsbreak:before {
	content: "\f125";
}
.hn-notion:before {
	content: "\f126";
}
.hn-npm:before {
	content: "\f127";
}
.hn-open-ai:before {
	content: "\f128";
}
.hn-perplexity:before {
	content: "\f129";
}
.hn-pinterest:before {
	content: "\f12a";
}
.hn-podcasts:before {
	content: "\f12b";
}
.hn-product-hunt:before {
	content: "\f12c";
}
.hn-reddit:before {
	content: "\f12d";
}
.hn-rss:before {
	content: "\f12e";
}
.hn-sia:before {
	content: "\f12f";
}
.hn-slack:before {
	content: "\f130";
}
.hn-steam:before {
	content: "\f131";
}
.hn-telegram:before {
	content: "\f132";
}
.hn-threads:before {
	content: "\f133";
}
.hn-tiktok:before {
	content: "\f134";
}
.hn-twitch:before {
	content: "\f135";
}
.hn-twitter:before {
	content: "\f136";
}
.hn-unsplash:before {
	content: "\f137";
}
.hn-viewblocks:before {
	content: "\f138";
}
.hn-wikipedia:before {
	content: "\f139";
}
.hn-x:before {
	content: "\f13a";
}
.hn-youtube:before {
	content: "\f13b";
}
.hn-business:before {
	content: "\f13c";
}
.hn-cloud:before {
	content: "\f13d";
}
.hn-cybersecurity:before {
	content: "\f13e";
}
.hn-data-science:before {
	content: "\f13f";
}
.hn-finance:before {
	content: "\f140";
}
.hn-futurism:before {
	content: "\f141";
}
.hn-gaming:before {
	content: "\f142";
}
.hn-hackernoon-purcat:before {
	content: "\f143";
}
.hn-life-hacking:before {
	content: "\f144";
}
.hn-machine-learning:before {
	content: "\f145";
}
.hn-management:before {
	content: "\f146";
}
.hn-media:before {
	content: "\f147";
}
.hn-product-management:before {
	content: "\f148";
}
.hn-programming:before {
	content: "\f149";
}
.hn-remote:before {
	content: "\f14a";
}
.hn-science:before {
	content: "\f14b";
}
.hn-society:before {
	content: "\f14c";
}
.hn-startups:before {
	content: "\f14d";
}
.hn-tech-companies:before {
	content: "\f14e";
}
.hn-tech-stories:before {
	content: "\f14f";
}
.hn-technology:before {
	content: "\f150";
}
.hn-web3:before {
	content: "\f151";
}
.hn-writing:before {
	content: "\f152";
}
.hn-ad:before {
	content: "\f153";
}
.hn-align-center:before {
	content: "\f154";
}
.hn-align-justify:before {
	content: "\f155";
}
.hn-align-left:before {
	content: "\f156";
}
.hn-align-right:before {
	content: "\f157";
}
.hn-analytics:before {
	content: "\f158";
}
.hn-angle-down:before {
	content: "\f159";
}
.hn-angle-left:before {
	content: "\f15a";
}
.hn-angle-right:before {
	content: "\f15b";
}
.hn-angle-up:before {
	content: "\f15c";
}
.hn-archive:before {
	content: "\f15d";
}
.hn-arrow-alt-circle-down:before {
	content: "\f15e";
}
.hn-arrow-alt-circle-left:before {
	content: "\f15f";
}
.hn-arrow-alt-circle-right:before {
	content: "\f160";
}
.hn-arrow-alt-circle-up:before {
	content: "\f161";
}
.hn-arrow-circle-down:before {
	content: "\f162";
}
.hn-arrow-circle-left:before {
	content: "\f163";
}
.hn-arrow-circle-right:before {
	content: "\f164";
}
.hn-arrow-circle-up:before {
	content: "\f165";
}
.hn-arrow-down:before {
	content: "\f166";
}
.hn-arrow-left:before {
	content: "\f167";
}
.hn-arrow-right:before {
	content: "\f168";
}
.hn-arrow-up:before {
	content: "\f169";
}
.hn-at:before {
	content: "\f16a";
}
.hn-badge-check:before {
	content: "\f16b";
}
.hn-bank:before {
	content: "\f16c";
}
.hn-bars:before {
	content: "\f16d";
}
.hn-bell-exclaimation:before {
	content: "\f16e";
}
.hn-bell-mute:before {
	content: "\f16f";
}
.hn-bell:before {
	content: "\f170";
}
.hn-bold:before {
	content: "\f171";
}
.hn-bolt:before {
	content: "\f172";
}
.hn-book-bookmark:before {
	content: "\f173";
}
.hn-book-heart:before {
	content: "\f174";
}
.hn-book:before {
	content: "\f175";
}
.hn-bookmark:before {
	content: "\f176";
}
.hn-box-heart:before {
	content: "\f177";
}
.hn-box-usd:before {
	content: "\f178";
}
.hn-bracket-curly:before {
	content: "\f179";
}
.hn-bracket-round:before {
	content: "\f17a";
}
.hn-bracket-square:before {
	content: "\f17b";
}
.hn-branch:before {
	content: "\f17c";
}
.hn-briefcase:before {
	content: "\f17d";
}
.hn-brightness-high:before {
	content: "\f17e";
}
.hn-brightness-low:before {
	content: "\f17f";
}
.hn-broom:before {
	content: "\f180";
}
.hn-bug:before {
	content: "\f181";
}
.hn-bullet-list:before {
	content: "\f182";
}
.hn-bullhorn:before {
	content: "\f183";
}
.hn-calendar-alt:before {
	content: "\f184";
}
.hn-calender:before {
	content: "\f185";
}
.hn-camera:before {
	content: "\f186";
}
.hn-cart-add:before {
	content: "\f187";
}
.hn-cart-minus:before {
	content: "\f188";
}
.hn-cassette-tape:before {
	content: "\f189";
}
.hn-cc:before {
	content: "\f18a";
}
.hn-chart-line:before {
	content: "\f18b";
}
.hn-chart-network:before {
	content: "\f18c";
}
.hn-check-box:before {
	content: "\f18d";
}
.hn-check-circle:before {
	content: "\f18e";
}
.hn-check-list:before {
	content: "\f18f";
}
.hn-check:before {
	content: "\f190";
}
.hn-chevron-down:before {
	content: "\f191";
}
.hn-chevron-up:before {
	content: "\f192";
}
.hn-circle-notch:before {
	content: "\f193";
}
.hn-clipboard:before {
	content: "\f194";
}
.hn-clock:before {
	content: "\f195";
}
.hn-cloud-download-alt:before {
	content: "\f196";
}
.hn-cloud-fog:before {
	content: "\f197";
}
.hn-cloud-rain:before {
	content: "\f198";
}
.hn-cloud-upload:before {
	content: "\f199";
}
.hn-code-block:before {
	content: "\f19a";
}
.hn-code:before {
	content: "\f19b";
}
.hn-cog:before {
	content: "\f19c";
}
.hn-coin:before {
	content: "\f19d";
}
.hn-coins:before {
	content: "\f19e";
}
.hn-collapse:before {
	content: "\f19f";
}
.hn-command:before {
	content: "\f1a0";
}
.hn-comment-dots:before {
	content: "\f1a1";
}
.hn-comment-quote:before {
	content: "\f1a2";
}
.hn-comment:before {
	content: "\f1a3";
}
.hn-comments:before {
	content: "\f1a4";
}
.hn-copy:before {
	content: "\f1a5";
}
.hn-credit-card:before {
	content: "\f1a6";
}
.hn-crown:before {
	content: "\f1a7";
}
.hn-disc:before {
	content: "\f1a8";
}
.hn-divider:before {
	content: "\f1a9";
}
.hn-dollar:before {
	content: "\f1aa";
}
.hn-door-closed:before {
	content: "\f1ab";
}
.hn-door-open:before {
	content: "\f1ac";
}
.hn-download-alt:before {
	content: "\f1ad";
}
.hn-download:before {
	content: "\f1ae";
}
.hn-edit:before {
	content: "\f1af";
}
.hn-ellipses-horizontal-circle:before {
	content: "\f1b0";
}
.hn-ellipses-horizontal:before {
	content: "\f1b1";
}
.hn-ellipses-vertical-circle:before {
	content: "\f1b2";
}
.hn-ellipses-vertical:before {
	content: "\f1b3";
}
.hn-envelope:before {
	content: "\f1b4";
}
.hn-exclaimation:before {
	content: "\f1b5";
}
.hn-exclamation-triangle:before {
	content: "\f1b6";
}
.hn-expand:before {
	content: "\f1b7";
}
.hn-external-link:before {
	content: "\f1b8";
}
.hn-eye-cross:before {
	content: "\f1b9";
}
.hn-eye-snake:before {
	content: "\f1ba";
}
.hn-eye:before {
	content: "\f1bb";
}
.hn-face-angry:before {
	content: "\f1bc";
}
.hn-face-grin:before {
	content: "\f1bd";
}
.hn-face-heart-eyes:before {
	content: "\f1be";
}
.hn-face-laugh-squint:before {
	content: "\f1bf";
}
.hn-face-sad:before {
	content: "\f1c0";
}
.hn-face-thinking:before {
	content: "\f1c1";
}
.hn-file-import:before {
	content: "\f1c2";
}
.hn-filter-alt-circle:before {
	content: "\f1c3";
}
.hn-filter:before {
	content: "\f1c4";
}
.hn-fire:before {
	content: "\f1c5";
}
.hn-flag-checkered:before {
	content: "\f1c6";
}
.hn-flag:before {
	content: "\f1c7";
}
.hn-folder-open:before {
	content: "\f1c8";
}
.hn-folder:before {
	content: "\f1c9";
}
.hn-fork:before {
	content: "\f1ca";
}
.hn-glasses:before {
	content: "\f1cb";
}
.hn-globe-americas:before {
	content: "\f1cc";
}
.hn-globe:before {
	content: "\f1cd";
}
.hn-graduation-cap:before {
	content: "\f1ce";
}
.hn-grid:before {
	content: "\f1cf";
}
.hn-h1:before {
	content: "\f1d0";
}
.hn-h2:before {
	content: "\f1d1";
}
.hn-h3:before {
	content: "\f1d2";
}
.hn-handshake:before {
	content: "\f1d3";
}
.hn-hashtag:before {
	content: "\f1d4";
}
.hn-headphones:before {
	content: "\f1d5";
}
.hn-heart:before {
	content: "\f1d6";
}
.hn-highlight:before {
	content: "\f1d7";
}
.hn-hockey-mask:before {
	content: "\f1d8";
}
.hn-home:before {
	content: "\f1d9";
}
.hn-image:before {
	content: "\f1da";
}
.hn-indent:before {
	content: "\f1db";
}
.hn-info-circle:before {
	content: "\f1dc";
}
.hn-italics:before {
	content: "\f1dd";
}
.hn-laptop-code:before {
	content: "\f1de";
}
.hn-laptop:before {
	content: "\f1df";
}
.hn-lightbulb:before {
	content: "\f1e0";
}
.hn-line-height:before {
	content: "\f1e1";
}
.hn-link:before {
	content: "\f1e2";
}
.hn-location-pin:before {
	content: "\f1e3";
}
.hn-lock-alt:before {
	content: "\f1e4";
}
.hn-lock-open:before {
	content: "\f1e5";
}
.hn-lock:before {
	content: "\f1e6";
}
.hn-login:before {
	content: "\f1e7";
}
.hn-logout:before {
	content: "\f1e8";
}
.hn-medical-house:before {
	content: "\f1e9";
}
.hn-merge:before {
	content: "\f1ea";
}
.hn-message-dots:before {
	content: "\f1eb";
}
.hn-message:before {
	content: "\f1ec";
}
.hn-minus:before {
	content: "\f1ed";
}
.hn-moon:before {
	content: "\f1ee";
}
.hn-music:before {
	content: "\f1ef";
}
.hn-newspaper:before {
	content: "\f1f0";
}
.hn-notebook:before {
	content: "\f1f1";
}
.hn-numbered-list:before {
	content: "\f1f2";
}
.hn-octagon-check:before {
	content: "\f1f3";
}
.hn-octagon-times:before {
	content: "\f1f4";
}
.hn-outdent:before {
	content: "\f1f5";
}
.hn-page-break:before {
	content: "\f1f6";
}
.hn-paint-brush:before {
	content: "\f1f7";
}
.hn-paperclip:before {
	content: "\f1f8";
}
.hn-paragraph:before {
	content: "\f1f9";
}
.hn-pause:before {
	content: "\f1fa";
}
.hn-pc:before {
	content: "\f1fb";
}
.hn-pen-nib:before {
	content: "\f1fc";
}
.hn-pen:before {
	content: "\f1fd";
}
.hn-pencil-ruler:before {
	content: "\f1fe";
}
.hn-pencil:before {
	content: "\f1ff";
}
.hn-people-carry:before {
	content: "\f200";
}
.hn-phone-ringing-high:before {
	content: "\f201";
}
.hn-phone-ringing-low:before {
	content: "\f202";
}
.hn-plane-departure:before {
	content: "\f203";
}
.hn-plane:before {
	content: "\f204";
}
.hn-play:before {
	content: "\f205";
}
.hn-playlist:before {
	content: "\f206";
}
.hn-plus:before {
	content: "\f207";
}
.hn-print:before {
	content: "\f208";
}
.hn-pro:before {
	content: "\f209";
}
.hn-pull-request:before {
	content: "\f20a";
}
.hn-question-circle:before {
	content: "\f20b";
}
.hn-question:before {
	content: "\f20c";
}
.hn-quote-left:before {
	content: "\f20d";
}
.hn-quote-right:before {
	content: "\f20e";
}
.hn-receipt:before {
	content: "\f20f";
}
.hn-refresh:before {
	content: "\f210";
}
.hn-retro-camera:before {
	content: "\f211";
}
.hn-retro-pc:before {
	content: "\f212";
}
.hn-robot:before {
	content: "\f213";
}
.hn-save:before {
	content: "\f214";
}
.hn-search:before {
	content: "\f215";
}
.hn-seedlings:before {
	content: "\f216";
}
.hn-shapes:before {
	content: "\f217";
}
.hn-share-alt:before {
	content: "\f218";
}
.hn-share:before {
	content: "\f219";
}
.hn-shop:before {
	content: "\f21a";
}
.hn-shopping-cart:before {
	content: "\f21b";
}
.hn-shuffle:before {
	content: "\f21c";
}
.hn-side-nav-collapse:before {
	content: "\f21d";
}
.hn-side-nav-expand:before {
	content: "\f21e";
}
.hn-sitemap:before {
	content: "\f21f";
}
.hn-sort:before {
	content: "\f220";
}
.hn-sound-mute:before {
	content: "\f221";
}
.hn-sound-on:before {
	content: "\f222";
}
.hn-sparkles:before {
	content: "\f223";
}
.hn-spinner-third:before {
	content: "\f224";
}
.hn-spinner:before {
	content: "\f225";
}
.hn-star-crescent:before {
	content: "\f226";
}
.hn-star:before {
	content: "\f227";
}
.hn-strike-through:before {
	content: "\f228";
}
.hn-sun:before {
	content: "\f229";
}
.hn-table:before {
	content: "\f22a";
}
.hn-tag:before {
	content: "\f22b";
}
.hn-text-slash:before {
	content: "\f22c";
}
.hn-themes:before {
	content: "\f22d";
}
.hn-thumbsdown:before {
	content: "\f22e";
}
.hn-thumbsup:before {
	content: "\f22f";
}
.hn-thumbtack:before {
	content: "\f230";
}
.hn-times-circle:before {
	content: "\f231";
}
.hn-times-square:before {
	content: "\f232";
}
.hn-times:before {
	content: "\f233";
}
.hn-translate:before {
	content: "\f234";
}
.hn-trash-alt:before {
	content: "\f235";
}
.hn-trash:before {
	content: "\f236";
}
.hn-trending:before {
	content: "\f237";
}
.hn-trophy:before {
	content: "\f238";
}
.hn-underline:before {
	content: "\f239";
}
.hn-unlock-alt:before {
	content: "\f23a";
}
.hn-unlock:before {
	content: "\f23b";
}
.hn-upload-alt:before {
	content: "\f23c";
}
.hn-upload:before {
	content: "\f23d";
}
.hn-user-check:before {
	content: "\f23e";
}
.hn-user-headset:before {
	content: "\f23f";
}
.hn-user-minus:before {
	content: "\f240";
}
.hn-user-plus:before {
	content: "\f241";
}
.hn-user:before {
	content: "\f242";
}
.hn-users-crown:before {
	content: "\f243";
}
.hn-users:before {
	content: "\f244";
}
.hn-video-camera:before {
	content: "\f245";
}
.hn-vote-yeah:before {
	content: "\f246";
}
.hn-wallet:before {
	content: "\f247";
}
.hn-wifi:before {
	content: "\f248";
}
.hn-window-close:before {
	content: "\f249";
}
.hn-window-restore:before {
	content: "\f24a";
}
.hn-ad-solid:before {
	content: "\f24b";
}
.hn-align-center-solid:before {
	content: "\f24c";
}
.hn-align-justify-solid:before {
	content: "\f24d";
}
.hn-align-left-solid:before {
	content: "\f24e";
}
.hn-align-right-solid:before {
	content: "\f24f";
}
.hn-analytics-solid:before {
	content: "\f250";
}
.hn-angle-down-solid:before {
	content: "\f251";
}
.hn-angle-left-solid:before {
	content: "\f252";
}
.hn-angle-right-solid:before {
	content: "\f253";
}
.hn-angle-up-solid:before {
	content: "\f254";
}
.hn-archive-solid:before {
	content: "\f255";
}
.hn-arrow-alt-circle-down-solid:before {
	content: "\f256";
}
.hn-arrow-alt-circle-left-solid:before {
	content: "\f257";
}
.hn-arrow-alt-circle-right-solid:before {
	content: "\f258";
}
.hn-arrow-alt-circle-up-solid:before {
	content: "\f259";
}
.hn-arrow-circle-down-solid:before {
	content: "\f25a";
}
.hn-arrow-circle-left-solid:before {
	content: "\f25b";
}
.hn-arrow-circle-right-solid:before {
	content: "\f25c";
}
.hn-arrow-circle-up-solid:before {
	content: "\f25d";
}
.hn-arrow-down-solid:before {
	content: "\f25e";
}
.hn-arrow-left-solid:before {
	content: "\f25f";
}
.hn-arrow-right-solid:before {
	content: "\f260";
}
.hn-arrow-up-solid:before {
	content: "\f261";
}
.hn-at-solid:before {
	content: "\f262";
}
.hn-badge-check-solid:before {
	content: "\f263";
}
.hn-bank-solid:before {
	content: "\f264";
}
.hn-bars-solid:before {
	content: "\f265";
}
.hn-bell-exclaimation-solid:before {
	content: "\f266";
}
.hn-bell-mute-solid:before {
	content: "\f267";
}
.hn-bell-solid:before {
	content: "\f268";
}
.hn-bold-solid:before {
	content: "\f269";
}
.hn-bolt-solid:before {
	content: "\f26a";
}
.hn-book-bookmark-solid:before {
	content: "\f26b";
}
.hn-book-heart-solid:before {
	content: "\f26c";
}
.hn-book-solid:before {
	content: "\f26d";
}
.hn-bookmark-solid:before {
	content: "\f26e";
}
.hn-box-heart-solid:before {
	content: "\f26f";
}
.hn-box-usd-solid:before {
	content: "\f270";
}
.hn-bracket-curly-solid:before {
	content: "\f271";
}
.hn-bracket-round-solid:before {
	content: "\f272";
}
.hn-bracket-square-solid:before {
	content: "\f273";
}
.hn-branch-solid:before {
	content: "\f274";
}
.hn-briefcase-solid:before {
	content: "\f275";
}
.hn-brightness-high-solid:before {
	content: "\f276";
}
.hn-brightness-low-solid:before {
	content: "\f277";
}
.hn-broom-solid:before {
	content: "\f278";
}
.hn-bug-solid:before {
	content: "\f279";
}
.hn-bullet-list-solid:before {
	content: "\f27a";
}
.hn-bullhorn-solid:before {
	content: "\f27b";
}
.hn-calendar-alt-solid:before {
	content: "\f27c";
}
.hn-calender-solid:before {
	content: "\f27d";
}
.hn-camera-solid:before {
	content: "\f27e";
}
.hn-cart-add-solid:before {
	content: "\f27f";
}
.hn-cart-minus-solid:before {
	content: "\f280";
}
.hn-cassette-tape-solid:before {
	content: "\f281";
}
.hn-cc-solid:before {
	content: "\f282";
}
.hn-chart-line-solid:before {
	content: "\f283";
}
.hn-chart-network-solid:before {
	content: "\f284";
}
.hn-check-box-solid:before {
	content: "\f285";
}
.hn-check-circle-solid:before {
	content: "\f286";
}
.hn-check-list-solid:before {
	content: "\f287";
}
.hn-check-solid:before {
	content: "\f288";
}
.hn-chevron-down-solid:before {
	content: "\f289";
}
.hn-chevron-up-solid:before {
	content: "\f28a";
}
.hn-circle-notch-solid:before {
	content: "\f28b";
}
.hn-clipboard-solid:before {
	content: "\f28c";
}
.hn-clock-solid:before {
	content: "\f28d";
}
.hn-cloud-download-solid:before {
	content: "\f28e";
}
.hn-cloud-fog-solid:before {
	content: "\f28f";
}
.hn-cloud-rain-solid:before {
	content: "\f290";
}
.hn-cloud-upload-solid:before {
	content: "\f291";
}
.hn-code-block-solid:before {
	content: "\f292";
}
.hn-code-solid:before {
	content: "\f293";
}
.hn-cog-solid:before {
	content: "\f294";
}
.hn-coin-solid:before {
	content: "\f295";
}
.hn-coins-solid:before {
	content: "\f296";
}
.hn-collapse-solid:before {
	content: "\f297";
}
.hn-command-solid:before {
	content: "\f298";
}
.hn-comment-dots-solid:before {
	content: "\f299";
}
.hn-comment-quote-solid:before {
	content: "\f29a";
}
.hn-comment-solid:before {
	content: "\f29b";
}
.hn-comments-solid:before {
	content: "\f29c";
}
.hn-copy-solid:before {
	content: "\f29d";
}
.hn-credit-card-solid:before {
	content: "\f29e";
}
.hn-crown-solid:before {
	content: "\f29f";
}
.hn-disc-solid:before {
	content: "\f2a0";
}
.hn-divider-solid:before {
	content: "\f2a1";
}
.hn-dollar-solid:before {
	content: "\f2a2";
}
.hn-door-closed-solid:before {
	content: "\f2a3";
}
.hn-door-open-solid:before {
	content: "\f2a4";
}
.hn-download-alt-solid:before {
	content: "\f2a5";
}
.hn-download-solid:before {
	content: "\f2a6";
}
.hn-edit-solid:before {
	content: "\f2a7";
}
.hn-ellipses-horizontal-circle-solid:before {
	content: "\f2a8";
}
.hn-ellipses-horizontal-solid:before {
	content: "\f2a9";
}
.hn-ellipses-vertical-circle-solid:before {
	content: "\f2aa";
}
.hn-ellipses-vertical-solid:before {
	content: "\f2ab";
}
.hn-envelope-solid:before {
	content: "\f2ac";
}
.hn-exclaimation-solid:before {
	content: "\f2ad";
}
.hn-exclamation-triangle-solid:before {
	content: "\f2ae";
}
.hn-expand-solid:before {
	content: "\f2af";
}
.hn-external-link-solid:before {
	content: "\f2b0";
}
.hn-eye-cross-solid:before {
	content: "\f2b1";
}
.hn-eye-snake-solid:before {
	content: "\f2b2";
}
.hn-eye-solid:before {
	content: "\f2b3";
}
.hn-face-angry-solid:before {
	content: "\f2b4";
}
.hn-face-grin-solid:before {
	content: "\f2b5";
}
.hn-face-heart-eyes-solid:before {
	content: "\f2b6";
}
.hn-face-laugh-squint-solid:before {
	content: "\f2b7";
}
.hn-face-sad-solid:before {
	content: "\f2b8";
}
.hn-face-thinking-solid:before {
	content: "\f2b9";
}
.hn-file-import-solid:before {
	content: "\f2ba";
}
.hn-filter-alt-circle-solid:before {
	content: "\f2bb";
}
.hn-filter-solid:before {
	content: "\f2bc";
}
.hn-fire-solid:before {
	content: "\f2bd";
}
.hn-flag-checkered-solid:before {
	content: "\f2be";
}
.hn-flag-solid:before {
	content: "\f2bf";
}
.hn-folder-open-solid:before {
	content: "\f2c0";
}
.hn-folder-solid:before {
	content: "\f2c1";
}
.hn-fork-solid:before {
	content: "\f2c2";
}
.hn-glasses-solid:before {
	content: "\f2c3";
}
.hn-globe-americas-solid:before {
	content: "\f2c4";
}
.hn-globe-solid:before {
	content: "\f2c5";
}
.hn-graduation-cap-solid:before {
	content: "\f2c6";
}
.hn-grid-solid:before {
	content: "\f2c7";
}
.hn-handshake-solid:before {
	content: "\f2c8";
}
.hn-hashtag-solid:before {
	content: "\f2c9";
}
.hn-heading-1-solid:before {
	content: "\f2ca";
}
.hn-heading-2-solid:before {
	content: "\f2cb";
}
.hn-heading-3-solid:before {
	content: "\f2cc";
}
.hn-headphones-solid:before {
	content: "\f2cd";
}
.hn-heart-solid:before {
	content: "\f2ce";
}
.hn-highlight-solid:before {
	content: "\f2cf";
}
.hn-hockey-mask-solid:before {
	content: "\f2d0";
}
.hn-home-solid:before {
	content: "\f2d1";
}
.hn-image-solid:before {
	content: "\f2d2";
}
.hn-indent-solid:before {
	content: "\f2d3";
}
.hn-info-circle-solid:before {
	content: "\f2d4";
}
.hn-italics-solid:before {
	content: "\f2d5";
}
.hn-laptop-code-solid:before {
	content: "\f2d6";
}
.hn-laptop-solid:before {
	content: "\f2d7";
}
.hn-lightbulb-solid:before {
	content: "\f2d8";
}
.hn-line-height-solid:before {
	content: "\f2d9";
}
.hn-link-solid:before {
	content: "\f2da";
}
.hn-location-pin-solid:before {
	content: "\f2db";
}
.hn-lock-alt-solid:before {
	content: "\f2dc";
}
.hn-lock-open-solid:before {
	content: "\f2dd";
}
.hn-lock-solid:before {
	content: "\f2de";
}
.hn-login-solid:before {
	content: "\f2df";
}
.hn-logout-solid:before {
	content: "\f2e0";
}
.hn-medical-house-solid:before {
	content: "\f2e1";
}
.hn-merge-solid:before {
	content: "\f2e2";
}
.hn-message-dots-solid:before {
	content: "\f2e3";
}
.hn-message-solid:before {
	content: "\f2e4";
}
.hn-minus-solid:before {
	content: "\f2e5";
}
.hn-moon-solid:before {
	content: "\f2e6";
}
.hn-music-solid:before {
	content: "\f2e7";
}
.hn-newspaper-solid:before {
	content: "\f2e8";
}
.hn-notebook-solid:before {
	content: "\f2e9";
}
.hn-numbered-list-solid:before {
	content: "\f2ea";
}
.hn-octagon-check-solid:before {
	content: "\f2eb";
}
.hn-octagon-times-solid:before {
	content: "\f2ec";
}
.hn-outdent-solid:before {
	content: "\f2ed";
}
.hn-page-break-solid:before {
	content: "\f2ee";
}
.hn-paint-brush-solid:before {
	content: "\f2ef";
}
.hn-paperclip-solid:before {
	content: "\f2f0";
}
.hn-paragraph-solid:before {
	content: "\f2f1";
}
.hn-pause-solid:before {
	content: "\f2f2";
}
.hn-pc-solid:before {
	content: "\f2f3";
}
.hn-pen-nib-solid:before {
	content: "\f2f4";
}
.hn-pen-solid:before {
	content: "\f2f5";
}
.hn-pencil-ruler-solid:before {
	content: "\f2f6";
}
.hn-pencil-solid:before {
	content: "\f2f7";
}
.hn-people-carry-solid:before {
	content: "\f2f8";
}
.hn-phone-ringing-high-solid:before {
	content: "\f2f9";
}
.hn-phone-ringing-low-solid:before {
	content: "\f2fa";
}
.hn-plane-departure-solid:before {
	content: "\f2fb";
}
.hn-plane-solid:before {
	content: "\f2fc";
}
.hn-play-solid:before {
	content: "\f2fd";
}
.hn-playlist-solid:before {
	content: "\f2fe";
}
.hn-plus-solid:before {
	content: "\f2ff";
}
.hn-print-solid:before {
	content: "\f300";
}
.hn-pro-solid:before {
	content: "\f301";
}
.hn-pull-request-solid:before {
	content: "\f302";
}
.hn-question-circle-solid:before {
	content: "\f303";
}
.hn-question-solid:before {
	content: "\f304";
}
.hn-quote-left-solid:before {
	content: "\f305";
}
.hn-quote-right-solid:before {
	content: "\f306";
}
.hn-receipt-solid:before {
	content: "\f307";
}
.hn-refresh-solid:before {
	content: "\f308";
}
.hn-retro-camera-solid:before {
	content: "\f309";
}
.hn-retro-pc-solid:before {
	content: "\f30a";
}
.hn-robot-solid:before {
	content: "\f30b";
}
.hn-save-solid:before {
	content: "\f30c";
}
.hn-search-solid:before {
	content: "\f30d";
}
.hn-seedlings-solid:before {
	content: "\f30e";
}
.hn-shapes-solid:before {
	content: "\f30f";
}
.hn-share-alt-solid:before {
	content: "\f310";
}
.hn-share-solid:before {
	content: "\f311";
}
.hn-shop-solid:before {
	content: "\f312";
}
.hn-shopping-cart-solid:before {
	content: "\f313";
}
.hn-shuffle-solid:before {
	content: "\f314";
}
.hn-side-nav-collapse-solid:before {
	content: "\f315";
}
.hn-side-nav-expand-solid:before {
	content: "\f316";
}
.hn-sitemap-solid:before {
	content: "\f317";
}
.hn-sort-solid:before {
	content: "\f318";
}
.hn-sound-mute-solid:before {
	content: "\f319";
}
.hn-sound-on-solid:before {
	content: "\f31a";
}
.hn-sparkles-solid:before {
	content: "\f31b";
}
.hn-spinner-solid:before {
	content: "\f31c";
}
.hn-spinner-third-solid:before {
	content: "\f31d";
}
.hn-star-crescent-solid:before {
	content: "\f31e";
}
.hn-star-solid:before {
	content: "\f31f";
}
.hn-strike-through-solid:before {
	content: "\f320";
}
.hn-sun-solid:before {
	content: "\f321";
}
.hn-table-solid:before {
	content: "\f322";
}
.hn-tag-solid:before {
	content: "\f323";
}
.hn-text-slash-solid:before {
	content: "\f324";
}
.hn-themes-solid:before {
	content: "\f325";
}
.hn-thumbsdown-solid:before {
	content: "\f326";
}
.hn-thumbsup-solid:before {
	content: "\f327";
}
.hn-thumbtack-solid:before {
	content: "\f328";
}
.hn-times-circle-solid:before {
	content: "\f329";
}
.hn-times-solid:before {
	content: "\f32a";
}
.hn-times-square-solid:before {
	content: "\f32b";
}
.hn-translate-solid:before {
	content: "\f32c";
}
.hn-trash-alt-solid:before {
	content: "\f32d";
}
.hn-trash-solid:before {
	content: "\f32e";
}
.hn-trending-solid:before {
	content: "\f32f";
}
.hn-trophy-solid:before {
	content: "\f330";
}
.hn-underline-solid:before {
	content: "\f331";
}
.hn-unlock-alt-solid:before {
	content: "\f332";
}
.hn-unlock-solid:before {
	content: "\f333";
}
.hn-upload-alt-solid:before {
	content: "\f334";
}
.hn-upload-solid:before {
	content: "\f335";
}
.hn-user-check-solid:before {
	content: "\f336";
}
.hn-user-headset-solid:before {
	content: "\f337";
}
.hn-user-minus-solid:before {
	content: "\f338";
}
.hn-user-plus-solid:before {
	content: "\f339";
}
.hn-user-solid:before {
	content: "\f33a";
}
.hn-users-crown-solid:before {
	content: "\f33b";
}
.hn-users-solid:before {
	content: "\f33c";
}
.hn-video-camera-solid:before {
	content: "\f33d";
}
.hn-vote-yeah-solid:before {
	content: "\f33e";
}
.hn-wallet-solid:before {
	content: "\f33f";
}
.hn-wifi-solid:before {
	content: "\f340";
}
.hn-window-close-solid:before {
	content: "\f341";
}
.hn-window-restore-solid:before {
	content: "\f342";
}


================================================
FILE: package.json
================================================
{
  "name": "@hackernoon/pixel-icon-library",
  "version": "1.1.0",
  "description": "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 free to use on personal and commercial projects.",
  "homepage": "https://pixeliconlibrary.com",
  "keywords": [
    "hackernoon",
    "pixelated",
    "icon",
    "icon library",
    "icon pack"
  ],
  "files": [
    "fonts/",
    "icons/",
    "LICENSE",
    "package.json",
    "README.md"
  ],
  "repository": {
    "type": "git",
    "url": "https://github.com/hackernoon/pixel-icon-library"
  },
  "license": "MIT",
  "devDependencies": {
    "fantasticon": "^4.1.0"
  },
  "overrides": {
    "@xmldom/xmldom": "^0.8.13"
  }
}


================================================
FILE: scripts/css.hbs
================================================
@font-face {
	font-family: "{{ name }}";
	src: {{{ fontSrc }}};
}

.{{ prefix }} {
	line-height: 1;
}

.{{ prefix }}:before {
	font-family: {{ name }} !important;
	font-style: normal;
	font-weight: normal !important;
	vertical-align: top;
}

{{# each codepoints }}
.{{ ../prefix }}-{{ @key }}:before {
	content: "\\{{ codepoint this }}";
}
{{/ each }}


================================================
FILE: scripts/generate.js
================================================
const fs = require("fs");
const path = require("path");

// Fix for Windows: fantasticon's glob patterns fail with backslash path separators.
// path.join produces "icons\SVG\**\*.svg" but glob needs "icons/SVG/**/*.svg".
// https://github.com/tancredi/fantasticon/issues/528
if (process.platform === "win32") {
  const originalJoin = path.join;
  path.join = function (...args) {
    return originalJoin.apply(this, args).replace(/\\/g, "/");
  };
}

// Ensure glob returns files in sorted alphabetical order so ALL generated
// font files (SVG, TTF, WOFF, WOFF2, EOT, CSS) have glyphs in consistent
// alphabetical order: brands → purcats → regular → solid.
const globModule = require("glob");
const originalGlob = globModule.glob;
globModule.glob = async function (...args) {
  const results = await originalGlob.apply(this, args);
  return results.sort();
};

// Build codepoints alphabetically (brands → purcats → regular → solid),
// matching the original webfonts-generator order. New icons added to any
// category will sort into place automatically on the next generation.
const svgRoot = path.resolve("icons", "SVG");
const codepoints = {};
let code = 0xf101;

for (const dir of fs.readdirSync(svgRoot).sort()) {
  const dirPath = path.join(svgRoot, dir);
  if (!fs.statSync(dirPath).isDirectory()) continue;

  for (const file of fs.readdirSync(dirPath).filter((f) => f.endsWith(".svg")).sort()) {
    codepoints[path.basename(file, ".svg")] = code++;
  }
}

// Use CJS require so fantasticon picks up our patched glob above.
const { generateFonts } = require("fantasticon");

(async () => {
  try {
    await generateFonts({
      inputDir: "./icons/SVG",
      outputDir: "./fonts",
      name: "iconfont",
      fontTypes: ["eot", "woff2", "woff", "ttf", "svg"],
      assetTypes: ["css"],
      prefix: "hn",
      fontHeight: 24,
      codepoints,
      getIconId: ({ basename }) => basename,
      templates: {
        css: "./scripts/css.hbs",
      },
    });
    console.log("Done!");
  } catch (error) {
    console.log("Fail!", error);
  }
})();