How to Use?
The icons from the Pixel Icon Library can be used in multiple ways. The following usage methods apply to all license plans, choose the method that best fits your project.
Installation via NPM Package
Install the package:
npm i @hackernoon/pixel-icon-libraryImport 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 HTML img Tag
Using the img element directly in your HTML file.
<img src="path/to/icon.svg" alt="icon title"/>Using Inline HTML
Using the svg tag directly in your HTML file.
<body> <svg> ... </svg> </body>Using SVG as an Object
Using the object tag to add the SVG to your page.
<object data="path/to/icon.svg" width="24" height="24"></object>Using SVG Embed
Using the object tag to add the SVG to your page.
<embed src="path/to/icon.svg" />Using iFrame
Keep in mind that using iframe is not recommended, because its hard to maintain
<iframe src="path/to/icon.svg"> </iframe>Using in Figma via Component Library
Get your copy of the Pixel Icon Library from Figma Community