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, or color. See the section below for details.

Icon styles

The library offers icons in three styles, regular, filled, and color.

| regular | filled | | -------------------------------------------------------- | ------------------------------------------------------ | | | |

regular and filled

Monochrome icons. The single design fill is stripped during build so the icon inherits currentColor (or whatever fill you set on the element), making them fully themeable.

import MailIcon from '@fluentui/svg-icons/icons/mail_24_regular.svg';

color (deprecated)

Multi-color icons (gradients, multiple fills) intended to be used as-is. Unlike regular/filled, their fills are preserved and not themeable, and each file's gradient/clip ids are namespaced with the file name (e.g. #mail_24_color__a) so multiple color icons can be inlined on the same page without id collisions.

import MailColorIcon from '@fluentui/svg-icons/icons/mail_24_color.svg';

Deprecated: color icons are deprecated and may be removed in a future release. Prefer regular/filled for new work. See the color variants guidance.

Note: color icons cover only a subset of the icon set (and not every size is available for each icon).

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');