📖 Online Icon Font Generator: Custom Web Font Solution
Icon fonts are a lightweight alternative to image sprites in web development. They map vector graphics to Unicode characters, offering small size, color control, and resolution independence. The ng.cc online icon font generator is based on the free Font Awesome 6 icon library, letting you choose from 150+ icons, customise the font name and CSS prefix, and generate WOFF2/WOFF/TTF/EOT/SVG web fonts. All processing happens locally in your browser – no upload, protecting your project config privacy.
🎯 150+ free icons
Five categories: UI, social, devices, files, editor. Font Awesome 6 style, compatible with mainstream icon semantics.
📦 5 font formats
WOFF2/WOFF/TTF/EOT/SVG – covers all modern browsers and IE compatibility.
⚡ Live CSS/CDN
Automatic generation of @font-face rules and icon styles, with custom font name and CSS prefix, plus CDN links.
🔒 Local generation
Pure JavaScript – icon library and font config are processed entirely in your browser memory, zero network requests.
🎯 Icon font use cases
- 📱 Mobile H5: Use WOFF2 for tiny size, fast loading.
- 💻 Admin dashboards: Custom enterprise icon sets, consistent visual style.
- 🎨 UI component libraries: Create dedicated icon fonts for Vue/React components.
- 📄 Static websites: Avoid loading the full Font Awesome – only pack the icons you actually use.
- 🔄 Legacy project migration: Replace PNG sprites with vector font icons.
💡 Font format guide
- WOFF2: Best compression, recommended as primary format. 95%+ browser support.
- WOFF: Widely compatible fallback.
- TTF: TrueType – native on macOS/Linux, needs installation on Windows.
- EOT: Only for IE6‑11; uncheck if you don't need legacy IE.
- SVG: Only for old iOS Safari – deprecated in modern browsers.
❓ Frequently Asked Questions
❓ Q1: Does this tool generate actual TTF/WOFF files?
This tool is a pure frontend demo version that produces font configuration descriptions and CSS code. Actual TTF/WOFF2 font generation requires server‑side font compilation tools (like FontForge, Glyphs). You can export the config and compile locally with professional tools. We plan to integrate WebAssembly font compiler in version 2.0 for true in‑browser file generation.
❓ Q2: How do I deploy my selected icons to production?
Recommended workflow: 1. Select icons here → 2. Export config JSON → 3. Import into IcoMoon, FontForge etc. → 4. Generate real font files → 5. Upload to your CDN. The CSS generated here can be used directly after replacing the font file URLs with your actual deployment paths.
❓ Q3: Are the CDN links actually usable?
cdn.ng.cc is a placeholder. You need to upload the generated font files and CSS to your own CDN or static server. The tool provides the URL template; just replace it with your actual host.
❓ Q4: Can I upload my own SVG icons?
This version uses a built‑in icon library and does not support SVG upload. Converting custom SVGs to a font requires vector outline parsing, which is technically complex. It is on our roadmap.
❓ Q5: What about Unicode conflicts?
The tool uses Font Awesome's official Unicode code points (e.g. f015), which don't conflict with mainstream icon fonts. If you use multiple icon fonts in one project, you can isolate them with the CSS prefix (e.g. .ng-) to avoid style collisions.
❓ Q6: Can I use the icons commercially? Any copyright issues?
The icon library is derived from Font Awesome 6 Free, licensed under CC BY 4.0 + SIL OFL 1.1. You are free to use them in commercial projects, but you must retain the attribution (add a credit to Font Awesome in your project). Please refer to the official Font Awesome license for details.
🔗 Related Tools
This tool is part of the ng.cc frontend toolkit. You might also need:
⚡ All icon selection happens locally in your browser – your configuration never leaves your device.