@hackernoon/pixel-icon-library

1.0.1 • Public • Published

Github Cover

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?

  • 360+ Unique Pixelated Vector Icons
  • 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 <iframe>

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 (Coming Soon🛠️)

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

Package Sidebar

Install

npm i @hackernoon/pixel-icon-library

Weekly Downloads

1

Version

1.0.1

License

MIT

Unpacked Size

886 kB

Total Files

1580

Last publish

Collaborators

  • torbet
  • fabian337
  • guyhackernoon
  • jefersonfromhackernoon
  • richardhackernoon