@hackernoon/pixel-icon-library

v1.0.2

Published

a month ago

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

Downloads

111

0High
0Medium
0Low

rex12543

fabian337

jefersonfromhackernoon

richardhackernoon

hackernoon pixelated icon icon library icon pack

HackerNoon's Pixel Icon Library

Introducing HackerNoon’s Pixel Icon Library V2, an open-source collection of 1440+ 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?

380+ Unique Pixelated Vector Icons. 4 variations per icon to better match your project aesthetic.
Light SVG Files - 176.6 KB for the entire collection.
PNG files in 12px, 16 px, 24px, and 48px for both Light/Dark Mode
Multiple Ways to Use - Install via NPM Package, Directly via HTML & CSS, and via a Figma component library.

Usage

HTML Image

Using the <img /> element directly in your HTML file.

<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.

<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.

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

<object data="path/to/icon.svg" width="24" height="24"> </object>

Using

Keep in mind that using iframe is not recommended, because its hard to maintain

<iframe src="path/to/icon.svg"> </iframe>

SVG as embed

Most of the modern browsers have deprecated plugins, so this is not recommended.

<embed src="path/to/icon.svg" />

Figma

HackerNoon’s Pixel Icon Library is available as a Figma Community File. To use the components, log in to your Figma account and duplicate the file to your drafts.

Installation via NPM Package

Installing NPM Package

npm i @hackernoon/pixel-icon-library

Importing CSS Classes

<link rel="stylesheet" href="path/to/@hackernoon/pixel-icon-library/fonts/iconfont.css">

Displaying An Icon

<i class="hn hn-icon-name"></i>

License (CC BY 4.0 International)

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.

Contribution

For more info on how to contribute please check our Contribution Guidelines

Designed with 💚 by Designers at HackerNoon