@invisi/ficons
A local web-compatible icon font package with thousands of icons across multiple style variations.
Features
- Thousands of 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/ficons
Quick Start
Include the CSS in your HTML:
<link rel="stylesheet" href="fonts/ficons.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 |
Thousands of 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/
ficons.css # Unified CSS (imports all styles)
css/
flaticon-regular-straight.css
flaticon-regular-rounded.css
flaticon-bold-straight.css
...
webfonts/ # Font files (woff2, woff, ttf)
data/
all_icons.js # Icon data for explorer
explorer.html # Interactive icon browser
CLI Search
Search for icons directly from the command line using npx:
# Basic search
npx @invisi/ficons search camera
# Search with multiple keywords
npx @invisi/ficons search arrow left
# Filter by variation (prefix)
npx @invisi/ficons search user rr
npx @invisi/ficons search home --variation ss
Outputs JSON with icon names and available variations:
{
"camera": ["rs", "rr", "bs", "br", "ss", "sr", "ts", "tr"],
"camera-phone": ["rs", "rr", "bs", "br"]
}
Variation Prefixes
| Prefix | Style |
|---|---|
rs |
Regular Straight |
rr |
Regular Rounded |
rc |
Regular Chubby |
bs |
Bold Straight |
br |
Bold Rounded |
bc |
Bold Chubby |
ss |
Solid Straight |
sr |
Solid Rounded |
sc |
Solid Chubby |
ts |
Thin Straight |
tr |
Thin Rounded |
tc |
Thin Chubby |
ds |
Duotone Straight |
dr |
Duotone Rounded |
dc |
Duotone Chubby |
brands |
Brand Logos |
Icon Explorer
Open explorer.html in a browser to:
- Browse all 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
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