Fluent UI System Icons (svg)

This package provides the Fluent UI System Icons as optimized plain svg assets.

Installation

npm install @fluentui/svg-icons

Usage

The library offers icons in SVG format; the icon names are structured as:

[name]_[size]_[style]

• name - Name of the icon from assets that is all lowercased and underscore separated.
• size - Size of the icon that is one of 16/20/24/28/48. Note that some icons do not have all sizes available yet. Our designers are working to add missing ones to complete the collection.
• style - Style of the icon that is one of regular, filled. See the section below for details.

Icon styles

The library offers icons in two styles, regular and filled

regular	filled

Implementation

A common use case is to use svg-inline-loader in your Webpack config.

npm install svg-inline-loader --save-dev

webpack.js:

module.exports = {
    resolve: {
        extensions: [".svg"],
    },
    module: {
        rules: [
            {
                test: /\.svg$/,
                use: [
                    {
                        loader: "svg-inline-loader",
                        options: {
                            removeSVGTagAttrs: false,
                        },
                    },
                ],
            }
        ]
    }
};

Then reference an icon on a page.

Using template literal:

import AddIcon from "@fluentui/svg-icons/icons/add_20_filled.svg";

`<div>${AddIcon}</div>`

Or require:

var icon = require('@fluentui/svg-icons/icons/add_20_filled.svg');