In this blog, we will learn how can we use the icons of fluent UI in SPFx Web parts or SPFx Extensions.

Here are the steps to use fluent UI icons:


Steps to use fluent UI in SPFx Web parts/Extensions

Step 1

To use the fluent UI icons, first we need to install the package for fluent UI using below command.

Step 2

Now, we need to import Icons and Iconsprops as given below:

Step 3

Now, declare the global variable and assign the icon as given in below code. Here we are using global variable so we can use this icon multiple times.

Step 4

Now, in render method we can render the icon as given below:

Here is the full code snippet,

It will display the Home icon on your web part.


This is how we can use fluent UI icons in SPFx web parts or Extensions. Hope this blog will be helpful for you!