fluenticons

fluenticons

Fluent Icons CSS library and JavaScript library.

Fluent Icons

Include CSS and font

Copy all files under dist/style folder to your project, such as fluenticons folder.

<link rel="stylesheet" type="text/css" href="fluenticons/fluenticons.css" />

Mark the html code to display, for example:

<i class="fluent-icon fluent-icon-ic_fluent_access_time_24_filled"></i>

All font icons can be viewed in dist/style/fluenticons.html.

Include JavaScript

Import the files you need from dist/js:

esm: 'dist/js/fluenticons.esm.js', // ES module for bundlers exposing `export const iconName = '<svg...'`
cjs: 'dist/js/fluenticons.js', // CommonJS for Node exposing `module.exports = { iconName: '<svg...' }`
esmx: 'dist/js/fluenticons.esm.jsx', // JSX ES module, exposing React components with `export`
cjsx: 'dist/js/fluenticons.cjs.jsx', // JSX CommonJS, exposing React components with `module.exports`
iife: 'dist/js/fluenticons.min.js', // Self executing <script>, exposing all icons as symbols on page,
dts: 'dist/js/fluenticons.d.ts', // Exposes typescript definitions with `export declare const`
dtsx: 'dist/js/fluenticons-jsx.d.ts' // Exposes typescript definitions for JSX with `export declare const`

More references

microsoft/fluentui-system-icons: Fluent System Icons are a collection of familiar, friendly and modern icons from Microsoft. (github.com)

fayazara/fluenticons: Fluenticons is an icon viewer for Microsofts fluent icons, with over 4000 pixel perfect icons in outlined and solid styles. Download the icons as SVG, PNG, WEBP, Vue component, React Component and HTML Image. (github.com)

fantasticon - npm (npmjs.com)

@nrk/svg-to-js - npm (npmjs.com)