Icon Font Generator

Pick icons from our library, customize size and color, and export as SVG sprite, individual SVGs, or CSS data URIs. Free, no signup needed.

An icon font generator lets you build a custom icon subset for your project. Pick exactly the icons you need, customize size and style, then export as an SVG sprite, individual files, or CSS — no bloated icon libraries required.

Customization

Selected Icons

0 selected

No icons selected yet

Export

How to Build a Custom Icon Set

An icon font generator saves you from loading a 500KB icon library when your project only needs 12 icons. Build a minimal, custom icon set that loads instantly and matches your design system.

Step 1: Browse and Select Icons

Use the search bar to find specific icons by name, or browse by category (Navigation, Actions, Social, File, Media, Misc). Click any icon to select it — it will be highlighted and added to your selection panel. Click it again to deselect. Use "Select All" to grab everything in the current filter, or "Clear" to start over.

Step 2: Customize Style

Set the icon size (16px through 48px), stroke width (1, 1.5, or 2px for thin to bold lines), and color using the color picker or by entering a hex value. The preview updates instantly. These settings are baked into the exported SVG files, so the exported icons will match your preview exactly.

Step 3: Choose Your Export Format

SVG Sprite is the best choice for most web projects — one file, referenced with <use href="#icon-name"/>, supports CSS color overrides. Individual SVGs ZIP is useful for design tools like Figma or for frameworks that import SVGs as components. CSS Data URI creates utility classes with inline background images — ideal for HTML email or CSS-only contexts.

Step 4: Use in Your Project

For SVG sprites: add the sprite file to your project root, then include <svg><use href="sprite.svg#icon-name"/></svg> wherever you need an icon. For CSS data URIs: link the CSS file in your <head> and add the class to any element.

More free tools

Favicon Generator

Create favicon icons for your website

SVG Blob Generator

Generate organic SVG blob shapes

Logo Generator

Create simple text-based logos

Color Palette Generator

Generate harmonious color palettes

CSS Gradient Generator

Build CSS gradient backgrounds visually

Placeholder Image Generator

Create dummy placeholder images

FAQ

Is the icon font generator free?

Yes, completely free with no account or signup needed. Select, customize, and export as many icon sets as you want.

What export formats are supported?

Four formats: SVG Sprite (single file with <symbol> elements), Individual SVGs as a ZIP download, CSS Data URI (background-image classes), and Copy SVG for individual icons to the clipboard.

Can I use these icons in commercial projects?

The icons in this tool are based on open SVG path data in the Heroicons/Lucide style. They are free for both personal and commercial use. Always verify license terms if using in a commercial product.

How do I use the SVG sprite in my project?

Download the sprite.svg file, include it in your HTML with <svg style='display:none'>...</svg>, then reference each icon with <svg><use href='#icon-name'/></svg>. The usage code is shown in the export panel after generating the sprite.

What's the difference between SVG sprite and CSS data URI?

SVG sprites are referenced inline and can be styled with CSS. CSS data URIs embed the icon as a background-image, which is simpler for use in CSS-only contexts but cannot be colored dynamically. Use sprites for interactive UIs, CSS data URIs for static decorative icons.

Can I change icon size and stroke width?

Yes. Adjust size (16, 20, 24, 32, or 48px), stroke width (1, 1.5, or 2px), and color (any hex value) using the customization panel. The preview updates instantly.

How many icons can I include in one export?

There is no limit — select as many as you need. For SVG sprites, all selected icons are included in one file. For individual SVG ZIP, each icon is its own file.