ubunteroz
ae66c2e34c
Add 50,000+ icon font package sourced from Flaticon API with local webfonts and interactive icon explorer. Features: - 50,492 icons across 15 style variations (weight × corner) - Self-hosted webfonts (TTF, WOFF, WOFF2) - Interactive icon explorer with search and filters - FontForge-based build pipeline for generating fonts from SVGs - Drop-in CSS with class-based icon usage Build scripts: - scripts/build-font.py - Standalone FontForge Python script - build-fonts.js - Node.js orchestrator for font generation - update-icon-list.js - Fetch icon metadata from Flaticon API - build-icons-js.js - Generate browser-ready icon dataset Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> Co-Authored-By: Z.ai GLM 4.7 <noreply@z.ai>
@invisi/flaticon-uicons
A local web-compatible icon font package with 50,000+ icons across multiple style variations. Icons are sourced from Flaticon's public API and converted to webfonts using FontForge.
Features
- 50,492+ icons across 15 style variations (stroke weights × corner styles)
- Self-hosted - no CDN dependencies
- Interactive explorer - browse, search, and filter icons locally
- Web fonts - WOFF2, WOFF, TTF formats
- Easy integration - drop-in CSS with class-based icons
Installation
npm i @invisi/flaticon-uicons
Quick Start
Include the CSS in your HTML:
<link rel="stylesheet" href="fonts/flaticon.css">
Use icons with <span> or <i> elements:
<i class="fi fi-rs-user"></i>
<span class="fi fi-brs-home"></span>
<i class="fi fi-brands-instagram"></i>
Icon Styles
| Weight | Corner | Prefix | Example |
|---|---|---|---|
| Regular | Straight | fi-rs | <i class="fi fi-rs-user"></i> |
| Regular | Rounded | fi-rr | <i class="fi fi-rr-user"></i> |
| Bold | Straight | fi-bs | <i class="fi fi-bs-user"></i> |
| Bold | Rounded | fi-br | <i class="fi fi-br-user"></i> |
| Solid | Straight | fi-ss | <i class="fi fi-ss-user"></i> |
| Solid | Rounded | fi-sr | <i class="fi fi-sr-user"></i> |
| Thin | Straight | fi-ts | <i class="fi fi-ts-user"></i> |
| Thin | Rounded | fi-tr | <i class="fi fi-tr-user"></i> |
| Brands | - | fi-brands | <i class="fi fi-brands-facebook"></i> |
Icon Count
| Variant | Icons |
|---|---|
| Regular Straight | 5,043 |
| Regular Rounded | 5,039 |
| Bold Straight | 5,055 |
| Bold Rounded | 5,041 |
| Solid Straight | 5,044 |
| Solid Rounded | 5,051 |
| Thin Straight | 5,053 |
| Thin Rounded | 5,032 |
| Regular Chubby | 3,093 |
| Solid Chubby | 3,093 |
| Thin Chubby | 3,093 |
| Duotone Straight | 180 |
| Duotone Rounded | 160 |
| Duotone Chubby | 270 |
| Brands | 245 |
Total: 50,492 icon variations
Styling
Icons inherit font-size and color from their parent:
<!-- Size -->
<i class="fi fi-rs-heart" style="font-size: 24px;"></i>
<i class="fi fi-rs-heart" style="font-size: 48px;"></i>
<!-- Color -->
<i class="fi fi-rs-star" style="color: #f1c40f;"></i>
<i class="fi fi-rs-heart" style="color: #e74c3c;"></i>
Package Structure
fonts/
flaticon.css # Unified CSS (imports all styles)
css/
uicons-regular-straight.css
uicons-regular-rounded.css
uicons-bold-straight.css
...
webfonts/ # Font files (woff2, woff, ttf)
data/
all_icons.js # Icon data for explorer
explorer.html # Interactive icon browser
Icon Explorer
Open explorer.html in a browser to:
- Browse all 50,000+ icons
- Search by name or tags
- Filter by weight, corner style, and type
- Copy HTML snippets and CSS classes
- Adjust icon preview size
Development Scripts
# Fetch latest icon metadata from Flaticon API
npm run update:icons
# or: node update-icon-list.js
# Convert JSON to browser-ready JS
npm run build:icons
# or: node build-icons-js.js
# Generate webfonts from SVGs using FontForge
npm run build:fonts
# or: node build-fonts.js
License
Icons sourced from Flaticon UIcons. Please refer to Flaticon's license for usage terms.
Attribution
Uicons by <a href="https://www.flaticon.com/uicons">Flaticon</a>