@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