@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