Fast, Lightweight, and Customizable Icon Library.
Stop Guessing, Start Forging.
IconForge is a performance-focused, utility-style icon library that lets you load only the icons you need. Powered by a JIT (Just-In-Time) compiler, IconForge tree-shakes unused icons, dynamically injects CSS at runtime, and delivers blazing-fast performance whether you use it via CDN or IconForge CLI.
- Just-in-Time (JIT) Compiler: IconForge scans your HTML and generates only the CSS for the icons you are actually using. No more bloated CSS files.
- Tree-Shaking by Default: Unused icons are automatically removed, resulting in the smallest possible footprint.
- Utility-First Classes: A rich set of utility classes allows you to customize icon size, color, rotation, and animations directly in your HTML. Fully compatible with both CDN and CLI methods.
- IDE Integration: The official IconForge IntelliSense extension for VS Code provides autocompletion, icon previews, and CSS snippets right in your editor.
- CLI or CDN: Use IconForge CLI or drop the CDN link into your project to get started instantly.
- Huge Library: A massive library of icons for every need, from UI elements to popular brand logos.
There are two ways to get started with IconForge:
For the quickest setup, you can use the CDN link. The JIT compiler will scan your page on the fly and generate the necessary CSS.
Place the following script tag in the <head> section of your HTML file.
<script src="https://cdn.jsdelivr.net/npm/iconforged@latest"></script>For a more robust, production-ready setup, you can install the IconForge CLI.
1. Initialize your project:
Run the init command to initialize the project and create a default iconforge.config.cjs file in your project root.
npx iconforged init2. Start the build process:
Use the build command to perform a one-time scan and generate your CSS. Use watch to automatically rebuild as you make changes.
npx iconforged build
npx iconforged watchThis will generate an iconforge-output directory containing your iconforge.css and iconforge.woff2 files.
3. Link the generated stylesheet in your HTML:
Copy the following <link> tag into the <head> of your HTML file. The path should be relative to your HTML file.
<link rel="stylesheet" href="iconforge-output/iconforge.css">Using an icon is as simple as adding an <i> or <span> tag with the appropriate class name.
<!-- Basic Icon -->
<i class="if-user"></i>
<!-- Styled Icon -->
<i class="if-heart is-color-red-5 is-size-2xl is-anim-pulse"></i>Use prefixes like dark: hover: to dynamically change your icon
<!-- Dynamic Icon -->
<i class="if-bulb is-color-white dark:is-color-amber-4 is-size-2xl hover:is-anim-pop"></I>IconForge support arbitrary value's simply place the value between square brackets [VALUE]
<!-- Arbitrary Icon-->
<button class="is-sq hover:is-clickable">
<i class="if-iconforge is-color-[#ffad8c] is-size-[64px]"></i>
</button>The iconforge.config.cjs file allows you to control which files are scanned for icon classes.
module.exports = {
content: [
'./**/*.{html,js,ts,vue,jsx,tsx}',
],
// Add any classes that are generated dynamically and not found by the parser.
safelist: [""],
customCSS: [""],
};Supercharge your development workflow with the official IconForge IntelliSense extension for VS Code.
- Autocomplete: Get suggestions for icon and style classes as you type.
- Icon Previews: Hover over a icon class to see a smart preview of the icon.
- CSS Snippets: View the pre generated CSS.
Can't find an icon you're looking for? Request an icon
Found a bug? Report Here