How to
Pixicons ships as one small script (43 KB) with every icon included. Add it once, then write icons as plain HTML.
01Add the script
Paste this line in the <head> of your page.
<script src="https://www.pixicons.io/kit/pixicons.js"></script>02Write an icon
Use an <i> with the px class, the icon name, a style and a variant. Find names in the library; each icon's popup gives you the exact HTML.
<i class="px px-heart px-blob px-fill"></i>03Pick a style and a variant
| Class | Regular | Fill |
|---|---|---|
| px-pixel | ||
| px-rounded | ||
| px-blob | ||
| px-liquid | ||
| px-liquid-blob | ||
| px-retro | ||
| px-stitch | ||
| px-knit | ||
| px-dots |
Variants are px-regular and px-fill. Leave them out and you get px-pixel and px-regular, or set your own defaults for the whole page:
<script src="https://www.pixicons.io/kit/pixicons.js" data-style="blob" data-variant="fill"></script>04Size and colour
Icons are 1em square and use the current text colour, so style them like text.
<span style="font-size: 32px; color: crimson">
<i class="px px-heart px-liquid px-fill"></i>
</span>Icons added later (React, Vue, AJAX…) are drawn automatically, and changing a class redraws the icon.
05Rather have SVG files?
No script needed. Open any icon in the library, pick a variant, a style and a colour, then copy the SVG or download it. Paste it into your code, Figma or any design tool.