JSPM

@hackernoon/pixel-icon-library

1.0.6
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 320
  • Score
    100M100P100Q99260F
  • License MIT

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.

Package Exports

    This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@hackernoon/pixel-icon-library) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

    Readme

    Github Cover

    HackerNoon's Pixel Icon Library

    Introducing HackerNoon’s Pixel Icon Library (now available as a standalone site @ PixelIconLibrary.com), 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?

    • 400+ 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, 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