How to Use?

The icons from the Pixel Icon Library can be used in multiple ways. Choose the method that best fits your project:

Installation via NPM Package

Install the package:

npm i @hackernoon/pixel-icon-library

Import the CSS in your project:

import '@hackernoon/pixel-icon-library/fonts/iconfont.css';

Use the icons in your HTML:

<i class="hn hn-github"></i>

Using the img element directly in your HTML file.

<img src="path/to/icon.svg" alt="icon title"/>

Using the svg tag directly in your HTML file.

<body> <svg> ... </svg> </body>

Using the object tag to add the SVG to your page.

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

Using the object tag to add the SVG to your page.

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

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

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

Get your copy of the Pixel Icon Library from Figma Community