Using your icon font
Unzip the download and copy the fonts folder and the CSS file to your site.
Link the CSS in the page head, then add an icon anywhere with its class:
<link rel="stylesheet" href="/my-icons.css">
<i class="icon icon-home" aria-hidden="true"></i>
Icons take the text colour and size, so color and font-size style them like text. In React, Vue or Angular, import the CSS once and use the same classes.
The demo page in the ZIP shows every icon with its class and code, ready to copy.
Stroke icons and traced outlines
A font can only store filled shapes - no strokes, no colours.
Popular sets like Lucide, Feather and Tabler draw icons with strokes. These are rendered at 1024 px and traced into smooth outlines, so they look the same as the original at normal sizes.
Filled icons, such as Font Awesome style SVGs, keep their exact vector shapes. White shapes drawn on top of a filled icon are traced as holes, so a white tick inside a circle stays visible.
Icon font, SVG sprite or ICO?
An icon font is one small file that works everywhere text works, including buttons, menus and email-safe HTML.
An SVG sprite keeps several colours and sharper edges, which is why the ZIP includes one too. Use the font for one-colour UI icons and the sprite when you need colour.
For a website icon or a Windows program icon you need an ICO file instead - convert a single SVG with SVG to ICO or build a full set with the Favicon Generator. Need a PNG of one icon? Try SVG to PNG.
