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/
    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/flaticon-uicons camera

# Search with multiple keywords
npx @invisi/flaticon-uicons arrow left

# Filter by variation (prefix)
npx @invisi/flaticon-uicons user rr
npx @invisi/flaticon-uicons 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 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>

README.md Unescape Escape

@invisi/flaticon-uicons