@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/
    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

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>