Fluenticon

Microsoft's Fluent System Icons, in your sidebar. Find an icon, click it, and the code lands at your cursor — with the import already written.

2,962 icons · outline and filled · React, Vue, Web and SVG

Getting started

Open the Fluenticon icon in the activity bar, search for what you need, and click it. That's the whole loop.

Pick your output format from the dropdown before you click:

React and Vue also get their import written into the file. If you have already imported from the package, the new name joins the existing line rather than adding a second one. In Vue single-file components the import goes inside <script setup>, where it belongs.

React and Vue output needs the matching package installed:

npm i @fluenticon/react   # or
npm i @fluenticon/vue

The Web format uses @fluenticon/web's stylesheet. The SVG format needs nothing at all — it writes plain markup.

Size and color

Set the size in px or rem and the color from the presets or the picker. Colors you pick are remembered, so a brand shade stays one click away.

The default color is currentColor, which means an icon takes the color of the text around it and follows your theme without you doing anything.

Favorites

Hover an icon and click the star. The ★ Favorites chip filters to them, and they survive restarts.

Settings

The gear in the header holds:

• Insert import — turn off if you manage imports yourself
• Always copy — copy to the clipboard instead of writing at the cursor
• Comfortable grid — larger cells and previews
• Component prefix — if your codebase writes <FiAccessTime />, set Fi and the import is aliased to match: import { AccessTime as FiAccessTime } from …
• Clear favorites

With no editor open, the snippet is copied to your clipboard instead, import line included.

Good to know

Not every icon is drawn at every size — some exist only at 20 and 24 px. The Web format encodes a size in its class name, so it falls back to the nearest published size; React and Vue take size as a prop and have no such limit. 47 icons are filled only and 8 are outline only, so a few disappear when you switch weight. That is the upstream set, not a gap in the extension.

The icon set ships with the extension rather than being fetched, so browsing is instant and works offline. It is a snapshot: this release carries Fluent System Icons 1.1.339. New icons Microsoft publishes arrive with the next Fluenticon release, not automatically.

More

Browse the full set, copy icons on the web, or grab the packages at fluenticon.com.

License

The extension is MIT. The icons are Microsoft's, distributed under the MIT license. Fluenticon is an unofficial project and is not affiliated with Microsoft.