+
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-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 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
+
+
-```
-
-### Inline HTML
-
-You can paste the content of the icon file directly into your HTML code to display it on the page using the `` tag.
-
-```
-
- // Add your SVG code here
-
-```
-
-### CSS
-
-Instead of using an HTML `